Related Pages: System Errors

...

Description

Empty states are used where there is no content to display. They show the system status and can guide users to features and actions relevant to their workflowspecial messages shown in workspaces or containers to indicate that content is unavailable.

...

Types - convert to a table

Illustration

• Use for a single empty state with sufficient space for displaying the illustration.

• Use an illustration relevant to the specific context, for example, no results found, no <items> defined, no items selected, etc.

• If a certain illustration is used with animation, it should be applied consistently across an applicationAll illustrations are animated.

...

Icon

• Use an icon when multiple empty states are needed in different content areas on in the same screenworkspace, or where space is limited.

...

An empty state consists of:

• An illustration, which visualizes the type of empty stateA visual.

• A message, describing the state and recommended actions. Messages should be brief and informative.

• A dialog button or a text link, guiding the user to perform a relevant action. (Optional)

...

Placement and Positioning

Empty states can be applied to various components (data tables, lists, dashboards, etc.).

Empty states should:

• Replace the content that would ordinarily be shown.

• Be centered horizontally within At the top 1/3 of the content area, centered horizontally.

Full page positioning:

...

Specific elements positioning:

...

Content

Empty states can be applied to various types of content (data tables, lists, dashboards, etc.)

...

Use a precise message that explains the current state.

The selection of the image depends on the specific context

...

Where relevant, include direct links to related actions, such as clearing filters or adding new content.

Current variants

:

Context	Illustration	Icon
No results found Use when a search returns no results.
No <items> <item type> defined Use when no items have been defined, such as an empty user list.
No items <item type> selected Use when a user has selected no items.
Multiple/too many items <item type> selected Use when a user has selected multiple or too many items
Waiting Use when an action is in progress . (address to progress bar)
Specific use cases:
Empty notifications Use when a user has no new notifications to review.
High request volume		Need a fix?
Service is down

Interaction

...

• When an illustration version is used for an empty state, it is optional to apply an animation to it.

See examples:

Transitions

• Appears:

  • After a component or section finishes loading, and there is no data to show (for reasons stated above).

  • When a specific user action hasn't been taken yet (for example, no items added/selected).

• Disappears:

  • Either because of a user action (populates the state with content) or a process that changes the state (e.g. server is responsive again).

...

• Prompts to guide the user to perform relevant actions.

• Clear, concise written explanations.

• Messages should be brief and informative. show the system status to guide users to features and actions relevant to their workflow.

Don’t:

• Leave a completely blank content area for an empty state. This creates confusion for users.

• Use links to irrelevant actions.

...

Zeplin link	Screen thumbnail
https://zpl.io/llvJmwX Needs an update?

Code

...

Drafts:

Empty states are elements, containing a visual and a corresponding text, that are used where there is no content to display

Empty states are used where there is no content to display. They include a visual and a corresponding text message and