Usage

Empty states are a powerful way to support users in scenarios where they would otherwise be blocked by an empty screen. They provide guidance about what the user would see if the data were present and help them make next steps. This can make the user experience much smoother. There is not just one approach to fit all situations, hence, explore the variants below.

For the first use, starter content, onboarding, or error management.

Never leave a page blank, it might confuse users.

Anatomy

Component Empty state consists of:

Icon: selected icon from a set of prepared illustrations, visually describes a task.
Title (in Title Case): as short as possible but accurate note about what happened (no data, no results etc.).
Description (optional, in Sentence case): about what happened or a guide how to solve an issue; to structure empty content add a bullet list to add specific criteria.
Actions (optional): what action has to be taken, what user should do to have the content visible. a link for navigating to another area, a button to explain why space is empty and includes the benefit of taking this step.

Variants

First Usage

The information is shown when an object is firstly used:
- new template/workflow,
- first login of the writer into the application without tickets, etc.
User has to start with an action:
- insert an object (block into a new workflow),
- create the first ticket in the system, etc.
User has to be guided to start a new action:
- selection of space where a new object can be placed together with a description of the expected action (e.g. "Drop the block here."),
- shortcut for the creation of a new object or a description of the way leading to its creation, etc.

Missing Data

An object which depends on data that does not exist yet or resources are not connected.
Resources or data are set by someone else, not the users themselves:
- non-existing blocks,
- a chart which is not connected to its database or using an empty database,
- missing thumbnail or no preview.
Users have to be informed about the reason of not being able to see the content and that they cannot change it themselves, including the information about who can do such a change (e.g. No data – contact your administrator).