Empty states are often an afterthought for most designers.
The homepage and payment cart, for example, might be the most prioritized feature in your backlog–but what about the empty states of these features? How should they be tackled?
The following article is not comprehensive, or a “must do” by any means. Instead, it outlines three common types of empty state:
- first use
- user-cleared
- error
We’ll look at a good example of each, discuss why it works and how you might implement similar ideas, or expand upon it based on your unique situation.
1. First Use
The following screen is from the BBCNews app. It's an example of a screen where the user is using the app for the first time and needs some direction to “get started”.
It’s effective on a couple of levels:
It offers clear explanation. This empty state explains what the current feature does and gives you a button, which indicates how to get started. In this case, the user needs to add topics to create their own personal news feed.
It provides a link to populate that feature. The button, which takes the user to the page where they can populate the given screen, is a handy feature. It saves the user having to navigate home and try and find the screen by other means.
So how might you implement something similar yourself?
Provide an on boarding sequence. If the user is using your web app for the first time you might consider a walk-through to help them get up to speed. However, keep in mind that this may frustrate the expert and intermediate user. Consider only showing it once and then disseminating the information into your help section.
2. User-Cleared
The following page is the Wish List from the Apple iTunes store. It’s an example of a page where the user has nothing, or they have cleared everything from their list.
What makes this empty page effective?
Something is better than nothing. This wish list is not just outputting nothing. It gives the user a cue that they need to add an item to the list. The icon is big and bold, yet subtle. Your empty state should grab the users’ attention–you have nothing here!–but also be indicative of emptiness e.g. using muted colors etc.
Direct and straight to the point. It is tempting to put in some fluff text in your empty state.. perhaps a quote by somebody. However, most of the time the best option is just to be direct and straight to the point as shown in the example above “You haven't added anything to your wishlist”.
This wishlist page could have been improved, so what should we learn from it?
Provide an example. You can also think about adding an example of what a filled state might look like. This is probably more relevant to desktop than mobile interfaces as you have a bit more screen real estate to work with.
3. Error
The following error page is part of the Google Chrome browser. It is an example of a situation where the user is getting something other than their desired state. In this instance they are unable to connect to the internet.
This graphic has become familiar to millions, but what makes it work?
It’s appropriate for the situation. It works because the icon is subtle and appropriate to the gravity of the problem. It’s common to go for a cross or an “X” and that’s fine; it's a good way to grab someones attention, but here you just want to inform the user that something is amiss. You don’t need to scream about it with an over the top icon or message.
It offers more information. You should never leave your users unsure about what to do next. In this instance, Chrome has provided a More button to help troubleshoot the problem. In most instances, the user will probably be aware that they need to turn their wifi on, reset their modem or call their internet provider, but this adds value to those users who need more info.
How about applying this yourself?
Consider how critical your error messages are. How bad is the error? If it is critical to the user then you will need to really grab their attention with strong colors and clear hierarchy. Consider the language used and empathize with the user’s position. A funny icon which makes light of a frustrating situation might make matters worse!
Conclusion
This article has given you a good starting framework to consider when looking at empty states. Consider what type of empty state you are designing for and the most appropriate ways to layout the page based on your users’ situation and their goals.
A few good rules of thumb include:
- Fill in some relevant content that is simple and straight to the point
- Explain what the current feature does and give the user easy access to take action
- Provide examples of desired end states if possible (i.e. what a full page looks like)
- Make sure your users know what their next steps should be
- Use icons, color, language and hierarchy that is appropriate for the message you are communicating
Further Resources
- emptystat.es Examples of empty states in UI design
- Don’t Make Me ThinkA classic usability read by Steve Krug
- About Face 3 A great all-round user interface guide
- www.useronboard.com Onboarding teardowns and examples
