Related Pages: << Links to related pages, if relevant >>Related Pages:
| Table of Contents |
|---|
Description
...
Usage & Behaviour
General guidelines
<<use the sub-section below for description, use only those which fit the component >>
Structure
An empty state consists may consist of:
are comprised of the relevant illustration and the corresponding subtext related to that state.
...
An illustration - a visual that relates to the current state.
Subtext - a brief, informative message to communicate 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.
Placement and Positioning
...
Empty states should
...
be centered vertically and horizontally on full pages and in instances where the empty state must be shown in a container or pane.
In instances where empty states must be displayed inside a container or pane, the empty state should be centered vertically and horizontally.
Empty states should be positioned contextually to the relevant content.
Content
<<Including labels, microcopy, number of items, order of items etc… See example: Buttons content >>
Validations and Errors
<<Show images for Errors and warnings. See example: Radio button validations and errors>>
Best Practices
<Whenever a recommendation (not a must) is provided>>
Use:
<…>
<…>
Don’t use
<…>
<…>
General
<…>
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 guidelines.
Responsive Guidelines
< Guidelines for the responsive behavior of the pattern or component, down to tablet (960px) width >
Design
Zeplin link | Screen thumbnail |
|---|---|
<<Short Zeplin link. You | <<Screen with 200 width>> |
Code
<<a box containing the code - when there is no code to present use the Coming Soon GIF>>
...