Empty State

Empty states tell users that there’s no content to display—and what they can do next.

Also known as:
Zero StateEmpty wellStarter contentEducational content

AnchorNeed to know

  • Empty states communicate the current state, allowing users to feel in control of the system, take appropriate actions to reach their goal, and ultimately trust the brand.
  • Without an empty state, people are confused about what to do next.

Visuals

UI Kit

Options

  • Mood:
    • Positive
    • Informative
    • Action
    • Neutral
    • Negative

To keep in mind

  • There are different Empty States including:

    • Positive empty state: nothing is here because everything is working/you’ve completed all tasks.
    • Informative empty state: things are happening and there are things to be done, but no direct action required.
    • Action empty state: there is an action the user can take right now.
    • Neutral empty state: there is nothing to show and no user action to take.
    • Negative empty state:
      • when we couldn’t find anything, such as a search (or filter) that returns no results.
      • to fill the space when a system error results in no page content and there is no other content on the page. If there is other content on the page consider using an inline notification instead.
  • They also come in three different sizes to accommodate responsive page layouts:

    • Large: For viewports or containers larger than 1080px.
    • Medium: For viewports or containers between 375px and 767px.
    • Small: For viewports or containers up to 375px.
  • Call To Actions (CTAs):

    • We use Default Buttons unless it is the only action on the page, then we use Primary Action Buttons (label + icon).
    • If no action is appropriate, don’t show a button. Instead, you might include hyperlinks in the body copy as needed.
  • Illustrations:

    • Each type of empty state comes with a standard animated illustration. Do not mix and match.

Copy guidelines

Empty states are a great way to engage and educate users. It’s a chance for our brand voice to shine through, but make sure to always prioritize clarity and action over joyful language and humor. Here are some rules to keep in mind:

Include an informative title

Make sure your title is scannable. A user should be able to take away the main point of the empty state simply by reading the title. Your title should describe the empty state and not tell the user what to do (leave the action for the CTA button). Avoid phrases like “Oops!” Or “Looks like something went wrong…” Instead, describe exactly what has happened. Remember to keep it short and snappy. Any supplementary information can be included in the body copy under it.

Do:
  • Do
    No reports found
  • Do
    Survey in progress
Don't:
  • Don't
    Oops! There are no reports!
  • Don't
    There’s nothing to see here

Guide towards the next step

Never leave the user hanging. Always make sure you guide the user towards taking the next step. If there’s nothing for the user to do, suggest that they explore something else in the platform. If they’ve encountered an error, give them suggestions on how to fix that error or give them a link to contact our support team.

Do:
  • Do
    Reports couldn’t be loaded.
    Try refreshing this page, or [contact support] for help.
  • Do
    This survey is currently collecting responses
    Once the survey is closed, you’ll see the results on this page.
    [Go back]
Don't:
  • Don't
    Oh no! We couldn’t load your reports.
    Please try again later
  • Don't
    There’s nothing to see here
    The survey is open. We don’t have any information to show you right now.

Give it a complementary Call-To-Action (CTA) button

Your CTA button should compliment the title of the empty state. If a user scans the title, the CTA button should clearly direct them towards an action.

Do:
  • Do
    [Choose focus area]
  • Do
    [Explore other reports]
Don't:
  • Don't
    [Go to reports]
  • Don't
    [Cancel]

Convey the right message

Based on the overall user flow and the nature of the empty state, make sure you adjust your tone accordingly. A positive empty state should contain encouraging language, while an action empty state should get to the point quickly. Here are some helpful tips for each type of empty state:

  • Positive empty state - Include words of affirmation here. If a user has nothing left to do after this point, let them know that. Be careful though, as this type of language can sometimes come off as condescending.
  • Informative empty state - Reassure the user that work is being done in the background and that we’ll notify them when there’s data on that page for them to see or action. This is not to be used to replace existing data that is in the process of being updated. This is an opportunity to inform.
  • Action empty state - Let the user know that in order for them to see any data here, they’re going to need to perform certain actions. Guide them towards that action clearly and include a CTA button that takes them directly towards completing that action.
  • Neutral empty state - Let the user know that nothing is required of them. Guide them back to where they were before they encountered this empty state.
  • Negative empty state - Clearly let the user know what has happened and how they can fix it (if they want). If the empty state keeps showing up, give them an option to contact support. For example, if a filter returns no results, suggest the user try a different filter. If describing an error, remember to avoid jargon and tech speak.

Write in sentence case with minimal punctuation

All empty state copy should be in sentence case i.e. the first letter of the first word is capitalized and everything else is in lower case unless it’s a proper noun or feature name. Always err on the side of minimal punctuation, so leave out full stops and commas where possible.

When to use and when not to use

When to use
  • Use empty states when you don’t have anything else to show within a section (defined by a Heading 2) of a page.
  • Inline notification can be used if there is other content on the page and you want something visually lighter or more ephemeral.
  • You might use a negative empty state for an intentionally negative state where the system is operating correctly and the user has provided accurate information (such as search/filter with no matching results).
When not to use
  • Don’t use empty states to provide feedback about a change in state or context that the user needs to be notified about during a task.
  • When there are multiple sections on a page that can be empty, consider using inline notifications rather than having more than one empty state.

See also

  • When there’s complex content or behaviour, use a well instead. For example, showing deleted content with undo.
  • When there’s content on the page but you need to inform the user, use an inline notification instead.
  • When there’s a change in state or context you need to inform the user about, use an inline notification instead.
  • When something negative has happened because the system failed or is a direct result of the user providing bad input, use an error notification instead.
  • Hero data pattern.

External links

Here are some examples of other existing design systems: