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 ux 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.

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.

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.

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.

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.

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

A good start would be to give some clear instructions or suggestions on what the user might want to do next.

Some common suggestion are:

• Check the spelling

• Search for simpler terms

• Search for something less specific

• Check the filtering options

It’s important to be clear and use a friendly tone. The microcopy shouldn’t blame the user or make them feel dumb, but instead encourage them to redefine and continue their search. An empty search result page can be a point of major frustration, but with the infusion of UX writing to design teams, we’re seeing better and more empathic messages.

Offer alternative results

There are times when the issue isn’t with the search but with our content. This happens when we don’t exactly have what the user wanted or searched for. As opposed to just giving up and allowing the user to leave with a negative experience, we should include suggestions of other popular products, categories, or search terms.

This would increase the odds of them staying and continuing to engage with our product. At the very least we might catch their attention, as this might lead them to discover something that they wouldn’t have looked for otherwise.

Identify spelling mistakes

If possible, you might want to add automatic spell checkers to your no result pages. This can be a big ask for the development team but it does wonders for the user’s experience. If there’s a chance that the user misspelt the search term, you could offer customized suggestions to help them save time and effort by quickly directing them to their intended search term results.

Provide offline help

If you want to go the extra mile, you could provide an email address or telephone number to allow the user to contact you directly. This will allow you to potentially find a way to help them, or at least the discussion will highlight the gaps in your product.

Even though the contact information is already somewhere (normally buried away in the footer), the user might not actively seek it out. The no results page is an ideal place to surface it in a prominent and meaningful way, if appropriate.

In summary

Empty states are an important element of any product. They are usually seen as a solution for user on-boarding or when there’s no information to be shown. This solution uses visual cues and on-point microcopy to guide the user to accomplish their intended task instead of leaving them hanging and risking them abandoning the product.

Your empty state should give a clear and distinct answer to the question, “Why is the user seeing this screen and what should they do moving forward?” Whenever the user stumbles across an empty statue due to first use, error, or lack of data, the design should help to guide them along to the next step and leave no room for confusion.

Empty states should be a pit stop and not the finish line.