...
Related Pages: System Errors
| Table of Contents |
|---|
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 |
...
Icon
...
Use:
All illustrations are animated. |
...
 | |
Icon | Use:
|
...
|  |
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 vertically and horizontally centered within the area of the content
...
which it replaces.
Full page positioning |
|---|
...
Specific elements positioning:
...
example | Small container positioning example |
|---|---|
 |  |
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. |
...
|
...
|
No <item type> selected |
...
When a user has selected no items. |
...
 |
...
|
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. |
...
 |
...
|
Interaction
Empty state illustrations and icons are
...
not interactive.
The message may contain an additional Dialog Button or
...
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.
Best Practices
...
Do:
...
Clear, concise written explanations.
...
Messages should be brief and informative.
...
Use short, clear, and informative messages underneath the visual.
Guide the user to perform
...
a relevant action.
Don’t:
Leave
...
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
| View file | ||
|---|---|---|
|
Design
Zeplin link | Screen thumbnail |
|---|---|
...
Needs an update?
...
Fix Image - remove hourglass, update to newest images
...
Code
...
Drafts:
Empty states are elements, containing a visual and a corresponding text, that are used where there is no content to display
...
Code
...