Related Pages: << Links to related pages, if relevant >>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. They show the system status, and can guide users to features and actions relevant to their 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 |
|---|
Full page
Widget
Icon |
|---|
No results found | Use when a |
search |
returns no results. |
 |
 |
No |
<items> defined | Use when no |
items have been defined, such as |
an empty user list. |  |
 | |
Empty notifications | Use when a user has no new notifications to review |
Waiting
. | | ||
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. |
 |
Discuss with Asaf |
Usage &
...
Behaviour
General guidelines
...
<<use the sub-section below for description, use only those which fit the component >>
Structure
...
Structure
An empty state consists of:
An illustration, which visualises the 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
<<Where Empty states should the component be located on the screen. See example: Pagination placement and positioning>>
Default State
<<When there is more than one state for control or area. Including default values> see example: Numeric stepper default state >>
Content
<<Including labels, microcopy, number of items, order of items etc… See example: Buttons content >>
Internal Logic
<<if there is a certain mechanism that cannot be separated from the component. See example: Data tables internal logic >>
States
<<Remove non-related states or use NA to emphasize the component don’t have that state. See Text fields states >>
...
State
...
Image
...
Comment
...
Regular
...
Hover
...
Active
...
Selected
...
Selected, Hover
...
Disabled
...
Read Only
...
Error
...
Warning
...
Focused
...
Focused, Hover
...
Focused, Selected
Interaction
<<for example, how to change value – type, arrows, use slider. See example: Numeric stepper interaction>>
Validations and Errors
<<Show images for Errors and warnings. See example: Radio button validations and errors>>
Transitions
<<Where possible describe shortly and demonstrate transitions or animations of the component pattern with animated GIF>>
Best Practices
<Whenever a recommendation (not a must) is provided>>
Use:
<…>
<…>
Don’t use
<…>
<…>
General
<…>
Future Version (TBD)
< Edge cases, uncertain aspects, incomplete description>
<…>
<…>
:
replace the content that would ordinarily be shown.
be centered horizontally within the content area.
Content
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:
prompts to guide the user to perform relevant actions.
clear, concise written explanations.
Don’t:
leave a completely blank content area for an empty state. This creates confusion for users.
use links to irrelevant actions.
Accessibility Compliance
Unless otherwise specified, see our general compliance information in Fundamentals - Accessibility
Focus management
...
Text field
...
Drop-down
...
<<Images with Focus>>
...
<<Images with Focus>>
...
Tab
...
<<Description >>
...
Space
...
Enter
...
Esc
...
Arrows
<See examples in https://kanasoftware.jira.com/wiki/spaces/UserExp/pages/1924924198/Copy+of+Combo+Box+Temporary#Focus-management , https://kanasoftware.jira.com/wiki/spaces/UserExp/pages/1924759856/Copy+of+Numeric+Stepper+Temporary#Focus-management >>
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).For more information, including recommended breakpoints, see the general Responsive
Design
...
Responsive Guidelines
< Guidelines for the responsive behavior of the pattern or component, down to tablet (960px) width >
Focus Regions
1st level regions
<<Image>>
...
1st level
...
2nd level
...
3rd level
...
Zeplin link | Screen thumbnail |
|---|---|
...
...
Design
...
Zeplin link
...
Screen thumbnail
...
<<Short Zeplin link. You
Use this >>
...
<<Screen with 200 width>>
Code
...
Code
...