Tips on improving your empty state designs

E mpty states occur during user journeys when a product or app has nothing to display. This lack of data or content can occur for a variety of reasons, and presents a great opportunity to add relevant content and greatly improve a user’s experience. This relevant content can include a list without list items, a search that returns no results, or a default state when an online connection is lost.

1. Guide the user

Depending on the type of empty state screen a user sees, they can be used to help the user understand what to do next. For example a to-do list app may display a prompt to add your first task, while a shopping app may encourage users to add items to their cart. The opportunity here is to allow users to get started quickly and easily with a potentially new product.

Prompt to add your first task in a task manager

2. Provide starter content

This has the potential to ensure a user understands what is going on and what to do next. By populating what would otherwise be an empty screen, you present the user with an opportunity to begin using and learning your product immediately. Content focused apps centered around music or books can often be seen doing this.

Recommended content you may like

3. Use suggested alternatives

It is all too easy for users to search for content that doesn’t exist within a product. In this case, rather than surfacing a screen telling the user you can’t find what they’re looking for, provide close matches or suggested alternatives. These results can in turn lead to a user finding what they are looking for.

Suggested content based on your search

4. Give context

In the event a user transitions from a screen with content to an empty state without navigating away, be sure to provide context to the user on why this has happened. For example losing your internet connection, or clearing your inbox should convey the reason there is no longer content on screen.

Explain why content has changed

5. Add personality

Empty states often see brands trying to inject humour into their apps or products. If this fits in with the the tone of the brand it’s for then great. However, humour is also extremely subjective and often subject to change so use it with caution. Another solution is to use approachable and friendly language that not only gets the message across, but also helps your brand feel more real.

Set the right tone for your product

Although these situations aren’t primary user journeys they still need to be accounted for, and solutions put in place to handle them. The advantage of having a solution in place for these journeys is that it can be used to resolve any potential issues a user is facing, help a user understand what is going on, and showcase a products personality. The important thing to keep in mind for empty states is the user’s goal and the context of why they’ve landed where they have.