Related Pages: System Errors
| Table of Contents |
|---|
Description
Empty states are moments in a user’s experience used where there is no content to display. These moments can be utilised as opportunities to communicate They show the system status, expose new and can guide users to features and provide pathways actions relevant to a user’s workflow to improve the UX of an applicationtheir workflow.
...
...
Types
Illustration
Use for a single empty state is displayed and there is sufficient space, use the relevant illustration.
Use for a single empty state is displayed and there is sufficient space, use the relevant illustration.
Icon
LUX has specific designs for 2 different empty states.
Where multiple empty states are shown in different content areas on the same screen, or there is insufficient space, use the corresponding icon(s) instead.
Type | Usage | Illustration |
|---|
Widget
Icon |
|---|
No results found | Use when a |
search |
returns no results. |
 |
 |
No |
<items> defined | Use when no |
items have been |
defined |
Render the LUX frame, including the VerinTop.
Replace the full content area with the empty state, such as an empty user list. |  |
Render the LUX frame, including the VerinTop.
Replace the content pane area with the empty state.
 | |
Empty notifications | Use when a user has no new notifications to review. |
| |||
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. |
Render the LUX frame, including the VerinTop.
Replace the full content area with the empty state.
| Discuss with Asaf |
Usage & Behaviour
General guidelines
Structure
An empty state may consist consists of:
An illustration, which visualises and contextualises the current state of the application.
Subtext - a brief, informative message which describes the state the application is in to the user.
A call-to-action button - a contextual action/UI element relevant to the user’s task.
A text link - a contextual action/UI element relevant to the user’s task.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)
For example:
...
Placement and Positioning
Empty states should:
replace the content that would ordinarily be shown.
Empty states should be centered vertically and horizontally in within the content area.
Content
Use in-context, light-hearted illustrations to add delight and aesthetic appeal to the interface.
Use an accurate explanation that provides more detail on the current state the application is in.
Use contextual cues, relevant to the user’s task to educate users on how to use an application in real time.
Where possible, include direct links to the steps that need to be taken in the user’s workflow to accomplish a task/populate the screen.
Interaction
...
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.
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:
When content does not yet exist for a screen or pane to provide guidance on how to populate the area with that content.
Contextual prompts (i.e., links) that help a user to accomplish their task.
Clearprompts to guide the user to perform relevant actions.
clear, concise written explanations.
Visual content that is representative of the state.
Don’t use:
Totally empty states, this approach leave a completely blank content area for an empty state. This creates confusion for users.
Inaccurate written explanations.
Irrelevant use links to irrelevant actions.
Unrelated visual content.
General
<…>
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 |
|---|---|
 |
Code
...