Empty State

Empty states are used when any type of content can't be displayed on a page.

Behavior

Empty states can be used in a variety of ways. It can be when a user loses internet connection, when a user returns no search results or just when there's no content to be shown.

The most basic empty state consists of a non-interactive image and helper text.

Use an image that:

• Has a neutral tone.
• Is consistent with your app.
• Provides visual detail of what content can't be shown.

Include helper text that:

• Provides a helpful message to the user.
• Has a consistent tone with your app.
• Explains what content is empty on the page.

Types of Empty States

Here are four types of frequently encountered empty states:

• First use – Occurs with a new product or service when there is still nothing to show, such as a new Listrunner account.
• User cleared – Occurs when users complete actions such as clearing their inbox or task list, and the result is an empty screen.
• Errors – These occur when something goes wrong, or when there are issues such as a mobile phone going offline due to network problems.
• No results/No data – Occurs when there is nothing to show. This can happen if someone performs a search and the query is empty or there isn’t data available to show (when filtering for a date-range that has no data for example).

As empty state design receives more attention, UX designers find that there are beneficial outcomes to utilizing them, both from a business and a user experience perspective.