...
...
...
Related Pages: System Errors
| Table of Contents |
|---|
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 a relevant illustration, corresponding to the exact use case: No results found, No <items> defined, No items selected, Multiple items selected, or Waiting.
...
Icon
Use an icon when multiple empty states are needed in different content areas on the same screen, or where space is limited.
...
Context dependent
Both icons and illustrations have several instances that correspond to common use cases of empty states
No results found | No <items> defined | No items selected | Waiting |
Use when a search returns no results. | Use when no items have been defined, such as an empty user list. | Use when a user has selected no items. | Use when an action is in progress. |
|
|
|
|
|
|
|
|
Other use cases may require a dedicated ad-hoc illustration or icon.
Empty notificationsUse when a user has no new notifications to review. | Multiple/too many items selectedUse when a user has selected multiple or too many items |
|
|
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.
For example:
...
Content
Empty states can apply to various types of content, such as Data Tables, Lists, and Dashboards.
Use a precise message that explains the current state.
Where relevant, include direct links to related actions, such as clearing filters or adding new content.
For example:
...
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.
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).
Design
Zeplin link | Screen thumbnail |
|---|---|
 |
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
...