Lot of folks read my blog posts and email me, saying “Erik, sure that works for desktop, but what about mobile?”
This one’s for you! 🍻
Did you ever notice basically every mobile interface is just a list?
Boot up your device, the home screen is a list of apps:
Open your email, bam. An inbox is a list of emails:
And an email thread is a list of messages:
A photo library is a list of photos (arranged in a grid, fine):
And a calendar? A list of events.
Even facebook, which masquerades as an incredibly complex social networking app, is approximately equal to a list of things your friends have posted.
Are you still with me? If you want to be a good mobile designer, lists are THE most critical interface element to understand.
Since lists are more conceptual than, say, buttons, we need to understand the answers to conceptual questions:
- When do we use linear lists vs. grids?
- How do we separate list items from each other?
- What do we want to show for an individual list item? What do we hide?
- How do users find what they’re looking for in a list?
Let’s dive into these.
Linear Lists vs. Grids
When do you use one vs. the other?
Use a grid when…
- Users browse for the right item
- Users don’t know what item they’re going to choose until they see it
- There’s not a clearly superior sort order (e.g. “Alphabetical”)
On the other hand, use a list when…
- Users scan for the right item
- Users know what they want to click on even before they’ve actually found it
- There’s a clear sort order that makes sense
Long story short, scanning and browsing are the two main ways users look through lists. When you’re designing a list, figure out what they will do, and design for that case.
Browsing means you’re not exactly sure what you want. You’ll dive deeper when you find something that’s interesting. And it’s the less common use-case (hence why grids are less common than lists).
Scanning means you’re quickly going over the options, trying to jump to a single item that you can identify on the spot. It’s far more common than browsing. So let’s talk about them a bit more, eh?
Show What’s Actionable
Separating List Items
There’s a few ways of separating list items. If you’re designing mobile UI, you should be familiar with them. We’ll cover a few of the most basic:
- Horizontal rules
So, from the top…
Separator 1: Whitespace
Quick and dirty tip: If there’s ~1 line of content per item, try separating items with whitespace.
The fewer elements per item, the better whitespace works.
Separator 2: Horizontal Rules
For lists with 2-3 content elements per item, try separating with horizontal rules (HRs):
HRs make it easier for the eye to distinguish where one item begins and another ends – BUT!! – if you try to use them for lists where each item is only a single element, they’re going to look a little over-the-top.
Now, whitespace is a great element because it’s NOT actually an element. Whitespace simultaneously communicates and de-clutters.
(Attention please: NOTHING. ELSE. DOES. THAT.)
Horizontal rules are different. They can clutter up your design, if you’re not careful.
For instance, did you notice that I provided a small space between the right edge of the profile pic and the left edge of the HR in the “FOLLOWING” screen above? Here, look:
If you include horizontal rules too close to images, it can be really hard to make it look clean and de-cluttered.
I’ll show you again (sigh), but only because (a) I love you, and (b) I struggled with this stupid issue SO MUCH as a beginning designer.
OK, let’s keep going.
Separater 3: Cards
Eventually, a list item has so many sub-elements to it that even HRs don’t provide enough visual separation.
For instance, here’s facebook, but with feed items separated by HRs:
When I add the gray space between the “cards”, it’s a lot easier to see where one thing ends and the next begins. Compare/contrast.
By the way, if you’re looking at apps like facebook and Instagram, you’ll notice the cards aren’t what you typically think of as cards: they don’t have left/right edges!
Why doesn’t facebook show margins around its cards? Honestly, I don’t know for sure. But based on how ridiculously cross-platform and ridiculously space conscious facebook is, it seems very them to not waste/”waste” 32px of premier horizontal space.
So, card designers of Earth, keep that in mind. If you want to feature some sleek full-width content on your card, bleed those suckers right to the edge of the screen. If you want to keep an uber-clear separation of list items, nothing is clearer than a four-sided card.
Finding the Right Item
Earlier, I said scanning is way more common than browsing. When scanning, it’s paramount that you know what users are scanning for.
Whenever you’re designing a list, ask yourself how will my users know which item to click on?
Sometimes the answer is pretty straightforward:
- “I select the song I want to play by the name of the song”
- “I click on the article that looks interesting based on the headline”
- “I know the name of the conference room I want to reserve, so I scroll right to it”
Those examples lead us to the incredible conclusion that the name of the item is important.
But hold up. Sometimes things are more subtle.
- “First, I want to see if any VIP customers have outstanding tickets, and if so, how long they’ve been open for”
- “I’d actually just like to see the new comments and people who’ve recently tagged me – I don’t care about likes”
These sorts of use-cases are pushing us to grouping, conditional formatting, and filtering. That’s part of lists 201, which doesn’t actually exist, but you know what’s close? The Lists & Tables lesson in Learn UI Design.
What’s a (mobile) list design you’ve struggled with?
Just send me a screenshot or tweet your design. I’ll give feedback to everyone who takes me up on this. What could go wrong?