Empty state
Empty space gives feedback to the user that the interface could contain the information but is empty for the moment.
Usage
This state is encountered on the interface when there is no data where it is supposed to be.
When to use:
when the system is new and having no data.
when the data is unavailable or deleted from the system.
To indicate that currently there is no data but it can be displayed by an action from the user. For ex. By adding filters.
To give feedback to the user that they have completed the successfully. (For ex. Confirmation on completion of a process, no result when searching).
Error management- When there is data but system fails to show data on the interface.
Types of empty states:
Simple- Empty state with primary action button. You can show an icon, a title, a subtitle, and a button.
Icon- Empty state with instruction to click UI (User Interface) element. You can only show an icon and a title.
Image- You can also show an image/placeholder and a subtitle.
Anatomy
Title
Subtitle
Action button
Do’s and Don’ts
DO
Keep words simple and quick to read.
If there is next step that user can perform, include a primary action button to make that action fast. Alternatively, guide them to what they need to click.
Be contextual while writing empty state content.
DON'T
Do not include multiple action items with empty states.
Do not use technical terms that is not understandable for users.
Do not let user be at the dead-end.