| 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 their workflow.
...
Types Types
LUX has specific designs for 4 different empty state types. In instances where states.
Where a single empty state
...
is displayed, use the relevant illustration.
...
Where multiple empty states
...
are shown in different content areas on the same
...
screen, use the corresponding icon(s) instead.
Type | Usage | Illustration | Icon |
|---|---|---|---|
No results found | Use when a user’s search criteria returns no results. |  |  |
No <items> defined | Use when no items have been defined, such as users in a list of users, have been definedan empty user list. |  | |
Empty notifications | Use when a user has no new notifications to review. |  | N/A |
Waiting | Use when an action is in progress. |  | Discuss with Asaf |
Usage & Behaviour
General guidelines
...
An empty state consists of:
An illustration - , which visualises and contextualises the current state of the application.Message - describes the state the application is in to the user. Should type of empty state.
A message, describing the state and recommended actions. Messages should be brief and informative.
Call-to-action button - a contextual action/UI element relevant to the user’s task. (Optional)
Text link - a contextual action/UI element relevant to the user’s taskA 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 horizontally in within the content area.
Content
Empty states can be used to display a wide variety of content. See examples above. - Carliefy
Use an accurate explanation a precise message that details explains the current state the application is currently in.
Use contextual cues relevant to the user’s task. Where relevant, include direct links to the steps that need to be taken in the user’s workflow to accomplish a taskrelated actions, such as clearing filters or adding new content.
Interaction
Empty states state illustrations and messages are mostly non-interactive, with the exception of action options such as text links and call-to-action buttons. For component-specific interactions see the documentation of that component.
See the relevant documentation for Dialog Button and Text Link interactions.
When an empty state is embedded in 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., text links) that help users with getting started on key tasks.
Clearprompts to guide the user to perform relevant actions.
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 leave a completely blank content area for an empty state. This creates confusion for users.
Inaccurate written explanations.
Irrelevant actions.
Unrelated visual content.
General
<…>use 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).
...