Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

Table of Contents

...

Type

Usage

Illustration

Full page

Widget

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.

...

xUsage & Behaviour

General guidelines

Structure

An empty state may consist of:

  • An illustration - which visualises and contextualises the current state of the application.

  • Subtext - a brief, informative message which describes 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.

...

  • 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

...