Empty states

Overview

Empty states present a basic but unique opportunity to support and enhance the user experience by providing useful information and direction. For example, empty states can be used to inform the user about what data would be displayed if it were available, as well as to guide the user about what steps to take next. Empty states can be particularly helpful when unexpected errors come up.

Users are generally familiar with the basic empty state that communicates what data is missing from a page. But there are also other functions for empty states that deserve their own distinctive approach.

 

The empty states pattern covers the following functions:

• Basic empty state for when there is no data, user action confirmations, and error empty states
• Starter content for first-use states to provide pre-created samples
• Teasing pages for first-use empty states, including in-line documentation and in-app promotion

Basic empty state

The basic empty state is the most common type in the Emplifi platform. We differentiate several types of basic empty states.

Basic empty state by usage

• No data empty states
• User action empty states
• Error empty states

Basic empty state by attention level

• High attention
• Low attention

 

Empty state by usage

No data empty states

No data empty states are the most common basic empty states, used to explain what data is missing from the page and to communicate which steps the user can take to populate the page with data when using it for the first time.

User action empty states

User action empty states that are displayed after a user has taken an action.

Examples:

• A message indicating that no search results were found
• A message informing the user that there are no issues to address

A message showing there are no search results

Always explain to the user why the message is being displayed and offer guidance to help the user take the next productive step. For instance, if no search results have been found, suggest adjusting the keywords or filters.

A message informing the user that there are no issues to address

In situations where there are no issues to address and no next steps to take, try to think about what other information could be useful for the user.

You may decide that a supplementary text isn't necessary. For example, if the user has set up queues and no complaint has been received, it’s not a case of queues not being set up but that there is nothing that requires the user’s attention. In this case, there's no need to add supplementary text.

Error empty states

Empty states may also come up when data is there but can't be accessed by the user. In these situations, it's useful to support the user with more specific information that can both explain the situation and help them smoothly solve the issue.

Here are some error situations that may be addressed with the basic empty state:

An error empty state for a system problem

Always support the user by explaining why there is no data, as well as what the user can do to overcome the inaccessible or missing data or explain what conditions are needed for the data to become accessible.

 

Empty state by attention

High attention

Use high attention empty states in cases where the design needs to grab the user's attention, for example, if the whole platform is down or an essential part of the feature has no data. The high attention empty state should be designed with enough space around it so that it is instantly visible to the user.

High attention empty states involve a high-attention illustration with a headline and explanation. Except in some cases, there should be also at least one action to help users with the next step.

Low attention

Use low attention empty states in cases where there is already one high attention empty state in space, or if the size of the area without data is too small for a high attention empty state design.

Low attention empty states involve a low attention illustration supported by a headline and, in some cases, also an explanation.

Rules to consider with high and low attention empty states

• A page should contain only one high attention empty state and it should represent the main data area for that page
• The number of low attention empty states per page is unlimited
• In case all data areas on the page are empty, we recommended using just one empty state for the whole page. The exception is the dashboard, where we want to show an empty state for each widget.

 

Starter content

Another way of approaching an empty space is to populate it with pre-created content and sample data, so as to help a new user become familiar with a feature.

This type of starter content offers users the practical chance to learn about the feature, as well as to review and delete content without any issue. We recommend personalizing starter content to create the best user experience possible.

When someone feels like she can explore an interface and not suffer dire consequences, she’s likely to learn more—and feel more positive about it—than someone who doesn’t explore. Good software allows people to try something unfamiliar, back out, and try something else, all without stress.

-Jenifer Tidwell, Designing Interfaces, (O’Reilly Media, 2011), 9.

Example of starter content in Content Collections

Aspects to consider for starter content

• Planning starter content needs to involve the full product team, in order to establish the most helpful processes and configurations from the user's perspective
• When allowing the user to delete starter content, make sure you have a backup basic empty state to display in case of content removal

 

Teasing pages

The teasing page is used to promote whole categories or applications to the user within the app, with the goal of convincing the user to try them. They are most helpful when a primary feature is first introduced in the app, by providing more detail and highlighting any benefits of the feature. Including an image may help further trigger interest and usage.

We differentiate two types of teasing pages depending on their purpose:

1. Promotion teasing page
2. First-use teasing page

The teasing page should provide a detailed overview of the inaccessible page so the user understands more about the feature, and at least one call-to-action to encourage the user to get started.

Considerations for teasing pages

• If testing results show that users don't understand the feature or concept, providing informative detail about the feature may encourage usage
• Teasing pages may require a higher level of maintenance than a basic empty state if using product images, as images will need to be kept up-to-date over time
• Keep the content limited to one feature. Don't talk about other areas of the app. If there are multiple actions a user could take, pick the most important one and stay focused on that.

Promotion teasing page

When a feature is not fully included in the account solution but users are able to request it, use the promotion teasing page. This type of teasing page can be used to market the main application or category to the user by highlighting its main benefits.

The main call-to-action is presented within the request button. It can be supported by a secondary link button to learn more information about the feature, for instance, to the relevant knowledge base page.

First-use page

Use the first-use page when the whole feature is a part of the account solution, but the user has not yet created or added any content. The first-use page appears only once. In case users add and later remove all data, we show no data empty state.

The main call-to-action is presented within the primary button. It can be supported by a secondary link button to learn more information about the feature, for instance, to the relevant knowledge base page.

 

References

• Jakob Nielsen, Error Message Guidelines (Nielsen Norman Group, 2001)
• Jakob Nielsen and Page Labuheimer, Top 10 Application-Design Mistakes (Nielsen Norman Group, 2019)
• Kathryn Whitenton, 3 Guidelines for Search Engine “No Results” Pages (Nielsen Norman Group, 2014)