Course Blog Newsletter Subscribe

The Most Important Concept in Mobile App Design

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:

iphone home screen
I will use 'list' to sometimes mean 'grid', though not the reverse.

Open your email, bam. An inbox is a list of emails:

inbox list

And an email thread is a list of messages:

email thread list

A photo library is a list of photos (arranged in a grid, fine):

photo library grid

And a calendar? A list of events.

calendar event list

Even facebook, which masquerades as an incredibly complex social networking app, is approximately equal to a list of things your friends have posted.

facebook feed list

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?

Simple.

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”)
grid design for browsing

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
list design for scanning

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

asdf

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:

  1. Whitespace
  2. Horizontal rules
  3. Cards

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.

whitespace lists ui design
iOS standards dictate that most of these nav destinations should actually go in an tab bar on the bottom... but you get the idea.

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):

horizontal rules ui design

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.

horizontal rules and whitespace ui design
Not awful, but it is a bit messier than it needs to be, especially with those background images peeking through.

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:

horizontal rules and images ui design

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.

horizontal rules and images ui design

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:

horizontal rules facebook

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.

horizontal rules facebook and grey space
Ahhhh

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.

facebook app design with margins for cards
Slightly less immersive-feeling, but not necessarily bad for your app's list.

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?

You Might Also Like: