Empty states

When crafted intentionally with best practices in mind, empty states encourage engagement, improve learnability, and deliver essential feedback.

    Identify your use case

  • When designing an empty state, start by understanding why there's nothing to display.
  • Someone might have just installed the app and not interacted with it yet.
  • A feature—new or existing—may require an action from the user side.
  • There could be nothing to display and no action to take.
  • The search wasn't successful, or nothing matched the filters.
  • There might be no connection, the page wasn't found, or the access is limited.

    App or feature first use

  • Heading tip: think of what there will be instead of what's missing.
  • Use the description to educate, motivate, and guide people to the next steps.
  • When someone starts using an app, it's an organic opportunity to foster interaction.
  • Unlike guided tours, empty states appear in context and don't interrupt user flow.
  • You can use them to reduce time to value and improve the system's learnability.
  • Don't repeat your heading in the description. That's wasted space.
  • Don't try to cover everything. Aim to limit your description to 2 lines.
An example of an empty state for the first time someone uses a feature or app.

Saying Add your first [what] is an easy yet effective way to encourage action. The description outlines the benefits, and the call to action clearly matches the heading.


An example of an empty state for the first time someone uses a feature or app.

To help people grasp the value right away, you might want to bring it to the heading. This clarifies the purpose and enhances engagement.


An example of an empty state for the first time someone uses a feature or app.

This heading clearly outlines the action to take, allowing the description to address the system's temporary constraints and improve the feature's learnability.


    There's nothing here, but there will be

  • Sometimes there's nothing to display and viewers can't take any action.
  • Keep headings informative and emphasize that the state they describe is temporary.
  • Use the description to educate people further or highlight the benefit.
  • Don't add external links just to fill space. Include them only if they bring value.
An example of an empty state that indicates the user needs to wait for an action to complete before content appears.

Adding yet at the end of the heading indicates a temporary state. The description explains what needs to happen first, and the link offers relevant resources.


An example of an empty state that indicates the user needs to wait for an action to complete before content appears.

This heading focuses on the feature's value, while the description educates first-time users about what to expect and how to leverage it effectively.


    No results found

  • When the search or filters return no results, provide immediate, clear feedback.
  • Start by clearly and concisely communicating the outcome.
  • Then, offer a helpful tip, such as trying a different keyword or adjusting the filters.
  • Sounds too general? Consider other options, like pointing to advanced search.
  • Those empty states are highly contextual and often appear inline. Don't overlook them.
An example of an empty state is when no tasks match the filters.

This type of empty state is responsible for providing feedback to the user. Ensure they understand what happened and provide helpful tips.


An example of an empty state when the search returns no results.

An empty state doesn't always have to take up the entire screen. Contextual help makes it easier to apply feedback and remember how the system works.


    Errors that appear as empty states

  • It might happen that things don't go as expected, and people can't access the app.
  • These issues often relate to a lack of connection, permissions, or removed content.
  • Design those empty states to offer guidance and provide a way out.
  • For the heading, summarize what happened—and never blame the user.
    “Insufficient permissions” or “We couldn't find this page” will work.
  • When the user needs to take action, aim to start with it. For example:
    “Enable your cookies,” “Upgrade to the new version,” or “Check your connection.”
  • Use the description to explain any necessary details or next steps.
  • You might want to add some warmth if the problem is on the system's side.
An example of an empty state when the user lacks permission.

The heading doesn't refer to the user directly, making it friendlier. Including a helpful feature like a permission helper enhances the overall usability.


An example of an empty state when the user has cookies disabled.

When people quickly scan this empty state, they immediately know what to do.
They can also easily find additional information if needed.


An example of an empty state when the connection couldn't be established.

This empty state takes responsibility for the system issue, which helps build trust.
A few extra words of explanation reassure people that it's not their fault.


Share your feedback on the #design-systems channel in Slack.