Empty states: why they are important

What is an empty state?

You may be wondering what an empty state is. I’m sure, at least once in your life, you have found yourself seeing a blank screen with no data and no guidance, not knowing what to do next.

As UX experts, we more often have projects evaluating data-heavy parts of websites or applications. Page content, amount of data and information comprehension are areas our clients like to get feedback on. While pages with data form the greatest part of your product’s user experience, there are some cases where your users will be presented with what we call ‘empty states’.

An empty state is a screen that displays no data. There are several reasons why a zero-data screen appears:

  • The user uses a website, application or a part of your product for the first time (e.g. empty downloads list – figure 1)
  • The user has cleared out content (e.g. empty email list – figure 2)
  • An error has occurred (e.g. no internet connection – figure 3)
  • A search doesn’t return any results (e.g. no results matching the search criteria – figure 4)

Here are some examples of empty states:

Image of the Netflix My Downloads space - empty state

Figure 1: Netflix – The user uses the download feature for the first time

 

Image of an inbox in an empty state

Figure 2: Close.io – All the emails have been cleared out by the user
Image credit: Emptystat.es

 

Image of Google Cast in empty state

Figure 3: Google cast on Android – No Wi-Fi detected
Image credit: Emptystat.es

 

Image of Gov.uk with zero search results

Figure 4: Gov.uk – 0 results found

 

Why thinking about ‘empty states’ is essential!

While empty states are around for a short time or not typical, they are of great importance. Blank screens with no guidance have been linked to causing high levels of confusion, uncertainty, disappointment, intimidation and leading to low customer retention.

The way an empty state has been designed, if at all, can have a large say in your product’s success.

A well designed empty state can be a fantastic opportunity to:

  • Make your product memorable and distinctive
  • Increase user engagement and persuasion
  • Connect with your customers on an emotional level – e.g. by invoking positive emotions such as joy, interest, safety and comfort
  • Communicate your product’s main benefits
  • Educate your customers and boost user confidence
  • Establish trust

Give your empty states the extra thought they deserve and your product will be perceived as more usable and pleasurable which will ultimately lead to a boost in user retention and customer loyalty.

Overlook it and you may see an increase in what you fear most – bounce rates.

Rules of thumb for designing usable empty states

Here are the basic rules of thumb for designing usable empty states:

  • Use simple language that is easily comprehensible
  • Provide a clear explanation on what the screen is for
  • Tell the user why he/ she is seeing a blank screen
  • Clearly communicate what the user needs to do next and how to take actions

While following these rules increases the possibility of creating usable empty states you should always bear in mind that the best way to explore how well your product works is test it early and over the course of the design process with representative users. This will allow you to have a greater confidence in your product’s usability prior to its launch.

Want to know more about designing for heavy and zero-data screens and conducting usability research?

Leave a comment

Your email address will not be published.

Read enough? Get in touch...

Contact Caroline Bentley to discuss your needs:
0207 608 1670 more@bunnyfoot.com

Or come visit us, we have offices in Oxford, Sheffield and London.