3 Good Practices for Displaying an Empty State

An “Empty state” or empty screen or zero-data state is the moment in which regular content of a page can’t be displayed to users.

It is a great opportunity for UX designers to create a more consequential and satisfying experience. It is also a lucky chance for good design to prevent user disappointment or confusion.

Empty states are significant screens that not only designers but also developers, and product managers should take into consideration. They have a remarkable potential to boost customer engagement, customer delight and retain users. Good choice of words and visual content are the passport to interacting with your users and helping them achieve their goals.

  Some examples where empty states occur:  

• If there is no item in a list
• When there are no results in a search
• Occurrence of an error

As we look at the subject from a user’s perception, empty states appear:

• At the moment first impressions occur
• If users fail
• When users succeed

These moments have 2 possible outcomes:

1. User can abandon the app temporarily or permanently.
2. User can be engaged to be a loyal customer.

This little but very important element of the design has a notable impact on a user’s decision whether to abandon or to keep using an app.

Best Practices for Designing an Empty State

If you have to design an empty state, there are some great practices to keep in mind. Below is a basic outlook of our "Hotspots" page's empty state which we will extend as an example. There is not only one certain method to display empty states, but we are going to demonstrate how we have made it on this page so that you perceive the mindset behind designing them.

1. Guide Users by Educating Them

As we pointed out, empty states are great opportunities to interact with customers. We took the opportunity by describing verbally how to use the feature and shortly explained how to start and what is going to happen after creating a Hotspot. We also backlinked an article that clarifies the functionality of the feature to eliminate the questions users may have. Pushing users to go ahead is the main aim here.

"Get started by creating a hotspot group! All of your hotspot groups will be displayed on this page. Learn more about hotspots here."

2. Use Visuality

Visuality is the key to drawing a strong image or pattern in users' minds on how to use the feature. Well-Designed visual content is going to be deeply effective for encouraging users to move forward to the next step. What I mean well-designed is that a proper visual content must not be confusing or distractive, they rather need to be explaining, appropriate for the general appearance of the page, and simple. We created a catchy image that simply explains the function of the feature.

3. Push Users To Take Action with A Button

Putting a relevant button in an empty state is a loud and clear call for users to retain on the page. It creates an opportunity for users to keep on the action.  

Even giants are displaying empty states by using the steps we mentioned above. Surely, there may be other creative ways to do it except these.

3 Examples of Empty States

We used our "Hotspots" page's empty state as a sample of the subject. Here are some other examples from several well-known applications.

1. Snapchat

Imagine there was no image and a button, a remarkable number of users would probably not go next step. However, It is now a good start for a user to see such an empty state.

2. Dropbox

Dropbox's designer team certainly know how to do it. This exactly what you would like to see as an empty state. A great image, catchy phrase, and a button as it should be.

3. Facebook

Beyond giving information, this empty state encourages the user to find new friends which are the principal dynamic of Facebook.