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 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.
...
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:
All illustrations are animated. |  |
Icon | Use:
|  |
Usage & Behaviour
General guidelines
Structure
An empty state consists of:
An illustration, which visualizes the type of empty stateA visual, either an illustration or an icon.
A short message , describing the state and recommended actions. Messages should be brief and informative.
A dialog Dialog button or a text Text link, guiding the user to perform a relevant action. (Optional).
...
Placement and Positioning
Empty states state visuals should:
Replace replace the content that would ordinarily be shown, such as the table or list.
Be be vertically and horizontally centered horizontally within the area of the content areawhich it replaces.
Full page positioning |
|---|
...
Specific elements positioning:
...
Content
Empty states can be applied to various types of content (data tables, lists, dashboards, etc.)
...
example | Small container positioning example |
|---|---|
 |  |
Content
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
...
:
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. |
|
|
No |
<item type> selected |
When a user has selected no items. |
 |
Waiting
Use when an action is in progress.
Specific use cases:
Empty notifications
Use when
| |||
Multiple/Too many <item type> selected | When a user has selected too many items. |  |
|
Empty in-tray (Specific use case) | When a user has no new |
items to review. |
Multiple/too many items selected
Use when a user has selected multiple or too many items
High request volume
Service is down
 |
|
Interaction
Empty state illustrations and messages icons are non-not interactive.
See the relevant documentation for The message may contain an additional Dialog Button and or Text Link interactions.
When an empty state is embedded within a container, the rest of the application should remain interactive.
Animations
jjj
ghghhactive.
Transitions
Appears:
After after a component or section finishes loading, and there is no data to show (for reasons stated above).
When when a specific user action hasn't been taken yet (has yet to be taken, for example, no items added/selected).
Disappears:
Either because of when some content is populated, either due to a user action (populates the state with content) or a process that changes the state (e.g. server is responsive again)or external change.
Best Practices
Do:
Use
...
Prompts to guide short, clear, and informative messages underneath the visual.
Guide the user to perform relevant actions.Clear, concise written explanationsa relevant action.
Don’t:
Leave a the content area completely blank content area for without an empty state . This visual - this creates confusion for users.
Use 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
| View file | ||
|---|---|---|
|
Design
Zeplin link | Screen thumbnail |
|---|---|
https://zpl.io/llvJmwX Needs an update? |  |
Drafts:
...
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.
...
...
...
...
Empty notifications
Use when a user has no new notifications to review.
...
Multiple/too many items selected
Use when a user has selected multiple or too many items
...
High request volume
...
Service is down
...
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
...
Code
...