Existing Empty States Messages

Error codes dictionary

When to use

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.

Basic empty states

Where to use

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.

Types of empty states

No data 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.

Ron Oemus please add an example screen here. Please use this as an example: https://www.carbondesignsystem.com/patterns/empty-states-pattern/#no-data-empty-states 

Do:

• Use basic empty states for simpler situations, or secondary features, where bite-sized pieces of information are preferable.
• Be specific about what will be available in the space when data is there.
• Keep words to a minimum so they are fast to read and act upon.
• If there is an actionable next step, include a direct link in your message copy or a primary action button to make that action fast. Alternatively, guide them to what they need to click.

Don’t:

• Don’t cover multiple options in one empty state. If there are multiple things a user can do, pick the most important and keep the focus on that action.
• Don’t use product-specific terms that the user may not yet understand.
• Don’t include content that is about other areas of the app. Be contextual.
• As a general rule, don’t lead the user into a dead end. If there are useful next steps, include them.

Error management empty states

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.

Error messages should be expressed in plain language (no codes), precisely indicate the problem, and constructively suggest a solution.

- 10 Usability Heuristics for User Interface Design, Jakob Nielsen

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

Do:

• Consult with your team to explore what information is available.
• If there are corrective actions, give the user an actionable next step. Include a direct link in your message copy or a primary action button to make the next action fast. Alternatively, guide them to the element they need to click.
• Use direct, plain language to describe the situation.
• Be respectful of the user and don’t joke or use flippant language.
• Any images used should reflect the situation and be sensitive to what could be a serious situation.

Don’t:

• Don’t include content that is about other areas of the app. Be contextual.
• Don’t lead the user into a dead end. Always aim to provide a path to a solution.
• If there are multiple things for the user to try, be sure to include a hierarchy so that it’s clear which option would be the primary action.