Empty State Interface Design for Mobile Apps

Actually, I still don't know when the Chinese New Year will come, but I know it's coming soon because a lot of people in the company seem to have left. No, this really doesn't feel like the Chinese New Year. The weather is warm like late spring or early summer. When I smoke on the rooftop, I can even see groups of small flying insects dancing.

What does this have to do with anything? In fact, whether it is work or life, it seems that anything that is in progress will make me feel like "I will continue seriously after the Chinese New Year." Some things that need to be started are also planned to be "started during the Chinese New Year holiday." Some of my own projects, ideal portfolios, some books to read, some games I want to play... are basically like this. In fact, it is not impossible for me to take a few hours to do what I want to do after publishing this article, but I always seem to want to find time for a big book. I don’t know if it is an excuse for procrastination. In fact, I don’t think I have this problem, really. Stop, let’s get into today’s main text, about the empty state interface design of mobile applications; although the examples in the article are all iPhone applications, the principle should have nothing to do with the platform or even the device type. (btw, friends who use WeChat can add Beforweb, click the second icon at the top of the sidebar and a QR code will appear)

"Empty state" refers to the state of a mobile app interface when there is no content or data. For a long time, the empty state interface has been neglected because designers usually focus all their energy on how to better present content and data, and only developers will frequently deal with this relatively "unexpected" state. It is also for this reason that the impression left by the empty state interface on users is generally obscure copywriting and lack of visual design style.

To create the best overall experience, as designers, we cannot miss any interface state that users may come into contact with. There are roughly three types of empty state interfaces: first use, user clearing data, and error. Next, let's take a look at the relevant creative elements and precautions corresponding to these three situations.

1. First time use

The first impression your app leaves on users when they first load it is very important. Some of your users may have established mental models and expectations through other similar products, and they will be very sensitive to compare your app with those they are already familiar with from the beginning; while other users may have no experience with similar products at all, and they are like a blank canvas, waiting for surprises or disappointments. In either case, the damage caused by a bad first impression is difficult to make up for.

If users download your app and complete the registration, it almost means that they already know what your product is for, but they may not know how to use it. For some types of applications, there is no data content after the first login, which is a good opportunity to make full use of the interface space to provide users with novice guidance. You can tell users why there is no content at present and how to create or obtain content; in this link, you may try to incorporate some emotional elements that can reflect the personality of the product, which can make users enter a more relaxed state of getting started, trigger their positive emotions, and also leave them with a good first impression.

Take a look at what Buffer, Timehop, and Dropbox do. It is worth mentioning that Buffer and Dropbox’s empty state interfaces and their respective web pages (bufferapp.com and Dropbox’s login page) use the same style of visual elements in terms of guidance and illustrations, which also reflects the good consistency of their products and brand images on different platforms.

buffer

Timehop

Dropbox (really heartwarming, I like it - Translator C7210)

2. User clears data

Think of an email or message inbox, which is full most of the time, and it is not uncommon to have hundreds of unread emails in it. However, different types of users have different needs and usages, and some people do read most of the content.

No matter what kind of user you are, we all have the desire to reset the "pending objects" to zero (think back to the feeling when you saw the icon of the number of pending applications in the upper right corner of the App Store icon). From this perspective, resetting pending information to zero is actually a task that does not have much practical significance but is easy to spend time and energy on. Sometimes people do this just out of a little obsessive-compulsive disorder. At this time, it might be a good idea to give them some positive emotional feedback and give these users a little "reward" in the empty state interface.

Let’s take a look at how Sparrow, Gmail, and iOS’ native email clients do this.

When the emails are cleared, Sparrow will display a traditional "inbox" icon in the interface, with the title "Zero Emails" below. It is vivid, clean and simple, and can give people a sense of accomplishment that has little practical significance.

Gmail went a step further on this basic approach. Their designers put a smiling sun on the empty inbox page, imitating human emotions and giving the product a personality, making users feel emotionally happy. And they were also very considerate in the copywriting: "You currently have no emails to deal with, enjoy your day!"

I strongly recommend reading the article “Giving Products Personality - Elements and Practical Cases of Emotional Design”.

In contrast, the built-in email app on iOS lacks positive feedback in this regard. Users can easily have doubts in this empty state interface: Have I really emptied the inbox, or is there a problem with my network connection? Or is there something else that prevents me from seeing other emails in my inbox? Any doubt will lead to cognitive burden, which in turn affects the overall product experience.

3. Error

"Errors" are mostly caused by network interruptions. Try to provide something more useful or friendly in this case instead of a bunch of ugly error messages. Let users see your design in unconventional use cases, so they will feel that the current situation is within the expected range and relax.

Next, let's compare the performance of Chrome, Opera Mini and Safari in this regard.

Chrome provides a lot of error messages that seem only understandable to technical people; ordinary users won't even be interested in spending time reading such content on a mobile device.

Opera Mini only provides a modal dialog-like control. The overall style looks very rigid, but the text is relatively simple and easy to understand.

Safari’s approach is much more beautiful. It explains the current situation to users in simple and straightforward language. The visual style of the entire interface seems to be intended to soften the negative effects of “error”. When there is a network connection problem, people can easily have very negative feelings. In this case, the last thing you should do is to increase users’ anxiety through long paragraphs of obscure text and a blunt visual style.

Of course, errors don’t just happen in the browser. Take Gmail’s iPhone app as an example. They also use emotional elements to present error messages—a little cloud that doesn’t look so happy—as if the app itself understands the user’s current feelings.

In contrast, the feedback on Instagram and Youtube is slightly more negative in attitude.

Summarize

In fact, whether your product requires a network connection or not, or it is not an iOS app at all, some basic principles are the same: pay attention to the states where users cannot access any content and give users some form of feedback. We further abstract the content of this article into three simple design principles:

When there is no data, guide users to create content.

Think about the psychology and goals of your target users when using your product. Do they frequently clear their data? If so, design accordingly; you can even prepare some different empty state content to display randomly.

When errors occur, don’t make users more anxious. Use your design to weaken the negative feelings in users’ minds and reduce their perception of bad situations.