Empty States and Errors

Content is what makes your app valuable and what users downloaded it for. But at the beginning of application lifetime, especially when creating MVP, and when user just installed an application, there may be problems with the lack of information, empty screens and errors.

However, when designing, we often forget about them. As a result a developer adds a lonely phrase "no internet connection" which looks sad. And since these screens are everywhere, why not create templates with illustrations and text. This saves time during development, and it is nicer for users to see such screens rather than a few ascetic words on a gray background.

In this article, we'll look at the two types of screens — screens without content and screens with errors.

 

 

Image from dribbble.com

 

 

Empty States

Empty states occur when there is no content on the screen or the search returned no results. Messages on these screens should be personalized and depend on the context of the application. Here can be found several good opportunities for contact with the user.

 

Teach a user

The primary task in designing empty screens is to explain to the user why there is no information on the screen and what he could’ve done if there’s content. It is necessary to use a brief and clear language.

 

 

Call to action

 

Well, we explained to the user why the screen is empty and what it really is. We will not stop on this, the next step is to give the opportunity to take action and gain access to the content. Use motivational phrases to convince the user. Tell him about the benefits that he may receive and give clear instructions. You can add a CTA button or an arrow that leads to it.

 

 

Good impression

Empty screens are functional, but that doesn’t mean that they look boring. Make them "human" — add nice elements and animations to reach an emotional connection with the user, and he will not have any reasons to remove the application.

 

 

 

 

Application errors 

Emerge always and everywhere, no one is immune from it. But they give more reasons to think about error messages and prevent the user from disappointment.

 

 

Image from dribbble.com

 

 

Errors can occur for various reasons. These can be general errors in the application, errors in synchronization and downloading of the content, or problems with Internet connection. Tell the user what actions need to be taken to fix the error. Even if you can not download  new content, enable interaction with the rest of the data in the application.

As an alternative, you can tell the latest news of the application or even offer to play (more details in the article “Empty states, what about No Network states”).

 

 

 

In conclusion

Empty states and errors screens are not a curse. This is an excellent opportunity to turn the negative user experience into a positive one. Use a staid tone, visually simple and intuitive messages.

We have only one chance to leave a first impression, let it be enjoyable ;)

 

Links:

The Role Of Empty States In User Onboarding

Empty states

Errors

Why empte states deserve more design time