Empty states

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


Content

Empty states can 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.

Displaying an empty state

The most basic empty state consists of a non-interactive image and a text tagline. Use an image that: Include a tagline that:

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

Use an image that:

  • Has a neutral or humorous tone
  • Is consistent with your brand

Include a tagline that:

  • Has a helpful message
  • Is consistent with your brand
  • Conveys the purpose of the screen, without appearing actionable
DoIf it aligns with your brand, you can use a humorous image and tagline that conveys the purpose of the screen, without appearing actionable.
Don'tDon’t use a tagline worded like a call to action, as empty tags aren’t interactive and don’t respond when tapped. Images that express urgency or confusion should also be avoided.

Alternatives

Starter content

To help users new to an app or section, screens which would otherwise be empty can be populated with starter content. Starter content allows users to begin using an app right away, making it easier for them to learn about what an app has to offer.

Recommendations:

  • Starter content is best for apps that store content (such as books or music), or create templated content (such as notes or documents).
  • Use content that has broad appeal and demonstrates primary features.
  • Give users the ability to delete and replace starter content.
  • If possible, provide content that's personalized.
A reading app might provide all users with a few free popular books to immediately start exploring the app.

Educational content

If the purpose of the screen isn't easily conveyed through an image and tagline, consider showing educational content instead. Educational content helps users understand what an app will be able to do once it has content.

Recommendations:

  • Make it possible to dismiss or skip this content.
  • Keep it brief.
  • Keep content contextual to the screen. This should not be a place to onboard the user to the entire app.
The user has no movies yet, but instead of showing an empty state, a dismissable card explains the features and benefits of the service.

Best Match

If nothing exactly matches a user's query, content that contains the best match to the query can be displayed, by returning results for a query spelled slightly differently. By showing these results, the user may find what they're looking for.

A best query match
A heading identifies the content as best match results.

Up next