Empty states

Empty states

Empty states in containers and grids make it clear to the user that there is no content in them (versus a problem with loading the content).

Empty state layout example

Styling

Simple

If the user needs to perform an action once and once only, then no additional action button is needed besides the call-to-action button.

A simple empty state with a call to action

Complex

If the user will be iterating or editing then the same action can be repeated in the header on containers, and below in lists and grids. If need, a concise explanation can be added to guide the user through the process.

A simple empty state with a call to action and extra information

Small

If vertical space is at a premium, everything but the “no data” notification can be eliminated. “No data” should appear on the far left. Do not combine this method with the full-view on one screen or in one process.

An extra small empty state

Usage

  • Use a descriptive label that tells the user what they’re doing (”Add data” is good, “Add” is not).
  • Customize the icon to better reflect the contents of your application or the object being created.
  • Give the user indication of what they need to do in order to see data.

Last updated: Jul 2018

Choosing the right style

If the user needs to perform an action once and once only, then no additional action button is needed besides the call-to-action button.

One-time-action example

If the user will be iterating or editing then the same action can be repeated in the header on containers, and below in lists and grids.

Multiple-action example

If the user can’t solve the problem, then show no action, but add a concise explanation.

No action example

Text should not exceed 300px in width, and should be no more than three total lines.

Max width example

If vertical space is at a premium, everything but the “no data” notification can be eliminated. “No data” should appear on the far left. Do not combine this method with the full-view on one screen or in one process.

Space-saving example

Last updated: May 2017

Do's and Don'ts for empty states

  • Don't align the full empty state message to the left or right. It should always be centered.
  • Don't use different labels on action buttons when in an empty state.
  • Do use a descriptive label that tells the user what they’re doing (”Add data” is good, “Add” is not).
  • Do customize the icon to better reflect the contents of your application.
  • Do give the user indication of what they need to do in order to see data.

Do don't example 1 Do example 2

Last updated: May 2017

Next: Common actions