| Table of Contents |
|---|
...
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 instances where a single empty state should be displayed, use the relevant illustration. In instances where there are several content panesareas, and or multiple empty states need to be shown at the same time, use the corresponding icon(s) instead.
Type | Usage | Illustration | Icon |
|---|---|---|---|
No results found | Use when a user’s search criteria returns no results. |  |  |
No <entities> <items> defined | Use when no entitiesitems, such as users in a list of users, have been defined. |  | |
Empty notifications | Use when a user has no new notifications to review. |  | N/A |
Waiting | Use when an action is in progress. |  | Discuss with Asaf |
Usage & Behaviour
General guidelines
Structure
An empty state may consist consists of:
An illustration - which visualises and contextualises the current state of the application.
Subtext - a brief, informative message which Message - describes the state the application is in to the user. An optional callShould be brief and informative.
Call-to-action button - a contextual action/UI element relevant to the user’s task. An optional text (Optional)
Text link - a contextual action/UI element relevant to the user’s task. (Optional)
For example:
...
Placement and Positioning
Empty states should replace the content that would ordinarily be shown.
Empty states should be centered vertically and horizontally in the content area.
...
Empty states can be used to display a wide variety of content. For example, they can include a list without list items, or a search that returns no results. Although these states aren’t typical, they should be catered for to prevent confusion and improve the UX.
...
Use sentence-case capitalisation.
...
Use contextual, light-hearted visual content to supplement the information provided.
...
See examples above. - Carliefy
Use an accurate explanation that details the state the application is currently in.
Use contextual cues relevant to the user’s task to educate users on how to use the application in real time. Where relevant, include direct links to the steps that need to be taken in the user’s workflow to accomplish a task.
...
Empty states are mostly non-interactive, with the exception of action options such as text links and call-to-action buttons, where relevant. For component-specific interactions see the documentation of that component.
When an empty state is embedded in a container, the rest of the application should remain interactive.
...
Totally empty states, this approach creates confusion for users.
Inaccurate written explanations.
Irrelevant actions.
Unrelated visual content.
General
<…>
Accessibility Compliance
Unless otherwise specified, see our general compliance information in Fundamentals - Accessibility
...