Versions Compared

Version Old Version 16 New Version 17
Changes made by

Itai Rosenvasser

Itai Rosenvasser

Saved on

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

Related Pages: System Errors

...

Context

Illustration

Icon

No results found

Use when a search returns no results.

image-20240508-143448.png

image-20240508-143528.png

No <item type> defined

Use when no items have been defined, such as an empty user list.

image-20240508-145519.png

image-20240508-150021.png

No <item type> selected

Use when a user has selected no items.

image-20240508-145745.png

image-20240508-145915.png

Multiple/too many <item type> selected

Use when a user has selected too many items

image-20240603-144319.png

image-20240603-144357.png

Waiting

  • Use when an action is in progress

  • Illustration is used instead of other progress indicators [link,link] if exists.

  • No icon - put a progress bar (indeterminant)

  • Move this line of the table to progress indicator

  • put here a link to “see also…progress indicators”

image-20240508-145627.png

image-20240508-145951.png

put a spinner

Specific use cases:

Empty in-tray

Use when a user has no new items to review.

image-20240603-144516.png

image-20240603-144548.png

High request volume

move to errors

image-20240603-144646.png

Need a fix?

image-20240603-144719.png

Service is down

move to errors

image-20240603-144818.png

image-20240603-144923.png

Interaction

  • Empty state illustrations and icons are non-interactive.

  • The message may contain an additional Dialog Button or a Text Link.

  • When an empty state is embedded within a container, the rest of the application should remain active.

Transitions

  • Appears:

    • After a component or section finishes loading, and there is no data to show.

    • 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).

...

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

...