Overview
Opportunities
- Communicate system status
- Increase learnability of the system
- Deliver direct pathways for key tasks
- Express brand personality
Where and when they appear
- Where: they can appear in pages, panels and tables
- When: common when software is not fully configured and when commands product no outcome (ex: no search results)
Types
No data + First time use (FTU)
When the user has no pending items to review, either because none were submitted, because they were user cleared, or because it’s a first time use.
Copy guidelines
- Clearly state what usually appears in this space in the title
- If it’s just user cleared or if it means no pending tasks to review, celebrate the accomplished task or lack of work to be done
- If it’s first-time use, explain what users will typically see here and how they can add it. Often requires a CTA (is actionable).
- Good opportunity for brand personality
Not actionable
When there’s no need for a “next step.”
- Title: Clearly state what’s not appearing here, e.g.: “No [item]”
- Subtitle: Additional explanations if relevant or just to add empathy/design for emotion

Actionable
When a “next step” prompt makes sense.
- Title: Clearly state what’s not appearing here, e.g.: “No [item]”
- Give instructions on how to add it
- Add a CTA to help them add it, always using the same name for the thing (time card, breaks, schedule, etc.)

Table
When no data is available to populate a list item, use a double EN dash “--” instead of "N/A" or a blank. This applies to content in column data or in data pairs.

No results
When the user’s actions result in no data
Copy guidelines
- Explain what happened
- Give next steps on what to do (try a different word, clear filters, etc.)
- Avoid having the title and subtitle say the same thing (Title: No results / subtitle: We couldn’t find results for...)
- Follow below examples for copy depending on whether the section has filters or not, regardless if they’re being used by the user.
No results (page includes filters)
- Title: No results
- Subtitle: Please try searching for a different name or adjusting your filters.
- CTA: Clear filters

No results (page doesn’t include filters)
- Title: No results for {{search term}}
- Subtitle: Please try searching for a different name
- No CTA

System status
Showing an empty state helps the user to understand what to do next. If there was no system feedback provided, the user cannot know whether there truly are no details to display, whether an error has occurred, or whether the system is still processing the request. This is a feedback failure trap.
Errors
When an operation fails.
Copy guidelines
- Clearly explain the error that happened
- Give directions on how to fix it
- Add a CTA to help them fix it, like reloading the page, or if no clear way to fix it, add a CTA to go back to the previous page/home.
- Only apologize if we’ve actually made a mistake. If we haven’t focus on how we can help them to fix the issue, not on apologizing.
- Be careful to not sound out of touch or unhelpful (i.e. “Boo, we couldn’t run payroll 😠”). Avoid emojis.
Internet connectivity

Server error

Success
When an operation is successful. It’s a good opportunity to add delight and brand personality.
Copy guidelines
- Clearly state the task that was just accomplished (i.e. “You’ve added John Smith”)
- Primary CTA is often “Got it”
- Good opportunity for brand personality
- Could have a secondary CTA to review what was just done

Best practices
Title
- Title default size can be adjust based on typography hierarchy. For example, if the empty state occurs at the 4th level on the page, feel free to swap the default H4 with H3.
- Do not exceed one line of content. The title should be concise and scannable, ex “No results”
Descriptions
- Useful, relevant additional information (if not, do not show “descriptions”)
- Non-critical information (as users typically scan or skip this area)
- Do not exceed two lines of copy. This information should be concise and scannable.
Illustration or icon
Depending on the number of empty states in an experience, supporting visual elements can be in a form of an icon (48x48px) from Fontawesome or an illustration (120x120px) from our brand Illustration library (update coming soon.)
Illustration
Use when there could be only one empty state an the experience.

Icon
Use when there could be multiple empty states in an experience.

Empty state or loading state
Empty state
A static state that only changes from user interaction

Loading state
A transitional state that last for a few moments while data is loading from the back-end. If the content is an image and fails to load, the back-end will display alt text.

Empty state or upsell
Empty state
Occurs in relation to free or paid-for features. It is instructional and often actionable. The user has instant access to the feature.

Resources
(internal only)