Profile picture of Jeremiah Lam

8 min read

How to use empty states to your advantage

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

404 empty state in UX design

Illustrations by {name}

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. 

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:


Grammarly demo document

You learn how to use their features by diving in and using them, with the help of the demo document.



Empty state on Grammarly's demo document


When you first sign up for Grammarly, it comes with a demo document that’s used to educate you on its main features and capabilities. The demo document is a great example of “learn by doing” as it gives the user a hands-on experience of using the product. This is way better than showing them a lengthy walkthrough of each feature and requiring them to upload their own document before being able to try out the features; greatly reducing the barrier of use.



Screenshot of Grammarly's demo document


They also did a good job of providing guidance through the use of pulsing hotspots to point out notable features. The hotspots are subtle enough to not obscure the interface, yet still use the law of focal point to draw the user’s attention. The hotspots are also arranged to sequentially guide the user from one feature to another in a logical order.


Educational content

Demo content might not be applicable or even possible depending on the nature of your product. The next best thing is to provide some form of educational content to help the user better understand the product and its features. It can be a tutorial video on how to use the product or illustrations to show its benefits. It’s important that users can remove or hide this content once they get acquainted with it, otherwise it might be annoying.


Below are some forms of educational content that you could use:

  • Welcome message

  • Product tours

  • Checklists

  • Hotspots

  • Action-drive tooltips



2. Cleared data


Depending on the nature of your product, your users might be able to clear their data; or rather that might be their end goal. This can be in the form of a task, reminder, or email list where they strive to clear all remaining items. In such cases, an empty state might not actually be a bad thing, but an achievement instead.


You can use this opportunity to add emotions and personality to your design for a more engaging and personalized experience. Let the user know that their actions led to this empty state of accomplishment and support them in continuing their good work. A nicely placed encouragement can boost the user’s confidence tremendously, motivating them to continue interacting with your product.



Empty state example from Asana


Asana does a good job of injecting some personality into their empty states and congratulating the user for being up-to-date on their work. They also didn’t forget to be informative by telling the user that they can always check back later for new updates.



3. Error messages


Nobody likes error messages, but they are bound to happen sooner or later due to various reasons; technical issues, connectivity problems, or user errors. Not every outcome can be predicted and not every result calls for a congratulatory response. If an error occurs, the least you could do is to reassure your users that it isn’t their fault, and give them clear steps to a solution.



Screenshot of error message on Mailchimp


A minimalist approach might still leave the user feeling frustrated despite being armed with the knowledge of the error and a solution. A little humor can go a long way in helping the user feel better about the situation. The design and microcopy on these empty states can add a bit of personality and dilute the potential frustration.


Mailchimp does a great job at this by informing the user that they’re a bit off track in a witty manner, accompanied by a funny illustration and offering a way back to the main page. This is a good example of how you can turn an error into a positive user experience.



4. No results


Search is so ingrained into the user’s expectations that it’s pretty much a must for any data-rich product. Yet, there is always the possibility where the user searched for something that is unavailable, resulting in a no results empty state. It could also occur when filtering for a certain metric that has no items or information.


A well-designed no results empty state should include the following elements:


Give helpful suggestions