Developer note: how to decorate blank screen applications

Recently, I increasingly began to notice for themselves, that the more active interest in the subject of development applications for iOS and designing user interfaces, the more you think, or different to those other things. You start to pay attention to the location of the control buttons, the size of icons and other design stuff of which a normal person in everyday use and are not suspects.

The other day I came across a very interesting article Designer Craig DennisIn which he laid out on the shelves design rules "clean" screen app for iOS. Technically, this is called «Empty state» - when the program for some reason can not show anything to the user. According to Craig, many novice designers do not pay enough attention to this aspect of the application, and because it is often correctly inform the user about the lack of content is just as important as the map itself content. I his article seemed very curious, so I suggest find a brief translation of the basic ideas.

"Clean" screens can be divided into three main types - the first use of the application, the lack of content and technical error (failure of the Internet connection, for example).

1. first use

First impressions always remain in memory, especially the poor. That is why the designer is very important to arrange the interface so that when you first start User program met not neutral cool white screen, but something aesthetic and functional. It is best to draw some kind of visual image and add a couple of tips on the use of the application (only do not overload the interface tedious instruction in the spirit of captain obvious). Excellent examples of the remarkable realization of such ideas are Buffer program, Timehop ​​and Dropbox (you can see screenshots above).

2. Lack of content

Let's look at the situation with e-mail. You love it or hate it, most of it is filled with unread messages. I know a lot of people who are daily receiving dozens of new messages. Of course, an active e-mail users are always pleased to find an empty box. This will be doubly pleased when the email client developer will give this aspect a couple of hours of work and draw a nice warning about the absence of new mail.

That's the way this problem is solved in Sparrow, Gmail, and standard program Mail in iOS:

Sparrow provides the user with the traditional icon of the mailbox and «Inbox Zero» label. This screen is intuitive, minimalistic and decorated quite stylish. The user is unlikely there will be any questions.

Gmail developers have gone a step further and add a touch of emotion in your application - when Users are no unread messages in front of him showing off a fun sun icon with the caption "Enjoy day! ". This kind of feeling as to hint a person about how good or bad it is (the above example is obvious, but there are more complicated cases).

Mail.app application system does not design a special "clean" page, so the user can only guess why before him there is no list of messages - or simply do not have new messages, or sync error, or failure to connect Internet. This kind of question always leaves a bad feeling from the use of the program, so if you interface design, try to clear inform the user as to why it does not appear to expected content.

3. Technical errors

Quite often, the user has to observe a "clean" screen iOS app due to the fact that the device has lost the connection to the Internet and can not download new content. As mentioned above, for the creator of the program it is very important and elegant grammotno to convey this information to the user.

Let's see how an error screen is implemented in Chrome apps, Opera Mini and Safari:

Chrome literally "spits" on the user's long text from the boring technical information. Opera Mini «finished with" a couple of sentences that do not give the user a clear idea of ​​why browser can not open a particular site. The most successful implementation, in my opinion, offers the standard Safari program, which clearly says that the iPhone is not connected to the Internet.

A few more interesting examples: GMail, YouTube and Instagram.

conclusions

How did we make the right design "clean" screen is very important for modern interfaces - and not only for the iOS-programs. Before you send the program to the review in the App Store, or to issue the final release, think for a moment, who will use your application and why. Try to pay attention to the smallest details that will help your product stand out from the gray mass of competitors. If you can please the users and leave a good impression about yourself, in the future they will be ready to forgive you some shortcomings and mistakes.

P.S. What do you think about the design of "clean" screen? Is there some kind of subjective wishes or general advice? Should I MacRadar editors write about such subtleties in the design and development of interfaces for iOS? Write your opinion in the comments, it would be interesting to discuss the topic with the readers.