Related Pages: System Errors

Description

Empty states are special messages shown in workspaces or containers to indicate that content is unavailable.

Types

Illustration	Icon
Use for a single empty state with sufficient space for displaying the illustration. All illustrations are animated.	Use an icon when multiple empty states are needed in different content areas in the same workspace, or where space is limited.

Usage & Behaviour

General guidelines

Structure

An empty state consists of:

• A visual.

• A 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 states can be applied to various components (data tables, lists, dashboards, etc.).

Empty states should:

• Replace the content that would ordinarily be shown.

• At the top 1/3 of the content area, centered horizontally.

Full page positioning:

Specific elements positioning:

Content

The selection of the image depends on the specific context:

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 Illustration is used instead of other progress indicators [link,link] if exists. No icon - put a progress bar (indeterminant) Move this line to progress indicator put here a link to “see also…progress indicators”		put a spinner
Specific use cases:
Empty in-tray Use when a user has no new items to review.
High request volume move to errors		Need a fix?
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 (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:

• Clear, concise written explanations.

• Messages should be brief and informative.

• Prompts to guide the user to 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.

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

Component examples

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

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