Versions Compared

Version Old Version 17 New Version 18
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

...

Specific elements positioning:

Fix visual

...

Content

The selection of the image depends on the specific context:

image-20240603-144818.pngImage Removed

image-20240603-144923.pngImage Removed

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.pngImage Removed

image-20240508-145951.pngImage Removed

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.pngImage Removed

Need a fix?

image-20240603-144719.pngImage Removed

Service is down

move to errors

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 (has yet to be taken, 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).

...

Component examples

image-20240603-145058.pngImage Removed

image-20240603-145211.pngImage Removed

Designs

Comment

  • A waiting illustration is used when loading the content of an entire page.

  • The message below communicates to the situation to the user

  • A call to action is in place. Specifically in this use case the user can continue creating new items while waiting.

  • Waitinng illustration is used for the content of the details pane.

image-20240603-145304.pngImage Removed

  • When the content is only part of the entire screen and there can be multiple area that can be loaded, the icon is being used instead of an illustration.

    • A call to action button may also be present in other use cases

    image-20240707-080844.pngImage Added

    • Session has expired, user needs to log in again or start over the session.

    image-20240707-080314.pngImage Added

    • In registration/log in flow

    • Indicates an issue with sending an email

    image-20240707-080535.pngImage Added

    • Redirecting a current process or service

    image-20240707-081015.pngImage Added

    • A deny message that takes the entire screen

    • Used when user isn’t allowed to register or create a certain element.

    • Can also be used as a type of [error state]

    Design

    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

    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.pngImage Added