Related Pages: << Links to related pages, if relevant >>

Description

Empty states are moments in a user’s experience where there is no content to display.

Types

LUX has specific designs for 4 empty state types. In full page empty state instances, the appropriate illustration should be used. In instances where an empty state must be shown within a widget, the corresponding icon should be used in place of the relevant illustration.

Type	Usage	Illustration	Full page	Widget	Icon?
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.
You’re all caught up	Use when a user has no new notifications to review.
Waiting	When an action is in progress.

Usage & Behavior

General guidelines

<<use the sub-section below for description, use only those which fit the component >>

Structure

<<Describe the different parts that structure the component. See example: Numeric stepper structure >>

Placement and Positioning

<<Where 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

Use:

<…>
<…>

Don’t use

<…>
<…>

General

<…>

Future Version (TBD)

< Edge cases, uncertain aspects, incomplete description>

<…>
<…>

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

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 guidelines.

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

Design

Zeplin link	Screen thumbnail
<<Short Zeplin link. You Use this >>	<<Screen with 200 width>>

Code

<<a box containing the code - when there is no code to present use the Coming Soon GIF>>

Copy of Empty States