Related Pages:
Description
Empty states are moments in a user’s experience where there is no content to display. These moments can be utilised as opportunities to communicate system status, expose new features and provide pathways relevant to a user’s workflow to improve the UX of an application.
Types
LUX has specific designs for 4 empty state types. In full page empty state instances, the appropriate corresponding illustration should be used. In instances where an empty state must be shown within a widget, the corresponding icon should be used in place of the relevant illustration.
Type | Usage | Illustration | Full page | Widget | Icon? |
|---|---|---|---|---|---|
No results found | Use when a user’s search criteria returns no results. |  |  |  | |
No <entities> defined | Use when no entities, such as forms, have been added/defined. |  |  |  | |
You’re all caught up | Use when a user has no new notifications to review. |  |  | ||
Waiting | When an action is in progress. |  |  |
Usage & Behaviour
General guidelines
Structure
An empty state may consist of:
An illustration which visualises and contextualises the current state of the application.
Subtext - a brief, informative message which describes the state the application is in to the user.
A call-to-action button - a contextual action/UI element relevant to the user’s task.
A text link - a contextual action/UI element relevant to the user’s task.
For example:
Placement and Positioning
Empty states should be centered vertically and horizontally on full pages and in instances where the empty state must be shown in a container or pane.
In instances where empty states must be displayed inside a container or pane, the empty state should be centered vertically and horizontally.
Empty states should be positioned contextually to the relevant content.
Content
Use in-context, light-hearted illustrations to add delight and aesthetic appeal to the interface.
Use an accurate explanation that provides more detail on the current state the application is in.
Use contextual cues, relevant to the user’s task to educate users on how to use an application in real time.
Where possible, include direct links to the steps that need to be taken in the user’s workflow to accomplish a task/populate the screen.
Interaction
Empty states have no intrinsic interactions. For component-specific interactions see the documentation of that component.
Best Practices
Use:
To communicate system status to users
When content does not yet exist for a screen,
Visual content that is representative of the state
Clear, concise written explanations
In-context prompts that help a user to accomplish their task
Don’t use
Inaccurate written explanations.
Totally empty states (this approach creates confusion for users).
Irrelevant actions
Unrelated visual content
General
<…>
Accessibility Compliance
Unless otherwise specified, see our general compliance information in Fundamentals - Accessibility
Design
Zeplin link | Screen thumbnail |
|---|---|
 |
Code
