Why do we use empty states?
Empty states assist the user and encourage engagement with certain product features / capabilities. Empty states allow us to provide information that helps the user understand why content is not being shown, and – in some cases – provide instruction for the user to follow in order to have content shown.
Hierarchy of empty states
- Error: Full-screen empty state with an illustrated background which appears when no UI can be shown.
- Empty entity: This empty state depicts a call to action, as well as a step-by-step guide that describes what the user should do in order to have content shown. This empty state can be used to communicate feature benefits, to assist with user onboarding, or to drive feature adoption.
- Empty component: This empty state contains an image and a description that explains why no content is being shown. This description should provide instruction, advice or a call to action.
Web Content Accessibility Guidelines (WCAG) 2.1
As we are committed to the rules of the WCAG, the following needs to be considered when designing and implementing empty states:
- (A) Error Identification: If an input error is detected, the error is identified and communicated as text.
- (AA) Error Suggestion: If an input error is detected and a solution for the error is known, then the suggestions are provided to the user.
Rule of thumb
Avoid empty states when possible. If an empty state must be used, try to provide a suggestion, instruction or a call to action (for example, show a hint or provide suggestions for solving the problem). Alternatively, provide related advice or explanation for the empty state. Consider the language & voice guidelines.
An error page is used whenever a critical error occurs that results in not even the UI being shown. This should be the most generic empty state, but the error should nevertheless be described in as much detail as possible.
An error page consists of:
- an illustrated full-screen background
- a description of the problem.
- optional: Call to action (e.g. button to reload)
When no data can be shown within an entity (for example, a list view) an empty state is shown. This type of empty state is divided into multiple parts that may describe:
- what users have to do in order to receive data
- what benefits the feature offer the user (this might take up two parts)
An empty state of an entity view consists of:
- a headline
- general description
- three small illustrations (theme colored)
- three short descriptions (headline optional)
- a call to action button (optional: a secondary button for further actions)
There are multiple reasons why a component is unable to display content, for example, if a filter is no longer applicable to the items within a bookmarked filter list view, or if there is no relevant data available for a selected timeframe. If possible, and if it makes sense, always include a call to action button.
The empty state of a component consists of:
- a small illustration (theme colored)
- a headline
- a description
- a call to action button (if possible)
|User has not yet enabled a new feature||Show a call to action with a short introduction (empty entity view) on how to solve the problem and provide a button that will initiate a demo, or assist with solving the problem.|
|A list can't be shown due to too many nodes||Show a call to action with a short description of the problem and – if possible – provide the last, or most used, filters.|
|User has a typo in a freetext filter field (e.g. name: ~"horst-xyz")||Check if free text input is really necessary. Autocomplete can be useful to avoid typos and empty states. Show a call to action with suggestions ("Did you mean host-xyz?"), or provide an explanation for the empty state and related advice or instruction to remedy this (e.g. "No nodes match your filter settings. Try to change or remove some filters to see results.").|
|User has selected a timeframe where no data points are available.||Depends on the given use case. As an example, try to provide a call to action by offering to switch to a meaningful timeframe or explain to the user why there is no data in that specific timeframe and give an advice (e.g. "No data for the selected timeframe of 2h (Today, 09:39 – 11:39). Try adjusting the timeframe.").|