Empty states are used when any type of content can't be displayed on a page.
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.