Key UX concepts

Empty state

Empty state is applicable to table and card view.

Display an empty state when the user hasn't created any resources or has deleted all resources.

Empty state in table

Distributions (0)

Distribution ID
Domain name
Delivery method
No distributions

You don’t have any distributions in us-east-1a.

  • Heading

    Explain what the state is.

    For example: No distributions.

  • Description - optional

    Explain why there are no resources.

    For example: You don't have any distributions in us-east-1a.

  • Action button

    Provides the next action which tells users how to move forward. This should always be a secondary button.

    For example: Create distribution.

Zero results state

Zero results state is applicable to table and card view.

Display a zero results state when the user has filtered and there are no matches.

Zero results state in cards

Distributions (200)

0 matches
No matches

We can't find a match.

  • Heading

    Explain what the state is.

    For example: No matches.

  • Description - optional

    Explain why the resource wasn’t found.

    For example: We can't find a match.

  • Action button

    Provides the next action. In this case it sets the collection view back to the default state. This should always be a secondary button.

    Follow the guideline for clear filter.

    For example: Clear filter.

Additional empty states

  • Help panel empty state

    When a user triggers the help panel from the right hand side without clicking on an info link on the page, an empty state occurs. Follow the empty state guidelines for help panel.

  • Empty value

    When the user doesn’t provide a value or the value is empty. This doesn’t include errors or a valid value of 0). Use "-" (hyphen) for any empty values. For example, in table rows or key-value pairs.

  • Empty form controls - no options available

    For empty states in form controls, follow the guidelines for: autosuggest, select, multiselect.

General guidelines

Do

  • Always provide an action. Having no recourse creates confusion and prevents users from moving forward. If no action can be provided, include a link in the description to navigate users to the page where they can complete the action.
  • If additional information is needed, provide a description.
  • Always display a resource counter to reflect the number of resources.

Don't

Writing guidelines

General writing guidelines

  • Keep labels and descriptions clear and concise.

  • Use parallel sentence structure.

  • Use sentence case for all text. Don’t use title case.

  • Use terminal punctuation (periods, exclamation points, question marks).

  • Use present-tense verbs and active voice wherever possible.

  • Don't use "please," "thank you," or Latinisms such as "e.g.," "i.e.," or "etc."

Empty state

  • Heading

    • Describe what the state is.

    • For example: No channels

  • Description

    • Explain why there are no resources.

    • For example:

      • You don't have any distributions in us-east-1a

      • You don’t have any assets in your repository. Connect to your repository and get started with a first commit

      • No tags associated to the resource

  • Action button

    • Follow the writing guidelines for buttons.

    • For example:

      • Create distribution

      • Connect to repository

      • Manage tags

Zero results state

  • Heading

    • Use this text: No matches

  • Description

    • Use this text: We can't find a match

  • Action button

    • Use this text: Clear filter

Accessibility guidelines

General accessibility guidelines

  • Follow the guidelines on alternative text and Accessible Rich Internet Applications (ARIA) regions for each component.

  • Make sure to define ARIA labels aligned with the language context of your application.

  • Don't add unnecessary markup for roles and landmarks. Follow the guidelines for each component.

  • Provide keyboard functionality to all available content in a logical and predictable order. The flow of information should make sense.

  • Make sure you define ARIA labels for the selection inputs that are aligned with the language context of your application.

Related patterns and components

The table view pattern is a collection of resources in a tabular format. It's effective for quickly identifying categories or comparing values in a large text and numerical data set.
Presents data in a two-dimensional table format, arranged in columns and rows in a rectangular form.
A collection of resources represented as cards. It’s effective for glancing at small sets of similar resources with text, numerical, and imagery data sets.
Represents a collection of resources.