Empty State

Empty states are shown when there is no data and typically describes what someone can do next. They’re also commonly referred to as zero states.

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
EmptyState-Example-NotActionable

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.)
EmptyState-Example-Actionable

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.

EmptyState-Example-Table

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
EmptyState-Example-NoResults

No results (page doesn’t include filters)

  • Title: No results for {{search term}}
  • Subtitle: Please try searching for a different name
  • No CTA
EmptyState-Example-NoResults2

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

EmptyState-Example-Error-Internet

Server error

EmptyState-Example-Error-Server

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
EmptyState-Example-Success

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.

EmptyState-Example-Illustration-2

Icon

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

EmptyState-Example-Icon

Empty state or loading state

Empty state

A static state that only changes from user interaction

EmptyState-Example-Empty

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.

EmptyState-Example-Loading

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.

EmptyState-Example-Empty2

 

Resources

(internal only)

Enhancements