Related Pages: System Errors

Description

Empty states are shown in workspaces or containers to indicate that no content is available.

They can apply to various patterns, including Data tables, Lists, and Dashboards.

...

Types

Type	Usage	Image
Illustration	Use: where there is sufficient space to display the illustration. in the main workspace when there is only one empty state shown. in the Details Pane. All illustrations are animated.
Icon	Use: where space is limited. in the main workspace when there are multiple empty states across different containers.

Usage & Behaviour

General guidelines

Structure

An empty state consists of:

• A visual, either an illustration or an icon.

• A short message describing the state and recommended actions.

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

...

Placement and Positioning

Empty state visuals should:

• replace the content that would ordinarily be shown, such as the table or list.

• be positioned 1/3 from the top vertically and horizontally centered within the area of the content area, and horizontally centeredwhich it replaces.

Full page positioning example	Small container positioning example

Image Removed

Image Added

Image Removed

Image Added

Content

The selection of the image depends on the specific context:

Message	Usage	Illustration	Icon
No results found	When a search returns no results.
No <item type> defined	Where no items have been defined, such as an empty user list.		Image Modified
No <item type> selected	When a user has selected no items.		Image Modified
Multiple/Too many <item type> selected	When a user has selected too many items.		Image Modified
Empty in-tray (Specific use case)	When a user has no new items to review.		Image Modified

Interaction

• Empty state illustrations and icons are not interactive.

• The message may contain an additional Dialog Button or 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 has yet to be taken, for example, no items added/selected.

• Disappears:

  • when some content is populated, either due to a user action or external change.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

Do:

• Use short, clear, and informative messages underneath the visual.

• Guide the user to perform a relevant action.

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

Don’t:

• Leave a the content area completely blank without an empty state visual - this creates confusion for users.

• Include links to irrelevant actions.

Accessibility Compliance

Unless otherwise specified, see our general compliance information in Fundamentals - Accessibility.

Responsive design

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

Download

Design

Zeplin link	Screen thumbnail
https://zpl.io/9Nqo6DW

Code

...