· articles

Lists, Lists, Lists

Lists as data structures, presentational design and real life things.

Lists as data structures, presentational design and real life things.

A bacon cheeseburger is a data structure, because it is an ordered list of it’s own ingredients.

'🍔' === [ '🍞', '🥬', '🍅', '🧅', '🧀', '🥓', '🥩', '🍞' ].join()

So is a sandwich, a hoagie, a hot dog, and pretty much any food that consists simply of stacked layers of its ingredients. Seven layer nacho dip and even some refreshments like a black & tan would qualify!

This might seem like a silly example, but it’s true! Lists often are viewed as a boring design format but they are extremely useful and deceivingly ubiquitous! They don’t have to be boring either. In fact plenty of exciting UI elements are actually lists in disguise, just like some of our favorite foods above.

Presenting data as a list in a user interface can be seen as too simplistic, unengaging and even bad UX in some cases, but lists will be the best way to present data more often than not. The design objective must be to enhance a list with extra decoration and functionality so that simple list becomes memorable and powerful.

The design frills lend delightfulness, engagement, and style to a list. So many things we interact with are just lists that have layers of delightful design bolted on. It’s even better if that added design provides user affordances. Consider these lists that often seem like much more than that:

  1. shopping cart
  2. search results
  3. music, podcast or video playlist
  4. email inbox
  5. news aggregator
  6. Class Syllabus
  7. Kan ban board (a list of lists!)

But more importantly, the extra functionality makes the UI more than just a list of data, but also a list of actions and options and even intelligence.

So many things are lists! It’s a bit of a struggle to think of ways of presenting information that are NOT lists. Narrative stories, perhaps are clearly not lists. Or are they just a list of sequential events… someone once said that “history is just one damn thing after another.” That sounds kind of like a list. Maybe data visualizations come to mind readily, but even then isn’t a bar chart just a list as well, where the items content bears on its geometric shape and order within the list? Is a line graph just a horizontally laid list where the items content affects its coordinate position within the list? Do the x & y axis and tooltips disqualify these as lists? or are those just further examples of UI design and functional frills?

What is really the distinction between a list and any other compound data structure?

The Cybernetic List

There’s a book out there called the Checklist Manifesto that praises and encourages us to use lists to boost our productivity. And it’s true, lists are a great productivity hack.

Lists can help us become superhuman. They can extend our minds and memory. They can extend our reach and influence. They can make us faster, smarter, more resourceful and more thoughtful.

The hard part is breaking down a large task into it’s components. Which is to say the hard part is listification… listifaction? (is there a word for this? there should be.)

Sometimes procrastination is caused by analysis paralysis, an emergent feeling of incapacity to settle on a decision and execute on it. In such cases, often the simple act of writing down the problem and perhaps also listing your choices can be the thing that breaks one out of that paralysis. This is another example of lists coming to our rescue. Sometimes writing something down makes it more concrete than merely thinking on it or talking about it ever could.

It’s why lists can be so helpful. The list becomes a de-facto decision or at least is an enabler of the decision making process. Putting pen to paper forces a decision out of you about sub-tasks and priorities. This acts as a way of clarifying the problem or zooming in on it, so to speak, to get a higher resolution view on the problem. You characterize the tasks on paper and the materializing of the words evaporates the “decision fog-of-war”.

Breaking up a large, high-level decision into a list of small, easy-to-handle, sub-components makes the whole problem soluble. After you’ve completed one of the sub-items on the list, the satisfaction of crossing it out helps perpetuate your momentum.

Aren’t lists just wonderful?! It’s no wonder they also make for time-tested UI/UX formats and useful data structures in programming!

Back to Blog