What is an Empty State?

Empty states are moments within a user’s experience of a software product, where there is nothing to display; they can often be found within components, screens, or panels. For example, an empty checkout cart within an e-commerce store.

Here are some common empty state scenarios:

• An event’s attendance list when no users have signed up
• A checkout cart when you remove all items
• Filtering or searching content and getting no results
• Clicking a broken link, 404 page

Why Design Empty States?

By default, if a component or page has no content to display, a user would simply see an empty page or component. This default approach doesn’t make for good user experience; rather, creates a disconnect in the experience. A component with no content inside, might look like it has either failed to load or is producing an error. Furthermore, how can we visually determine the difference between a component that is in fact empty, failing to load data, or is producing an error?

Use Empty States to Communicate System Status

Our designs need to incorporate visual system indicators that inform users of the status of the system (e.g. empty, error, success state, etc.). If a page or component does not contain content or data, then it should display its empty state.

For example, consider the image below of an empty inbox. If the “Your focused inbox is cleared” contextual clue did not exist, then the user would not be able to tell whether or not there are truly no details to display, an error has occurred, or the system is still processing the request.

Types of Empty States

Here are some common categories of empty states:

• First use
• User cleared
• Errors
• No results

Use Empty States to Provide Learning Clues

A learning clue, like a message or button, is a contextual clue that is displayed to a user to help them learn how to use a system or application. Often these clues can be more helpful than tutorials in teaching users how to use a system. In-context clues can often be applied immediately and thus are far more memorable than lengthy onboarding tutorials.

Empty states present an opportunity to provide contextual help relevant to the user’s task. For example, consider the image below of a checkout cart of a popular food ordering app. When the cart is full, it is fairly obvious how a user might engage with the content. However, when the cart is empty, it presents some of the issues previously discussed; has an error occurred? How am I supposed to engage with the product?

Designers can use contextual clues, like graphics, text labels, or buttons, to inform users of an ‘empty’ system state and guide them to accomplishing the key tasks. Uber Eats, the popular food ordering app, makes use of contextual help content within the empty state. When the user has not added any food items to their basket, the would be cart item area displays an add items message and a start shopping button that directs users to the restaurant browsing panel.

Conclusion

Don’t let empty states be an afterthought, rather consider how it might improve and guide users through your product’s experience. Get creative with it, add graphics, animations, and most importantly, have fun!

To summarize a few points:

• Empty states are moments within a user’s experience of a software product, where there is nothing to display.
• If you do not provide contextual content within empty states, then you might confuse users because they might think that the product is producing an error.
• Always provide contextual clues that inform users of the ‘empty’ system state and guides them to accomplishing key tasks.
• Provide direct pathways, like links and buttons

‍