Related Pages: System Errors

Description

Empty states are used where there is no content to display. They show the system status and can guide users to features and actions relevant to their workflow.

Types

Illustration

• Use for a single empty state with sufficient space for displaying the illustration.

• Use an illustration relevant to the specific context, for example, no results found, no <items> defined, no items selected, etc.

• If a certain illustration is used with animation, it should be applied consistently across an application

Icon

• Use an icon when multiple empty states are needed in different content areas on the same screen, or where space is limited.

Usage & Behaviour

General guidelines

Structure

An empty state consists of:

• An illustration, which visualizes the type of empty state.

• A message, describing the state and recommended actions. Messages should be brief and informative.

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

Placement and Positioning

Empty states should:

• Replace the content that would ordinarily be shown.

• Be centered horizontally within the content area.

Full page positioning:

Specific elements positioning:

Content

Empty states can be applied to various types of content (data tables, lists, dashboards, etc.)

• Use a precise message that explains the current state.

• The selection of the image depends on the specific context.

• Where relevant, include direct links to related actions, such as clearing filters or adding new content.

Current variants

Context	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.
No items selected Use when a user has selected no items.
Multiple/too many items selected Use when a user has selected multiple or too many items
Waiting Use when an action is in progress.
Specific use cases:
Empty notifications Use when a user has no new notifications to review.
High request volume		Need a fix?
Service is down

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

Best Practices

Use:

• Prompts to guide the user to perform relevant actions.

• Clear, concise written explanations.

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?

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