Empty States
What is an empty state?
An empty state is an opportunity to guide our users through the in-between moments. It lets users know what is possible while indicating that the empty space is intentional.
A useful empty state will inform our users of three things:
- What’s happening
- What content will show here
- What actions occur to make content appear here
Where Empty States are Used
The most common place for an empty state is in a table or data grid. It lets users know something can or will appear here. You also might include an empty state in an area where cards will show, but is currently empty.
Empty State Anatomy
Our empty states are composed of:
Image (optional)
- The image is optional and, if present, appears above the text.
Empty State Title
- Purpose: Inform users what can appear here
- Grammar: Sentence case with no period at the end
-
Style: H3
Note: The title should be styled like a
<h3>element, but the actual heading level will be determined based on location in page. - For consistency, we recommend following one of these sentence structure styles:
-
You don’t have any [insert items] yet
Example: “You don’t have any attendee groups yet”
When to use: When action is required by the user, and once taken, it’s not likely to be empty again -
There are no [insert items] at this time
Example: “There are no alerts at this time”
When to use: When there is no action required by the user to fill the state, or the action that is required is a recurring one -
No results were found after a search or filter action was performed
Example: “No results were found”
When to use: When an empty state comes back as result of a search
-
Empty State Action
Purpose: Help users take action, or inform them of what event occurs (an outside or system action) causing items to appear in the content area
The action line can be a call to action button or a text description
Button
- Use the muted button style
Descriptive Text
- Grammar should follow sentence case with a period at the end
- Style: Body text
- For consistency, we recommend following one of these sentence structure styles:
-
[insert verb or verb phrase] to [insert result].
Example: ‘Click “Add Credit Card Program” to add one.’
When to use: When action is required by the user to fill the state -
When [insert action], it will appear here.
Example: “When someone sends you an e-mail, it will appear here.”
When to use: When there is no action required by the user to fill the state -
Adjust your search to view new results.
When to use: When an empty state comes back as result of a search
Hint: This will pair with title “No results were found”
-
Examples
Example Using an Image
Example Using Only Text
Example Using Descriptive Text Instead of a Button
Localization
IMPORTANT: When communicating with development teams, ensure the whole string is translated. Do not use dynamic strings. For more information, please see Composite Strings & Variables.
Additional Support
Small adjustments to the structures provided above are acceptable to ensure proper flow and grammar. If the structures provided do not work with the empty state you are writing, please create a story in Jira (Project: Product Translation UILOC, Component: Source Copy) to have copy created.