Empty States Design Best Practices

The task of the designer is to make users happy and satisfy all their needs. Working hard on the main pages and parts of the project, designers sometimes disregard empty states. And it can lead to problems and even the fact that users can stop using the application or site. It’s time to deal with empty states and find out why they are so important and how to make the empty state that will attract new customers and not push away experienced users.

What?

Empty states, or zero-data states, are the messages that users see on their display (both desktop and mobile interfaces) when there is no content to show. Their task is to improve the user experience of your product, from onboarding to encouraging users to interact with it. They are the screens in your UI that are not yet filled with information. It is very important to understand that the empty state has high priority in the UX design process. The empty state occurs infrequently but in case of appearance, the user should remain satisfied with the product. To do this, you need to develop the design of the empty state and make sure that it meets all the needs of the user. Such a small detail as the professionally-made empty state can help to stand out from the competitors, can show your company’s personality, entertain people who see it and even make them smile.

Why abandoned?

Empty states very often go overlooked by designers. But an empty screen without any advice or explanation can confuse users. As a result of this, the user may remain dissatisfied with the product and eventually stop using it.

Statistics say that only 2 percent of people come across the empty states, but even these 2 percent should be completely satisfied with your application or website. The devil is in the details and the empty states are the things which can’t be neglected.

Why so useful?

The empty state is a great way to communicate with users and help them work with the application or site. Also, the empty state is a great way to inspire people to work with your product.

A closer look at the empty state

To understand what should be included in a perfect empty state, you need to understand its function in your application or website.

Sometimes empty states can take many forms and have different functions.

Error or no results

If something goes wrong on the page or the connection to the Internet is lost, the user sees a page that informs about an error. In case of an error, the empty state should not describe in detail why it occurred. The empty state provides users with a short comment about the error and instructs what the user should do next. If users don’t have Internet access, you can also add an amusing and simple game to the empty state (as Google Chrome browser does) so that the user can spend time waiting for reconnection in an entertaining way.

User cleared

These empty states appear when the user removes all information (like the received messages or task list) and there is no data left.

First use

Here we may speak about onboarding pages — instructions on the use of the product. When do the users see empty states most often? When they just started using the application. This type of empty state is created for the first user experience with an application or service. It is starter content that helps new users understand what exactly the new application can offer them.

Its main goal is to teach a new user to use the application and show what will be in place of an empty state when the user actively works with the application.
Starter content is great for applications or sites that are used to store content (music or books), create templated content (like notes, presentations or documents) or different online tools for photo or video editing.

Educational content

Educational content may also occupy a place in the empty state. The educational content will help the user understand what the application can do. It can be a video about how to use the application or illustrations that show its work. It is important that users can remove this content as soon as they get acquainted with it. Also, this content should not occupy the entire screen.

Each empty state should carry some kind of message. The presence of a picture and a call to action (links or buttons) is optional, although very desirable.

The best option is to do the empty state is to combine an illustration, headline, body text and call to action. In this case, the users won’t have any questions about the causes of the appearance of the empty state on their screens and they will immediately know what to do next. The message, call to action, and illustration should work together, creating one distinctive style of the empty state and presenting the personality of the company.

Now let’s take a look at each element of the empty page.

Message

Each message in the empty state consists of two parts:

• the headline, which gives the main information
• the body text, which adds details and engages the user.

For readability, the message should not be wider than the size of the illustration. The text itself should be short, informative and written in a friendly manner. This is not a place where formal expressions or speech turns are needed. Best if the title begins with a verb. It will attract the attention of the users and immediately show them what to do next. Feel the limits, but do not hesitate to show that your company also has an excellent sense of humor.

Call to Action (CTA)

A CTA button provides the user with the most logical action that can be taken on the page. This button is needed so that the user can immediately go from the empty state to the page that will contain the information that is necessary and useful for them. Create a CTA to help the user go to another page, not another application. When making a button, you need to understand what the user must do on this page.

Of course, such a button does not have to be present in each empty state. Sometimes there can only be an illustration with a brief explanation of the problem or the reason for its occurrence.

There are several options for users to do. They can:

• Click a CTA button to take action right away
• Write the feedback in the special field to fill
• Launch and use the tutorial that teaches the user about specific feature of the application or site
• Get redirected to the Help tab

When making a button, pay attention to the fact that some platforms may restrict user actions depending on permissions. Will all people be able to use the button without any restrictions? If no — change the CTA so it could be suitable for everybody.

Also, it is important to avoid the repetition of the text in the headline and the CTA.

One CTA is almost always enough. In some cases (if you want to enable the user to select one desired action from several possible ones), you may add two CTAs. But there can never be more than two of them.

Illustration

The illustration on the page is optional but very preferred. A picture is something that can make a page look more attractive, add humor and help the user understand the situation.

One small illustration will be enough to make the user’s stay on the page more enjoyable. The picture should complement the main text and the CTA, and not take all the attention to itself.

Sometimes, if the illustration does not make sense and does not help the user deal with the situation, it is better to leave the empty state without a picture.

Also, the size of the illustration plays a great role:

• a big illustration is needed when the empty state is the only thing on the page.
• a small illustration is needed if you have several empty states on the page.

And to sum up

Never leave the user alone. Your empty state should give a clear and distinct answer to the question “Why do the users see this on the screen and what should they do next”. The ideal empty state should tell the user what its purpose is, why the user sees it and what should be done next. They can also be a good way to get a user to interact.

There are many ways to create an empty page that will be equally useful, fun and attractive. The company can develop their design on their own. Or trust the professionals. If you want to see the maximum result with minimal effort — you can buy a ready-made kit for your app or website.

At Cadabra Studio we can offer you the empty state illustrations kit designed for completely different cases and purposes: tutorials, loading, informing about mistakes and many others.

Use it for desktop or mobile versions, change colors and size to match your needs and just enjoy the humorous and memorable stubs for various purposes.

Originally written for Cadabra Studio Blog.