What are empty states?
Empty states are moments when there is no information to show. Empty states happen in different scenarios. For example, people will see them when:
- They’ve never interacted with or are not currently interacting with a feature (for example, they have not saved any bookmarks)
- They’ve removed or cleared the content that used to be there
- There’s simply no data or information to display
Not all empty states are created equal. As with everything, context matters.
- Onboarding and education: Sometimes, empty states can be used to educate people about surfaces and features. When used in this way, they may reinforce or repeat what someone may see in other messaging elements, such as onboarding flows or feature tours. And this repetition is okay. Because empty states are not dismissable, they have a higher chance of reaching users.
- Encouraging interaction: When it makes sense, use empty states to guide people—let them know what they can do to get started or add content.
-
Reporting on reality when there’s nothing to show: Sometimes, empty states can have a simple job of telling people the empty view they’re seeing is accurate, expected, and okay (not an error).
When used for onboarding, education, or encouraging interaction, empty states can be an opportunity to express our brand personality, with more emotive copy and visuals.
Anatomy of an empty state
An empty state can optionally include these elements: title, body copy, action, and illustration. Include what is necessary for the context and appropriate for the space. Empty states for an entire page will likely include all elements. Empty states that exist as part of a page alongside other content will likely include fewer elements (for example, just a single string).
Example of empty states that include all 4 parts: illustration, title, body copy, action.
Example of an empty state that includes one part: body copy and illustration only.
Writing guidelines
Titles
These general writing rules for titles also apply to titles in empty states:
- Be concise.
- Use sentence case (except on iOS, which uses title case)
- No end punctuation, unless it’s a question.
In some contexts empty states may be used to educate people about surfaces and features. When an empty state is taking on an educational and onboarding role:
- Focus the language on what is possible and the benefits
- Avoid “No” or negative phrases
Body copy
- Avoid repeating information from the title.
- Keep messages to 1 or 2 sentences.
- Optional, based on context: Include the reason for the empty state and where the person can go next. Keep in mind: sometimes there may not be anything for them to do.
- When linking to other content, like a support article, try to summarize or hint at the additional info that will be available. (Minimize “cold” linking, i.e., linking with minimal context.)
Action
- Use a primary button if there’s an important action for the person to take.
- Lead with a strong verb that encourages action, such as “Try”, “Remove”, or “Create”. To provide enough context, also include a noun.
- Consider a secondary action to dismiss or cancel the suggested action.
These general writing rules for actions also apply to actions in empty states:
- Be clear and predictable.
- Be concise. Avoid unnecessary words and articles such as the, an, or a.