Design of an empty state interface for mobile applications

In fact, I still do not know which day is going through the years, I know fast, because the company's people walk away quite a lot of look. No, it's not so much like the new Year's season, the warm weather seems like late spring and summer, in the rooftop smoke will even find hordes of small flying insects in the dance.

Where are these? In fact, no matter work or life, it seems that anything that is in the normal course of things will let oneself produce "after the new year to seriously continue" the hurrying feet, some of the things that need to get started are also ready to "start again in the new Year", some of their own projects, ideal collections, some books to read, some games to play ... This is generally the case, in fact, I now put this post out to take a few hours to do what I want to do is not not, but always seems to want to look for a voluminous time; I don't know if it's an excuse for procrastination; Actually, I don't think I have this problem, really. Stop, we go into today's text, about the design of the empty state interface of mobile application; Although the examples in this article are iphone apps, it should be irrelevant to the platform or even the device type. (BTW, with the micro-letter friends can add a beforweb chant, click on the side of the second icon on the sidebar will appear two-dimensional code)

"Empty state" refers to the state that the mobile application interface renders in the absence of content or data. For a long time, the empty state interface has been overlooked because designers tend to focus entirely on how to better present content and data, and only developers are more likely to deal with such relatively "unexpected" states. It is for this reason that the empty state interface left the user with the impression that it was mostly obscure copywriting and a lack of visual design style.

To create the perfect overall experience, as a designer, we can not let go of any user has the possibility of contact with the interface state. The empty state interface consists of three types: initial use, user emptying data, and error. Now, let's take a look at the relevant creative elements and considerations for these three scenarios.

1. Initial use

The first impression that applications leave to the user during initial loading is very important. Some of your users may have established mental models and expectations through other similar products, they will be very sensitive to compare your application with the ones they already know from the beginning, while others may have no experience with similar products, they are like a blank cloth, waiting for surprise or disappointment. In either case, the damage caused by a bad first impression is hard to make up for.

If the user downloads your application and completes the registration, it can almost represent that they already know what your product is for, but may not be sure how to use it. For some types of applications, there is no data content after the initial login, which is a good opportunity to make full use of the interface space to provide users with novice guidance. You can tell the user why there is no current content, how to create or get content; In this link, you might try to integrate some of the emotional elements that reflect the product's personality, which allows users to enter a more relaxed state of getting started, triggering positive emotions and giving them a good first impression.

See how the buffer, Timehop and Dropbox are done. It is worth mentioning that the empty state interface between buffer and Dropbox and their respective web pages (bufferapp.com and Dropbox login pages) Use the same style of visual elements in both guide and illustration. It also reflects the good consistency of their product and brand image on different platforms.

Dropbox (really warm hurrying feet, I like-translator C7210)

2. Users empty data

Think of the email or message inbox, most of the time is full of BA, inside there are hundreds of unread mail is not surprising. But different types of users have different needs and uses, and some people do read most of them.

No matter what kind of user you are, in fact, we will have more or less the desire to "treat objects" to zero (recall that you see the App Store icon in the upper right corner to update the number of applied icon hurrying feet). From this point of view, zeroing in on information is a task that doesn't have much practical meaning but is easy to spend time and effort on, and sometimes people do it just for a little obsessive compulsive disorder. This time, you might as well give them a bit of positive emotional feedback, in the empty state interface to give these users a little "return."

Let's look at the way Sparrow, Gmail, and iOS native mail clients are doing this.

When the message is emptied, Sparrow will display a traditional "inbox" icon in the interface, the following title is "0 Mail", the image, clean, simple, how many people can produce a little less practical sense of achievement.

Gmail in this most basic way on the next step, their designers in the empty Inbox page put a smiling sun, through the imitation of human emotions, for the product personality, so that users feel happy from the emotional. And they are also very thoughtful in the processing of the copy: "You currently have no mail to deal with, happy to enjoy this day!"

It is highly recommended to read the article "personality-the elements of affective design and practical cases" for the product.

In contrast, there is a lack of positive feedback from the apps that come with iOS, and it's easy to question the user's presence in this empty-state interface: Have I really emptied my inbox or is there a problem with my network connection? or something else that's causing me to not see the other emails in my inbox? Any doubt can lead to a cognitive burden, which in turn affects the overall experience of the product.

3. Error

"Error" is most often caused by a disruption to the network connection. Try to provide some more useful or more approachable content in this case, rather than a bunch of ugly error messages. Let users see your design in unconventional use cases, and they will feel that the current situation is within the predictable range and thus relax.

Next we compare the performance of the Chrome, Opera Mini and Safari three browsers.

Chrome offers a large number of error messages that seem to be understood only by technicians; ordinary users are not even interested in spending time reading such content on mobile devices.

Opera Mini only provides a modal dialog box-like control, the whole style looks very stiff, but the copy is relatively simple and understandable.

Safari's approach is much more beautiful, it explains the current situation through simple and straightforward language to the user, the visual style of the whole interface seems to be deliberately in the soft "error" brought about by the negative effect. When there is a problem with network connectivity, people can easily produce very negative feelings, in this case, the most should not do is through a large section of obscure text and blunt visual style to aggravate the user's anxiety.

Of course, the error will not only occur in the browser. Again, for example, with Gmail's iphone clients, they also use sentimental elements to render error messages-a small cloud that looks less cheerful-and seems to understand the user's current feelings.

By contrast, Instagram and YouTube's feedback methods are slightly more negative in attitude.

Summarize

In fact, whether your product requires a network connection, or it is not a iOS application, some of the basic principles are interlinked: Pay attention to those users can not get the status of any content, to give users some form of feedback. We further abstract this article into three simple design principles:

1. When there is no data, boot the user to create the content.

2. Think about the psychology and goals of the target user when using the product. Do they often empty the data? If so, design accordingly; You can even prepare a few different empty state content to be displayed randomly.

3. When errors occur, do not allow users to further anxiety. Use your design to weaken the user's negative feelings and reduce their perception of bad conditions.