Why do we use empty states?
Empty states are useful to guide the user and generate engagement. With empty states we can provide basic information and help users to understand why no data is shown.
There is a template for empty entity views, empty list views and empty tables.
Empty list views
There can be different reasons why the list shows up empty, for example: A bookmarked filter list view where the filter does not apply to items anymore.
Empty list style
The empty state of a list contains of:
- A headline
- A small illustration
- A description
Empty entity views
Apart from a general description of this view, empty views are divided multiple steps that should describe:
- What users have to do in order to receive data
- What benefits users get once they enable a feature (will most likely take up two steps)
Empty entity style (1380px-640px screen)
The empty states of entity views contain:
- A headline
- General description
- Three small illustration
- Three short descriptions
- Buttons if further actions are required
On small screens (<640px), the elements in empty views will move below the other. The arrows will turn to face down.
Empty entity views on big screens (>1380px)
The layout uses the whole available width of the view.