Lists, Details, and Flows

A lament around interface design

April 19, 2016 •

I’ve become a bit discontented. In a fit of base reductionism, my brain has begun boiling down digital design (apps/web/product/interface/etc, all the same thing) into to three types of designs: lists, details, and flows.

  • Lists are lists of things; collections that contain items. Often a homepage is a glorified list; a melting pot of lists even. “Indexes” or “Dashboards” we sometimes call them. A carousel is a horizontal list, shown one item at a time. Lists often take you to details.
  • Details zoom-in on a single item. These can be read-only or editable textboxes. Maybe there are some fancy charts and graphs. Details often contain more lists that link you to more details.
  • Flows are unique multiscreen bridges taking you from point A to point B. It could be a transactional checkout, where each screen has a digestible amount of editable details. Or it could be a wizard, a list of digestible content bites.

I’m sure there’s a Human Computer Interaction book I’ve never heard of that talks about this, but in my mind Apple’s iOS Human Interface Guidelines deserves a lot of credit for distilling these simple, modern digital design concepts. Not only did this document prepare us to design for the mobilpocalypse, but it illustrated these views very well and also shipped with prefab components to build them out.

Nothing is new under the sun however, WordPress has had this view structure with index and single views for quite some time. Rails too has scaffold index and show views. This pattern is possibly as old as software. Maybe as old as Kingdom-Phylum class ordering or books having a Table of Contents.

Maybe this is why websites all look the same? I don’t think sameness is inherently bad, it seems like we’re following the Web’s grain. Or, even more rudimentary, maybe this is the shape that information wants to exist.

Things don’t have to look the same either. There is a lot of freedom in these large buckets. Netflix is a list of movies and RetailMeNot is a list of coupons; they’re both lists yet they should probably look different. The design of the components should suit the content.

But if I’m honest with myself, reducing things down sort of ruined some of the magic of building websites. Once seen, it’s hard to un-see. In a lot of ways, the romance is gone now and I feel like I’m married to these three views over and over for the rest of my career.

Once that realization sets in, you spend the rest of your time wondering how we’ve collectively made everything so difficult if everything is always the same.

I posted a follow-up to this post called Alternate Realtities where I’m exploring alternatives to List, Details, and Flows.