Description
Empty states are moments in a user’s experience where there is no content to display. These moments can be utilised as opportunities to communicate system status, expose new features and provide pathways relevant to a user’s workflow to improve the UX of our applications.
Empty states are moments in a user’s experience where there is no content to display. These moments can be utilised as opportunities to guide users and improve the UX of an application.
Types
LUX has specific designs for 4 empty state types. In instances where an empty state should be shown on a full page, the appropriate illustration should be used in place of page content. In instances where an empty state should be shown in a smaller content container, such as a widget, the corresponding icon should be used instead.
Type | Usage | Illustration | Full page | Widget |
|---|---|---|---|---|
No results found | Use when a user’s search criteria returns no results. |  |  |  |
No <entities> defined | Use when no entities, such as forms, have been added/defined. |  | Render the LUX frame, including the VerinTop. Replace the full content area with the empty state.  | |
You’re all caught up | Use when a user has no new notifications to review. |  | Render the LUX frame, including the VerinTop. Replace the content pane area with the empty state.  | |
Waiting | Use when an action is in progress. |  | Render the LUX frame, including the VerinTop. Replace the full content area with the empty state.  |
Usage & Behaviour
General guidelines
Structure
An empty state may consist 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.
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 the content area.
Content
Empty states can be used to display a wide variety of content. For example, they can include a list without list items, or a search that returns no results. Although these states aren’t typical, they should be catered for to prevent confusion and improve the UX.
Use sentence-case capitalisation.
Use contextual, light-hearted visual content to supplement the information provided.
Use an accurate explanation that details the state the application is currently in.
Use contextual cues relevant to the user’s task to educate users on how to use the application in real time.
Where relevant, include direct links to the steps that need to be taken in the user’s workflow to accomplish a task.
Interaction
Empty states have no intrinsic interactions. For component-specific interactions see the documentation of that component.
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., text links) that help users with getting started on key tasks.
Clear, concise written explanations.
Neutral illustrations that are representative of the state, reduce stress and add aesthetic appeal to the interface.
Don’t use:
Totally empty states, this approach creates confusion for users.
Inaccurate written explanations.
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
