Skip to content

Empty states

Empty states are essential elements in user interface design that appear when a screen lacks content. They provide clarity about why the space is empty and guide users on what to do next. Instead of leaving users confused, effective empty states reassure them that everything is functioning properly and encourage exploration of features.

By combining clear messaging with engaging visuals, empty states enhance usability and create a positive experience, turning potential frustration into an opportunity for interaction.

Principles

Clarity: Empty states use simple, direct language to communicate why the state is empty.

Actionability: They include actionable options or suggestions for what users can do to fill the empty state or to take them back to a “safe place”.

Consistency: Empty state designs are aligned with the overall aesthetic of the application to ensure a cohesive experience.

When to use

You should use empty states in the following situations:

  • When a user accesses a feature or section without any existing content.
  • When user-selected filters yield no results.
  • During onboarding, to guide users through the initial setup or encourage them to add their first items.
  • When a user has completed all tasks or actions, signaling that there’s nothing left to do.
  • When content is being loaded or processed, and you want to provide a placeholder that informs users while they wait.
  • To motivate users to take action, like adding content or exploring features they might not have considered.

Types

There are several types of empty states, such as informative, actionable, exploratory and progressive. Each type plays a unique role in enhancing user experience, providing clarity, and encouraging engagement.

Informative

These states focus on providing users with clear information about why the area is empty. They often include messages that explain the situation, such as “You have no messages yet” or “No results found”. The aim is to reassure users that the absence of content is expected.

Actionable

Actionable empty states not only inform users but also encourage them to take specific actions. They provide clear calls to action that guide users toward meaningful engagement.

Exploratory

Exploratory empty states encourage users to discover other features of the application. They may include links or suggestions for related areas to explore, like "Check out our tutorial section" or "Browse popular categories." This helps users feel connected to the broader experience even when one area is empty.

Progressive

These states evolve based on user actions or behaviors. For instance, as users complete tasks or engage more with the application, the empty state can change to reflect progress, such as "You're almost there! Just one more step to complete your profile." This type reinforces a sense of achievement and encourages continued interaction.

Design Guidelines

Anatomy

  1. Container
  2. Image (optional)
  3. Tagline
  4. Description
  5. Action button (optional)

Image

Images, as optional as they are, are a huge improvement to empty states; specially when you need to grab the user’s attention to the empty section of the screen so they know what happened. Incorporate visuals or illustrations that reinforce the message, making the experience feel less barren and more engaging.

Use an image that:

  • Has a neutral or humorous tone (the last one depending on your audience)
  • Is consistent with your brand

The generated image MUST use the primary color defined for the application. Do not use other colors unless they are approved by the CWO.

Avoid using images that express urgency or confusion.

Empty tables can include an image to grab attention and to emphasize the tagline message.

Tagline

The tagline, or title, represents the main idea and is one of the most important aspects of the empty state.

Taglines should:

  • Have a helpful message
  • Convey the purpose of the screen, without appearing actionable

Avoid using taglines that could get confused with any clickable interface element.

Description

A description should be present if the empty state needs to give more context on what to do next or what is happening. Sometimes, a description is used when the tagline includes a short phrase to catch the attention or if it only presents itself as an introduction to a more complex situation.

Action button

An action button in an empty state page prompts users to interact with our product. It guides users on what to do next, reducing confusion. Examples include buttons like "Shop Now" in e-commerce or "Start a New Project" in a project management app. Overall, these buttons are vital for driving interaction and improving user experience.

Specs

To get more examples of illustrations that can be used for these purposes, check the StorySet repository made by Freepik to generate one with the tone you are looking for.

Only empty states for tables can use images in grayscale.