Developers Club geek daily blog

2 years, 12 months ago
Incorrectly used templates of the mobile interface

If you the experienced designer, then agree that the vdokhnovleniye other works is not theft of elements of the user interface. On the contrary, it is research process. This following to guides. This application of templates with which users are familiar.

Some can object that following to guides can kill creativity, and as a result all applications will look equally. From the point of view of UX, I see other problem here. Can seem that application of the best templates which use Google/Facebook/Instagram / [to insert the favourite application], is always an excellent solution. That they set to themselves the same tasks, as you. There are several templates which are considered (or were considered) the best, but at the same time not such they and good what seem at first sight.

1. The hidden navigation


At least a floor of one million articles it was published on the hamburger menu. Generally authors of these articles state arguments against. If you passed them, read one or the second. In brief, these articles not about the icon, and how designers hide navigation behind an icon.

Slide-меню гибкое и удобное
Slide-menu flexible and convenient

This solution quite convenient for the designer. You should not worry about the limited size of the screen, just squeeze all navigation in the separate screen and hide by default.

However, experiments show that display of the menu by more obvious method increases an involvement, satisfaction of users and even profit. That is why all large players pass from the hamburger menu to leaving the most used navigation elements visible.

Incorrectly used templates of the mobile interface
Changes in navigation of the YouTube application (a mark from Luke Wroblewski)

If you have a difficult navigation, then its concealment will not correct a situation. And purpose of priorities will correct.

2. Icons, everywhere icons


Because of limited space it seems reasonable to save a little place, having replaced the text with icons where only it is possible. Icons take less places, they do not need to be translated into other languages, and eventually people are already familiar with them, so? And it does each application.

Knowing all this, designers of applications sometimes hide a funtsionalnost for icons which are actually quite difficult for learning. For example, you would guess on this icon what it is possible to send personal messages to Instagram?

Incorrectly used templates of the mobile interface

Or we will assume that you never used the Google Translator earlier. What happens if to click this icon?

Incorrectly used templates of the mobile interface

Often found error when developers assume that users or are familiar with abstract icons, or they wish to spend a couple of minutes for their studying.

Incorrectly used templates of the mobile interface
Mysterious icons of the application of Bloom.fm

If you thought up a new icon and think that it is necessary to substitute to it the small hint, then you are not right. Even if you are Foursquare, and your users all the same will learn this icon.

Incorrectly used templates of the mobile interface
The hint near an icon in the Swarm application

It does not mean that it is not necessary to use icons at all. There is a set of icons which users well know. The majority of them represent well-known functionality: search, video playback, mail, settings, etc.

Incorrectly used templates of the mobile interface
Some icons are recognized by most of users and can be considered as universal

Composite functions have to be accompanied by a text label. In such cases of an icon are all the same useful as they improve degree of perception of elements of the menu and give to the application identity.

Incorrectly used templates of the mobile interface
Navigation in the Pixelmator application

The basic functionality can be effectively displayed by icons, but for composite functions it is necessary to use text labels. (If you use icons, their convenience in operation has to be tested.)

3. Navigation by gestures


When Apple was provided by iPhone in 2007, thanks to function the multi-touch users understood that they can not only click the screen, but also use many other gestures (zoom, swipe, etc.).
Gestures became popular among designers, and a set of applications were constructed on the basis of experiments with management of different gestures.

Incorrectly used templates of the mobile interface
Management of the Clear application by means of gestures

Also as well as concealment of navigation and use of icons instead of the text, gestures can look invitingly in the opinion of the designer. ("The knokp needs to clean to delete, people just will be do svayp to the left. Or to the right. We will solve.")

The first that it is necessary to know about gestures — the fact that they are always hidden. People need from to remember. As well as with the hamburger menu if you hide this or that option, then less people will use it.

Besides, gestures possess the same problem, as icons. There is a set of the general gestures which most of users understand, such as tapas, a zoom, or skroll, and there are also those which need to be studied.

Unfortunately, meanwhile the majority of gestures not standard and not permanent in all applications.  All this still quite new area in design of the user interface. Even such simple gesture as svayp the miscellaneous depending on the application of mail can mean letters.

