6 awesome examples of empty states in web & app design

These designs share some great (and very different) approaches to being helpful when there’s nothing to show.

We all like to imagine the perfect scenario. Who wouldn’t? Mock-ups full of content and activity look way more interesting. They also help our teams to better understand the ideas we’re communicating.

That’s all well and good… But when we’re so caught up in the ideal, we often forget the empty states.

An empty state is what’s shown when there’s nothing to show. For example:

  • An activity feed, if I’ve not made any connections.
  • An events calendar, if there’s nothing scheduled.
  • A list of my created content , I’ve not created any yet.

There are many ways to handle empty states. Like most topics in UX, there’s no one-size-fits-all approach.

Here are six great examples of empty states. I’ve picked these because they all use very different approaches to help the user.

BBC News - my news

Screenshot of The BBC News app's empty state.

Approach

Simplicity and clarity.

Why it’s awesome

The BBC provides a functional yet effective empty state for their ‘My News’ section.

Bold instructions are provided with a strong call to action. It’s straightforward, sure. But it’s a great reminder that empty states don’t need to be complicated. Just considered.

Skyscanner- home screen

Screenshot of the Skyscanner app's empty state.

Approach

Delight the user.

Why it’s awesome

Loading the app for the first time, there’s nothing to see yet. Where I’d normally see a feed of my tracked flights, the app instead uses some lovely illustrations to describe the page’s normal purpose.

It’s a beautifully simple, with the user-friendly language and images adding extra character. It provides a great first impression.

Spotify - playlists

Screenshot of the Spotify app's playlist empty state.

Approach

Provide helpful suggestions.

Why it’s awesome

A playlist isn’t much good without songs. After making a fresh playlist, I’m not just given an instruction to add songs… Spotify go one step further. The empty state is used to provide me with suggestions right away.

Rather than the empty state being just ‘empty’, Spotify have attempted to introduce something helpful instead. As a bonus, the suggestions get more relevant as I start adding songs.

Trainline - my tickets

Screenshot of the Trainline app's empty state.

Approach

Supply relevant examples.

Why it’s awesome

If I’ve not yet booked a journey, Trainline’s ticketing app use the empty state to show an example. Rather than just using a totally made-up ticket, they show me a recent train journey in my city.

The more relevant example helps me understand how the service works. The remaining space is also used to explain the benefits, with a prominent button to plan a new journey.

Facebook - business pages

Screenshot of Facebook's business page's empty state.

Approach

Use placeholders effectively.

Why it’s awesome

When I first set up a Facebook page for my business, there’s a lot of information I could add. There are also loads of ways I could start interacting.

This could be quite overwhelming… But Facebook do a great job of filling the gaps with helpful placeholders, prompts and tips. It gradually draws me into the service. It highlights the tasks I haven’t yet completed in the relevant parts of the page.

Trello - welcome board

Screenshot of Trello's welcome board.

Approach

Sidestep the empty state entirely through clever onboarding.

Why it’s awesome

Trello avoid a traditional ‘empty state’ entirely via the app’s clever onboarding process. Instead of providing lengthly tutorials or explainers, a fresh Trello account opens with a ‘welcome board’.

The welcome board gives me a bunch of little tasks to train me in the Trello UI… using the Trello UI. A really neat way to learn the app. Interestingly this approach, sidesteps the need for a conventional empty screen.

Found this useful? Why not share it?

Chris Myhill, an incredibly handsome UX designer who heads up Just UX Design

Chris Myhill

Chris heads up Just UX Design with years of experience managing digital design teams.

He’s worked on loads of different projects, using UX wizardry to help businesses make better products.

Learn more about Chris

← back