by Chris Myhill
Director of Experience
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 better understand the ideas we are communicating.
That’s all well and good… But when we’re so caught up in the ideal, we sometimes forget the empty states.
An empty state is what’s shown when there’s nothing else to show. For example:
- An activity feed, before I’ve made any connections.
- An events calendar, if there’s nothing scheduled.
- A list of my created content , when I’ve made any yet.
There are many ways to handle empty states. These examples use very different (and effective) approaches to help the user with a well designed empty state.
1. BBC News App
The BBC provides a functional yet effective empty state for the ‘My News’ section. Bold instructions are provided, along with a strong call to action.
It’s straightforward, but it’s a great reminder that empty states don’t need to be complicated. Just considered.
The BBC app provides a functional yet effective empty state for the ‘My News’ section.
2. Skyscanner
Loading the app for the first time, there’s nothing to see (yet). Where I’d normally see a list of my trips, the app instead uses some lovely illustrations to set the tone.
It’s a beautifully simple. The user-friendly language and images add extra character, providing a great first impression.
Skyscanner use friendly language and illustrations to add character through the empty state.
3. Trainline
If I’ve not yet booked a journey, Trainline’s ticketing app uses the empty state to show an example.
This helps me understand how the service works, and what I’d normally be seeing on this screen. The remaining space is also used to explain the benefits, with a prominent button to plan a new trip.
Trainline's empty states show examples of what the screen would normally display.
4. Todoist
Todoist helps users track and work through their tasks for a given day.
If someone is lucky enough to have cleared their list, the app congratulates them and provides a little surprise illustration. It’s a nice touch to make the empty screen feel a bit more engaging.
If a user is lucky enough to have cleared a to do list, the empty state shows a congratulations message.
5. Spotify
A playlist isn’t much good without songs. After making a fresh playlist, Spotify use the empty state as a way to provide song suggestions right away.
Rather than the empty state being just ‘empty’, Spotify have attempted to introduce something helpful instead. As a bonus, the suggestions stick around and get more relevant as I start adding songs.
Spotify show suggestions to help users build a new playlist.
6. Facebook for businesses
When first setting up a Facebook page for a business, there’s a lot of information one could add. There are also loads of different ways to 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 users into the service, highlighting tasks that haven’t yet completed in the relevant parts of the page.
Facebook do a great job of filling the gaps with helpful placeholders, prompts and tips.
7. Trello
Trello avoid a traditional ‘empty state’ entirely. They do this 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 users a bunch of little tasks to get them used to the app. Effectively, they train users in the Trello by using Trello. It’s a really neat way to learn the app and sidesteps the need for a conventional empty screen.
Instead of simply showing nothing, a fresh Trello account opens with a ‘welcome board’.
Share this post
Related Posts
The art of efficient prototyping
16th February 2021
Prototypes are a digital designer’s most valued output. Building them efficiently has never been more important.
10 tips for writing effective website copy
13th January 2021
It’s important to choose words wisely when writing for the web. Here are some quick tips when producing written content for websites and apps.
What makes a website easy to use?
15th December 2020
Designing user friendly websites doesn’t have to be rocket science. Keep these principles mind, and make things simple for your users.