Skip to content

Empty-States

Empty states occur when an item’s content can’t be shown.

  • A list that doesn’t contain any items, or a search that doesn’t display any results, are examples of empty states.
  • These states aren’t typical, they should be designed to prevent user confusion.

Alternatives to empty states

  1. Starter content
  2. Educational content
  3. Best match

Content for empty states

  1. Text tagline
  2. Non-interactive image

Displaying empty states

The most basic empty state displays a non-interactive image and a text tagline.

Use an image that:

  • Is subtle and neutral with respect to the background.
  • Conveys the purpose and potential of the app in a lively way, such as your app's icon

Include a tagline that:

  • Has a positive tone.
  • Is consistent with your brand.
  • Conveys the purpose of the app without appearing to be actionable.

Avoiding completely empty states

There are several situations in which you can provide users with alternatives to truly empty states.

Starter content :

  • provide starter content that will allow users to explore your app right away.
    1. Use content that has broad appeal and demonstrates primary features.
    2. Give users the ability to delete and replace this content.
    3. If possible, provide content that's personalized.

Educational content :

  • If the purpose of the screen isn't easily conveyed through an image and a tagline, consider showing educational content instead.
    1. Help users understand what they'll be able to do on this screen once it has content.
    2. Make it possible to dismiss or skip this content.
    3. Keep it brief.

Best Match :

If nothing exactly matches the user's query, are there any results for a query spelled slightly differently? If so, then show the results, as they may help a user find what they're after. With this approach, clearly convey in a heading above the results that this content shouldn't be mistaken for a match to actual query results.