Empty states

Empty states are a simple yet extremely powerful way to keep a user informed, supported, and on a productive path. They provide opportunities to communicate what the user would see if they had data, while providing constructive guidance about next steps.

With just enough contextual guidance, empty states ensure a smoothness of experience, especially when things aren’t working as expected.

Most people are familiar with the basic empty state page that explains what data would normally appear on a page. However, it’s not always a one size fits all.

This pattern explores the following approaches:

Empty states are often treated as an afterthought. When designed thoughtfully, they become an essential part of a smooth user experience, providing just enough information, in context, to allow users to continue working in a productive way.

During the design process, ask yourself these questions:

During the design phase, explore the full range of options with your team to ensure that the most appropriate and helpful content is created for each empty space.

Empty states happen for a variety of reasons, and can require different treatments.

Strive for a balance between the situation and the content you’re providing. More content doesn’t necessarily mean it’s a better solution as there is a cognitive cost for having more content on the page. This is especially true when users first engage with your product, so save the more involved educational moments for primary features and more complex situations.

The following table suggests different approaches for empty states to match the needs of the user in different situations.

Empty states always appear in the otherwise empty space, in the context of the data that’s missing. They can occur anywhere your app can display data, including but not limited to dashboards, data tables, tiles, full pages, and side panels.

The approach and layout you choose will depend on the situation, and what is the most appropriate based on the page layout and context.

For small tiles and side panels, follow these guidelines and use the layouts shown below.

Empty state elements should be left-aligned as a block. The one exception to this rule is an empty state in a small tile. In this case the image should be centered above the left-aligned text and primary action, as shown in the example below. This exception was made to prevent the empty state looking too much like content, where it could be skipped over. The centered image in a smaller space helps to draw attention to a state that may require user action.

In situations where there could be multiple empty states showing at once, we recommend using a tertiary button for the call to action. This avoids scenarios with multiple primary action buttons in the UI.

For larger spaces, you have some flexibility with laying out the larger empty states. Follow these guidelines, review the examples, and use your judgment as to what is best for the situation.

Empty state elements should be left-aligned as a block. Depending on the image you’re using, there are different arrangements available.

You have two options for positioning the block in the larger empty states:

You have two options for positioning the image in the larger empty states:

These are the most recognizable first use empty states, explaining what will be in the space once it is populated with data, and providing guidance for the next step the user can take to populate the space.

These empty states occur as a result of a user action. For example:

Explain the reason for seeing the message and providing any follow up steps to guide the user. For example, if there are no search results suggest adjusting the search or filters. Links to documentation may also be appropriate as a secondary call to action.

There may be situations where next steps are not possible or supplementary text is not required, so use your judgment about what is useful to include. For example, if your user has configured alerts and nothing has been triggered, it’s not a case of alerts not being set up but that there is nothing that requires the user’s attention. In this case, supplementary text is not necessary.

Empty states can also occur when there is data but it cannot be surfaced for some reason. A higher level of specificity is helpful here, with the aim that the user will be able to address the issue comfortably themselves.

Provide guidance about why there is no data, and either what the user can do to address the lack of data, or the circumstances under which the data would appear. And use plain language. Following this fulfills Jakob Nielsen’s ninth usability heuristic: Help users recognize, diagnose, and recover from errors.

Here are some error management situations that may be addressed with the basic empty state solution.

For more detailed information about writing error messages, see the Nielsen Norman group’s Error Message Guidelines.

A pattern providing guidance for error states is currently being planned. If you would like to contribute, please see our guidelines for contributions.

Educational content that helps users get oriented and started is another option for turning an otherwise empty space into a positive and productive experience for first time users.

When deciding on approaches, a good rule of thumb is that a primary resource on a page could benefit from a more educational approach, while basic empty states may suffice for secondary resources.

In-line documentation is an extension of the basic empty state for first time use. It can be most helpful when a primary feature is first introduced, providing more detail and highlighting any benefits. Including an image of the space populated with data may help trigger interest and usage. Following a progressive disclosure model, it could provide links out to more detailed documentation.

Onboarding services provide various options for contextual in-app guidance that can enhance or direct a user through an empty state.

Stepping users through workflows with information that supplements the empty state messages can get the user to a place of comfort quickly. Tours can point out the location of features, provide more detail for key tasks, and highlight benefits. Because onboarding flows are optional for users, they need to be used in conjunction with basic empty states.

A pattern providing guidance for onboarding is currently being planned. It will include a framework for matching user needs with design solutions, tips for writing copy, and general best practices. If you would like to contribute, please see our guidelines for contributions.

Another strategy for addressing an otherwise empty space is to provide pre-built content that allows new users to get started with an app quickly and without any concern.

Starter content can provide the opportunity for users to dive in and learn about primary features and functions with sample data. Users can tinker, examining and deleting content without serious consequences. If it’s possible to include some personalization here, that adds to the positive experience.

Other options for starter content are pre-configured kits and workflows. Pre-configured kits containing code and API credentials can offer a fast path to getting started.

Starter content can also take the form of pre-configured workflows, where the configuration of services is automated, saving users from the tedium of a long setup process.

As most empty state illustrations are considered decorative, they should be skipped by screen readers.

A decorative image is one that does not serve any practical or informational purpose, and is included to fill a visual void. Do not include any informational content in your decorative image.

Web Content Accessibility Guidelines require that decorative images are given either an empty alt tag or their role is assigned presentation. As an empty alt tag is more widely supported, we recommend you align with the WCAG guidance and avoid assigning role to presentation until support is more ubiquitous.

Help us improve this pattern by providing feedback, asking questions, and leaving any other comments on GitHub.