Can you fill in the blanks in your app? Here are 4 tips how to deal with empty states

29.11.2017, 5 minutes read

Initial contact with new application is the crucial step. It is the first impression when the users decide if they are going to use the app or rather avoid it. If they encounter empty states right after the sign up, and you don’t explain them where they find themselves in and what they can do, you will probably lose their attention.

However, if you consider following tips during the onboarding, you will certainly attract new users.

What are the empty states?

Before introducing our recommendations how to improve your user onboarding process, let's start with a basic definition.

Empty states can be defined as a list that doesn’t contain any items or content in default. If the user installs the app, signs up and first thing he sees is a screen with no data, he can feel confused and abandon the app.

UX specialists' job is to design an interface in which the users can immediately find user instructions.

Example: In Task manager, users should be able to schedule their tasks easily and not struggle with creating a new event in the calendar. In messaging apps, why pointing out the user has no friends in his friend list, when you can show him how to add new contacts?

onboarding-apliikacia

No blank space in your app, which the users should fill in, can be really blank. The empty states can be used to educate your users. However, the goal of adding data to no content spaces is not only to overlay the screen. Otherwise you deprive your users (and yourself) of experiencing the aha moment.

We summed up few tips how to create mutually beneficial content in empty states.

1. Encourage your user to drive an action

UX designers should mainly focus on encouraging the users to drive the desired action. This doesn’t mean you should present only the benefits your content-saturated app provides.

Use empty states to guide the users to take particular steps. The best way is to combine the usability and CTA. Facebook serves as a perfect example (picture on the right).

facebook-emptySource: emptystat.es / own adaptation

In order to read the messages in the Facebook mobile app, user must install Messenger app first. Instead of displaying “You need Messenger to read your text messages”, Facebook shows the benefits of the app (i.e. you can take photos and videos directly in Messenger and send them to your friends) and displays the number of real users.

Besides providing the benefits, Facebook uses also the social proof effect which further encourages the users to take action. The Messenger install-button is the only way how to fill in the blanks in the app.

Compared to the picture on the left, which has no option how to fill in the empty state, Facebook came up with a brilliant idea.

2. Be short and beneficial

The simplicity rule applies in the whole onboarding process, including empty states design. Minimalism is the key! The content must be both brief and visually attractive. If you are copywriters, our last blog on Rules of microcopy texts will surely be an interesting reading for you.

Always bear in mind that empty states content must be useful. Instead of saying there's nothing to display (picture on the left), try to guide the users to take steps to fill the empty space with content (picture on the right).

empty-states-exampleSource: emptystat.es

Now you know what how the empty states onboarding guide works. Let’s focus on the visuals! If you need inspiration, you can find handful of graphics specimen on emptystat.es.

empty-states-exampleSource: emptystat.es

3. Don't be afraid of emotional appeal

App with no data is useless. Users should also be aware of this. Don’t be afraid to use emotive language to remind them thereof. Some may consider such style rather ingratiating, yet, emotional reaction is better than no reaction.

If you manage to evoke positive emotions, you will most likely arouse their interest and engagement. User will thus feel motivated to fill in the blanks in the app. The emotion you are going to evoke is determined by the aim of your app.

empty-states-exampleSource: emptystat.es

Apart from emotional appeal, don’t forget the usability. On the left you can see only a whining figure in an empty space. The picture on the right furthermore provides concrete solution how to add data to the emptiness.

4. If not content, then recommendations

Different approach how to make you app more user-friendly suggests using temporary content. The starting content is a great possibility how the users can thoroughly examine your app with all its features, and fully test its functionality. They will have a clear picture of the ecosystem. The recommendations show them the content which they could also like.

The temporary content can be selected randomly or preferentially based on other users’ content. You can also take the path of personalised content based on gender, age or country. Allow the users to alter, move or delete the temporary data. In a single step, they will experience multiple features simultaneously.

empty-states-exampleSource: material.io / emptystat.es

Even though the book reader app (on the left) has no books listed, users can see the recommended works instead of empty screen which they can immediately download and add to their library. The emptiness fills with real content.

The personalised user onboarding was also a key topic of one of our blogs in which you can find plenty of inspiration how to design personalised onboarding guide.

Outcome

Empty states and no data features should never be really empty. Do not rely on your users’ intuition. If they bump into the blank space with no content, they may get confused.

Empty states should be a part of every onboarding guide, as they can offer a range of possibilities how to give instructions to the people. Finally, empty states can bear fruit in the form of traffic.

You can take the example of Projecturf, which showed the users how to create new tasks, instantly after clicking on the new task button. The guided setup to fill the empty states in the onboarding process increased app’s conversion rates by as much as 30-40%.

Do you want to increase your conversion rates?

Try out our user onboarding platform YesElf

Book a Yeself demo to see how customer experience management can improve your business

request demo

Try YesElf for free

Request a personalized version of our YesElf platform and test its features in real life. It’s non-binding and free for the entire month!

I’m interested