Versions Compared

Version Old Version 10 New Version 11
Changes made by

Itai Rosenvasser (Unlicensed)

Itai Rosenvasser (Unlicensed)

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 <items> defined

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

image-20240508-145519.png

image-20240508-150021.png

No items selected

Use when a user has selected no items.

image-20240508-145745.png

image-20240508-145915.png

Multiple/too many items selected

Use when a user has selected multiple or too many items

image-20240603-144319.pngImage Added

image-20240603-144357.pngImage Added

Waiting

Use when an action is in progress.

image-20240508-145627.png

image-20240508-145951.png

Specific use cases:

Empty notifications

Use when a user has no new notifications to review.

image-20240508-150955.pngImage Removed

Multiple/too many items selected

Use when a user has selected multiple or too many items

image-20240508-151215.pngImage Removed

image-20240603-144516.pngImage Added

image-20240603-144548.pngImage Added

High request volume

image-20240509-090211.pngImage Removed

image-20240603-144646.pngImage Added

Need a fix?

image-20240603-144719.pngImage Added

Service is down

image-20240509-090346.pngImage Removed

image-20240603-144818.pngImage Added

image-20240603-144923.pngImage Added

Interaction

  • Empty state illustrations and messages are non-interactive.

  • See the relevant documentation for Dialog Button and Text Link interactions.

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

Animations

  • jjj

  • ghghh

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

...

Verint products should dynamically respond to the user’s screen size, platform, and orientation, supporting all devices down to the common tablet size (960px width).

Component examples

Designs

Comment

image-20240603-145058.pngImage Added

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

image-20240603-145211.pngImage Added

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

image-20240603-145304.pngImage Added

  • 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

Design

Zeplin link

Screen thumbnail

https://zpl.io/llvJmwX

Needs an update?

Drafts:

...


Context dependent

Both icons and illustrations have several instances that correspond to common use cases of empty states

...

Type

Usage

Illustration

Icon

No results found

Use when a search returns no results.

No <items> defined

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

Empty notifications

Use when a user has no new notifications to review.

N/A

No items selected

Use when a user has selected no items.

Multiple items selected

Use when a user has selected multiple items.

TBD

Waiting

Use when an action is in progress.

Discuss with Asaf

Code

...