| Table of Contents |
|---|
...
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. |  | 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.  |
...
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 designed to prevent confusion.
Use sentence-case capitalisation.
Use contextual, light-hearted illustrations visual content to supplement the information and add aesthetic appeal to the interfaceprovided.
Use an accurate explanation that details the current state the application is 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/populate the screen.
...
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., links) that help a user to accomplish their task.
Clear, concise written explanations.
Visual content Neutral illustrations that is 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
...