Incorrectly used templates of the mobile interface
Svayp to the right in the Mail application on iOS devices opens the option "Mark as Unread"

Incorrectly used templates of the mobile interface
The same gesture adds the letter to archive in the Mailbox application

Or, for example, stirring of a device can mean canceling of action in iOS or departure of a response in Google Maps.

Never forget that gestures are the hidden functionality which needs storing by the user. If you the designer of the Tinder application, you can teach the whole world what means svayp to the right, but only if it is necessary ingredit your application.

4. Screens of acquaintance or how to use the application


Onboarding — acquaintance between the user and the application. In many cases it simply means existence of the screens blocking the application and explaining interface elements:

Incorrectly used templates of the mobile interface
The tutorial in the dcovery application

Why this bad solution? Because most of users will pass all this, they need to begin to work with the application. And even if they read the tutorial, then most likely will forget everything right after closing. (Especially if application perenapolneno information.) And, at last, the explanation how to use the interface, does not do it to more intuitive. You remember:

шутка
The interface — as a joke. If it has to be explained, then not such it and good. Source: Startup Vitamins

The screen of acquaintance to the application can be provided by different methods, effective for users. The Slack application, for example, uses the first screen for creation of a context. They are just represented, placing emphasis on the benefits, but not on functionality.

Incorrectly used templates of the mobile interface

Even more interactive method of the first user interaction — progressive onboarding. Duolingo does not explain how the application works: users are recommended to pass a fast test on the selected language (without registration) because people are quicker trained working. Besides, it is effective method to show to the user application value.

duolingo

You remember how gesture of a svayp in the Mailbox application and in the Apple Mail differed? Here is how progressive onboarding works. Users can try different gestures before direct use by the application:

IMG_7022

Before design of the training screen against the main screens stop and think what has to be the first interaction of the user with the application. Be focused on a context. In most cases there is more effective method of a greeting of users.

5. Creative, but not intuitive empty screens


Empty screens (empty state) can remain unnoticed inexperienced designers. However, they can be an important factor when it is about the general experience of interaction.

Sometimes designers see an opportunity to show creativity in empty screens and error messages.

Let's take for example the empty screen of a Google application of the Photo:

Incorrectly used templates of the mobile interface
The empty screen in the Photo Google application

At first sight all it seems as it should be, so? Well made according to guides shably with nice graphics.

However, having looked narrowly, it is possible to notice some strangenesses:

  • Why we see a search icon? Why the user has to want to look for when there is nothing?
  • The second noticeable element — the picture on the center which it is impossible to click (though many will try).
  • The hint says that I have to find the + button" in upper part of the screen that is strange. Why the hint itself does not comprise the Add button? How to tell "Press it the Continue button to continue".

This empty screen does not help users to understand a context:

  • What is collections? Than they are useful?
  • Why I do not have them?
  • What with it to do to me?

So far as concerns creativity, is actually more less. The empty screen from below turned out with a bang in respect of usefulness for the user.

Incorrectly used templates of the mobile interface
The empty screen in the Lootsy application

Do not forget what empty the screen (as well as page 404 in a web) is not only visual esthetics and identity of a brand. They play an important role in a usability. Make them intuitively clear.

Call everything in question


Do not misunderstand me, templates in design — still your best friends. But keep in mind that not all applications and users are identical. One solution can work for one application and fail in another.

Think. Create. Investigate.

Measure, test, confirm and be afraid to follow guides if in what there is written, there is no sense.

From the translator. With all wishes and notes concerning transfer I ask to address me in a pm. Thanks!

This article is a translation of the original post at habrahabr.ru/post/270891/
If you have any questions regarding the material covered in the article above, please, contact the original author of the post.
If you have any complaints about this article or you want this article to be deleted, please, drop an email here: sysmagazine.com@gmail.com.

We believe that the knowledge, which is available at the most popular Russian IT blog habrahabr.ru, should be accessed by everyone, even though it is poorly translated.
Shared knowledge makes the world better.
Best wishes.

comments powered by Disqus