Related Pages: System Errors
| Table of Contents |
|---|
Description
Empty states are special messages shown in workspaces or containers to indicate that no content is unavailableavailable.
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 Dialog button or a text 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 state visuals should:
Replace replace the content that would ordinarily be shown, such as the table or list.
At the top 1/3 be vertically and horizontally centered within the area of the content area, centered horizontallywhich 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. |
put a spinner
Specific use cases:
Empty in-tray
Use when |
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”
High request volume
move to errors
Need a fix?
Service is down
move to errors
| |
Empty in-tray (Specific use case) | When a user has no new items to review. |
 |
|
Interaction
Empty state illustrations and icons are non-not 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 after a component or section finishes loading, and there is no data to show.
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
UseDo:
Clear, concise written explanations.
Messages should be brief and informative.
Prompts to guide Use short, clear, and informative messages underneath the visual.
Guide the user to perform actions a relevant to their workflowaction.
A message may contain information about the system status or direct to relevant features.
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).
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.
...
Download
| View file | ||
|---|---|---|
|
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
...
Code
...