How to use empty states to your advantage

Profile picture of Jeremiah Lam




Illustrations by {name}

Often overlooked, empty states in an interface provide us with an opportunity to create more meaningful experiences and add value.

8 min read

404 empty state in UX design

Stay informed on all things design.

Thanks for submitting!

Shaping Design is created on Editor X, the advanced web design platform for professionals. Create your next project on Editor X. 

Get our latest stories delivered straight to your inbox →

Designers are taught to fill up a blank canvas. Our entire skillset revolves around the ensemble of visual elements, components, and patterns to shape the user’s experience of a product. We are taught to constantly look for opportunities to create meaningful experiences throughout the user journey and add more value to the business.

One such opportunity that is often disregarded and ignored is the “empty state”, which refers to the components or screens that have yet to be filled with information and are thus left empty. The lack of information would add to the user’s cognitive load as they would need to spend extra time and effort figuring out their next step.

What is an empty state?

Empty states are commonly known as first user states, 404s, error states, or pre-filled states. They are screens in your interface that have yet to be filled with information or have nothing to display. For example:

  • An empty shopping cart

  • A dashboard that lacks data

  • An error screen from trying to access premium-only feature

  • A failed search with no results found

  • A lack of internet connection

These states might only form a small fraction of the user’s journey yet they are as important as any other screens within your product. They are often the bridge that leads the user down a certain path by providing information or instructions. In each of the above situations, the user needs to know what happened, why it happened, and how they can move forward.

A well-designed empty state should answer those questions; just having a nice illustration and a vague header isn’t enough. Properly designed and written, empty states offer a bunch of opportunities to create meaningful conversations with your users and provide them with an engaging user experience.

Why should I use empty states?

New users need to go through an acquaintance process where they slowly become familiar with the functionality and features of a product. Depending on the nature of your product, empty states could be a critical factor in ensuring that the user sticks around long enough and takes enough actions to fully experience its benefits. For example, InVision utilizes empty states to indicate to users that they need to create and upload their designs before being able to create their own prototype using the platform.

We as designers always claim to be user-centric, yet by ignoring the empty states, we are basically giving users the cold-shoulder. This would result in lower engagement rates, irritated users, and increased churn due to a bad impression.

This is especially true for data-based applications as it is crucial to get the users to move forward in order to not lose them. This can be done through extensive user research and A/B testing to better understand the user’s goals and priorities, which could then be translated into the right call-to-action. As designers, we should be able to predict the user’s actions and offer engaging ways to lead the user while making every step meaningful.

Empty state screenshot from Asana

For example, Asana’s on-boarding process leads the users to complete certain tasks which helps them kick start their journey. By effectively using empty states, Asana focuses on the user’s core objective by asking them to create their first eight tasks, as opposed to urging them to invite more people to join the project or set up their profile.

Designers should never assume that most users will know how to use the product, just because there are similar products out in the market.

How to better design each type of empty state

Every product has to have some sort of user-originated empty space. This can be due to a lack of content for a specific state, or a result of task completion. Whatever the case, it provides an opportunity for the designer to increase product satisfaction and lower abandonment rates.

Here are four core principles of a good empty state design:

  • Provide guidance: An empty state is a good opportunity to encourage users to interact with your product by guiding them instead of letting them roam blindly around your interface.

  • Inject brand personality: Empty states are one of the few places where you could be playful, fun, serious, or quirky, creating a sense of personal touch and increased brand equity.

  • Be informative: It’s important to inform your users why they are seeing an empty state and how they could move forward. Let them know that there’s nothing strange about the missing information and explain when they can expect to see it populated.

  • Prompt action: Whatever the purpose of your empty state, you should always give your user a next step. A call-to-action button reduces the user’s cognitive load by providing them a quick option for them to move forward.

Now let’s dive deeper into the different types of empty states and how to better design each one of them to improve the user experience.

1. User onboarding

As new users explore your product for the first time, they’re also learning how to use it. This can be challenging when there is nothing to show, especially for SaaS products such as Evernote, Slack, and Grammarly. These products require the user to complete certain actions before being able to fully explore its features, making it hard to engage the user.

This is why designing a good user onboarding process is a critical factor for engaging and retaining users. The key to reducing the churn rate is to get the users hooked within the first 3 to 7 days of using your product, which would be hard if all they saw were blank screens. A good way to overcome this is by providing starter or demo content to help the user experience the product features without any additional steps.

Here’s an example of how Grammarly uses starter content: