Ideally, the user of the application or site should understand how to work with it the first time. The interface should be intuitive. Otherwise, the potential target audience will simply go to competitors. The task of the designer is to help the user understand what, how and why to do in order to perform a specific function. We will talk about how to achieve this in the article.
We take into account the features of our target audience.
Before you create a prototype of the interface of an application or website, you need to understand who your target audience is. From the interests and capabilities of users will depend on how they interact with the application or site.
An understanding of what is required by the audience can be called design empathy. This skill is well pumped with experience, but at the very beginning of the design path it is not too developed, so you have to spend a certain amount of time on the analysis.
The main thing is to answer questions like “What are the goals of users?”, “What stands in the way of realizing these goals?”, “How and what needs to be done to help your users?”. In general, it helps to create a portrait of "your" user (illustration below), which is very helpful in further work.
If the CA application or site - gamers, this one. If they are mostly fans of knitting from 60 and older, another (although it also happens that the groups of Central Asia
intersect ). IT staff - the third. There are services that allow you to test the performance of the interface with a specific selection of users. In this case, a heat map is drawn up, the time it takes the user to switch between functions is shown, and other results are demonstrated. All this allows the designer to determine the strengths and weaknesses of the interface, to come to certain conclusions: what can be left and what needs to be improved. An example of a service that allows you to test your interface “in the field” is UXCrowd, Saffron Tech and others.
How will users work with the interface?
Here we are talking not so much about the categories of users, but about the variety of devices on which the site or application will be displayed. For example, it can be smartphones with a touchscreen or a laptop. A good example of the application on the touchscreen can be Tinder. In the application of the dating service, a lot depends on the intensity and direction of the usual svayp.
In general, user interaction with the site or application on almost any device can be divided into two categories: direct interaction with the interface and indirect.
Examples of direct interaction (relevant for touchscreens):
- Tap on the button.
- Swipe.
- Moving the interface element with your finger.
Examples of indirect (mediated) interaction (relevant for any device):
- Selection with the mouse.
- Using special commands.
- Enter data into the form.
The interface should prompt the user what to do.
And indeed, when a newbie comes for the first time to a web service or application, he must understand what and how to do. The interface in an ideal situation should involve the user - that is, show where it is worth starting.
Twitter (old service design) didn’t suggest anything at all. What can understand a newcomer who has just registered? Little.
In an ideal situation, the user should immediately start tweeting, well aware of what needs to be done. But usually a person spent a few minutes (or even several tens of minutes) trying to figure out what was going on.
The Twitter developers quickly realized that the old interface was not entirely successful, and gradually came to its modern incarnation, which is much more practical, understandable and usable. New chips allow beginners to quickly navigate:
- There is a text box, it is always available.
- There is a hint for the user that you can share news on Twitter. It is implemented in the form of "What's new?".
- Added hints for the ribbon - if there are no tweets in the ribbon, then you need to do this, plus a block of hints appeared for who you should subscribe to.
- Instead of an incomprehensible for many term “trends,” the inscription “Actual themes for you” is added.
Unobvious solutions and false promises
It's about the interface elements that are not similar to what they really are. An example is a gear image. In most cases, such a gear means working with the settings of the service or application. If the designer suddenly gets the idea to set the payment function on the gear, then users will be deceived by their expectations.
As a positive example, we can highlight the action function highlighting — the user sees immediately what to click on to get the desired action. If there is no backlighting, the user will most likely also perform the right action, but it will take longer for him.
Also it is worth using the color palette that most people understand. Green usually means “all is well”, red - “error”. Change all places - and users will make mistakes, which will lead to irritation when working with an application or service.
In addition, the interface elements should be as clear as possible.
Above is an example of one of the elements of the Gmail mailbox interface. As soon as it appeared, technical support began to receive a huge number of questions about what it is and how to work with it. Users usually avoid interaction with those interface elements that they do not understand, and adding a new element loses all meaning if no one works with it.
And this is not the only unfortunate solution from Gmail - in the letter interface we see two arrow icons. And they look almost the same, although one of them is responsible for returning to the main interface, and the second for answering a letter.
A vivid example of how it is not worth picking up icons is stylized images of what can and can not be done with things that are drawn on labels for clothes and linen. This is sacred knowledge, accessible to the understanding of the few.
Another example of the implicit value of an icon is Apple's mail interface elements. What you need to click to write a message? A question from the "all 400" series.
Default settings should be clear and practical.
Many users often leave the default settings. Do not hope that someone will change everything and everyone, reshaping the interface or other settings for themselves. Why, for example, did Nokia's ringtone become so recognizable? Yes, because millions of users of Nokia phones, when they were common, did not change the ringtone. The users themselves heard the melody, they heard the people around them.
Almost no one changes the settings of TVs, tablets, phones. About 99% of the buyers of refrigerators never change the mode of operation of the device.
The interface, of course, is not a refrigerator, but by developing it, you should do everything as clear and convenient as possible.
Feedback from users
Animals, people and plants exist in response to external factors. Feedback, one might say, rules the world. For example, when we start talking to someone, we hear and see the reaction of that person. You start to stroke the cat - it purrs. You pet the dog -
it breaks loose and runs after you, with foam in its mouth, waving its tail.
When we interact with any interface element of an application or website, we also want to see feedback, some kind of “response”. For example, I pressed the button - there were a watch or a scroll bar. I sent a letter - I received a confirmation. And so in everything.
If there is no feedback, the interface elements are static, it is a bit confusing. A good example of how to organize user feedback is Gmail.
I deleted the letter - there was a message that it was already in the basket. Wrote a message - immediately appears the corresponding pop-up window.
It is not at all necessary to be like Gmail, but it is simply necessary to make a reliable and noticeable user feedback.
In the right place at the right time
This is often said and at least often forgotten. Interface elements must be of optimal size to perform their functions. It sounds a little difficult, but it’s about the fact that, for example, those interface elements that are designed to tap on them with your finger should be so large / small that you can hit on them. Apple and Google are asking developers to bring application interfaces in line with device specifications and features.
In addition, they should be noticeable so that the user does not spend precious minutes searching for the desired interface element. Visible they can be made with the help of color, brightness, size. Example - online clothing store. The main gamut of the site is white-gray-pink, but the “Add to Cart” button is orange, very noticeable on a soft background.
Navigation elements and some other interactive objects should be placed at the corners of the screen. So it turns out more intuitively. In addition, the user is more difficult to miss the desired object if it is located in the corner. A typical example is the Windows interface, where the main controls are located at the corners and edges of the screen.
In any case, the placement of interactive elements of the application or site should be user-friendly.
Do not ignore standards
"I am an artist - I see that." This phrase has been heard by many of us in different variations. Designers sometimes give an answer to the remark: "This is a new trend in design" or "We have done this a hundred times, we are experts in this matter." But all these are actually variants of the “artist”. The phrase is applicable in other creative areas - performance, filming, writing pictures. The interface must comply with certain standards.
It should be relevant to previous user experience with other sites and applications. If this is not the case, the application / service will be annoying; users will not put up with where everything is wrong.
An example of changing one interface element in an Android Pocket application is shown in the gif above. This element in 2013 was located where, on the recommendation of Android developers, there should be a “Up” button. But not wanting to duplicate some of the functions, the creators of Pocket decided to place the “Archive” button in the upper left.
As a result, the mass of new users of the application, instead of moving to a specific place on the page, archived texts.
We simplify everything where it is possible
One of the mistakes of the beginners (and in some cases the pros too) of designers is an unnecessary complication of the interface.
The above is an example of how not to do, in comparison with a more successful example. The task here is one - getting detailed information about the user. But if in the first case we need to immediately enter a lot of data about ourselves (or that guy), then in the second case, the same action is divided into several stages.
And it’s so much easier for the user, because we don’t intimidate him with a complex form — this is one time, and we simplify data entry — two. In most cases, the user will prefer to perform ten simple actions, rather than one difficult. All, of course, depends on the situation, but in general it is.
Another tip here: you don’t need to give the user too many options to choose from. Remember: the constant need to choose, let it even a minor choice, tires a person. What shirt to wear today? Go on foot or go by car? What news to read? We have to solve hundreds and thousands of such questions every day. When a person sees something similar in the application that asks him to choose a convenient background, screen brightness, font color, and all at once, the user can not bear this joy and stop working with the program or service.
Analyze
Each designer can consider successful that or other decision. But in fact, conclusions can be made only after analyzing data related to the interaction of users with the interface of the site or application.
In order to obtain such data, you need to install one or several tools to collect statistics. There are many such tools - Google Analythics (traffic analysis, page paths for users, demographics), Mixpanel (user experience with the application, user decisions), Check me now (UX analytics for online projects) or any other.
The main thing is that the collected data are analyzed, and the results of the analysis are used to optimize the existing solution.
And, of course, you should not try to break some established rules. Their violation in most cases will not lead to anything good. In addition, a modern interface designer should be able to either study the effectiveness of his work himself, or collaborate with analysts and marketers.
