Related Pages: System Errors

...

Context	Illustration	Icon
No results found Use when a search returns no results.
No <item type> defined Use when no items have been defined, such as an empty user list.
No <item type> selected Use when a user has selected no items.
Multiple/too many <item type> selected Use when a user has selected too many items
Waiting Use when an action is in progress (address to progress bar) Illustration is in place in addition to any other progress indicator [link,link] if exists.
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).

Best Practices

Use:

• Prompts to guide the user to perform relevant actions.

• Clear, concise written explanations.

• Messages should be brief and informative. show the system status

• Prompts to guide users the user to features and perform actions relevant to their workflow.

• A message may contain information about the system status or direct to relevant features.

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

...