The interface is a kind of "bridge" between the user and the system. Using the interface, the user will be able to explain to the system what they want from it, and the system will do it. But what happens if this understanding between machine and man is not achieved? The user will simply leave the site.
16 techniques for creating a user-friendly interface.
This is how Internet users behave according to the Online Marketing Institute:
- 85% can leave the site if they don't like the interface design;
- 83% will leave the site if they have to make a lot of clicks to find what they need;
- 40% will never return to the site if it was difficult for them to use it the first time.
The principles of a good interface are the same for websites, programs, and services. We have collected 17 main ones (and at the end you will find a small overview of how to test the interface for usability).
A good interface should:
1. Be intuitive.
The user interface is something that should be as clear as possible to most people. If a person, having opened an application or visiting a website, does not understand how to use it, then after pressing different buttons at random for a few seconds, they will be disappointed and leave the resource. Most likely forever.
An intuitive interface is one in which:
1) all elements are built according to the principles of elementary logic.
Take, for example, a site with text content (articles). Its logical interface will be like this:
- the name of the site is at the very top of the page, below it is a short description of the resource;
- a menu with sections of the site is below;;
- a block with contacts and feedback is in the upper right part of the menu;
- articles are arranged in the order they were added to the site;
- at the end of each article there are "next" and "previous" buttons;
- category buttons should always be visible so that you can go to another section at any time;
- site rules, detailed contact information, information about developers, etc. are located in the footer of the site, since this is where they are always searched for.
Do not confuse the user with non-standard arrangement of familiar blocks, use proven principles. As an example you can take marketer Heidi Cohen's blog which is structured in a clear and logical way:
2) the buttons are labeled clearly.
Avoid buttons that may be misleading. There is no need to reinvent the wheel. A large question mark immediately tells the user if there is any guidance or help behind it. A magnifying glass is always a search form on a site.
But what would you think if you saw a button on a website or in a program, for example, with a crossed-out square? Most likely, many users will not even dare to click on it, since they will not understand what this action will lead to.
And for the users’ better understanding of their actions, you can use button captions. They appear on hover.
3) there is help to the user if he is “lost”.
If the user got to the 404 page, immediately give him a short instruction on what he can do next. For example, invite him to go back to the previous section and look for the information he needs there.
Let’s consider another example - you have an online store. If the product parameters are entered incorrectly, the user sees an error message. Write right there what they should do to describe the product correctly. If the desired product is not in stock, write about how the user can receive a notification about the appearance of this product.
2. Be predictable.
In some situations, predictability may well be boring, but not when it comes to the interface. The user, looking at this or that interface element, should immediately understand how it will behave in the event of interaction. If the object looks like a menu, it should behave like a menu; if it looks like a slider, then it should move something accordingly. Creative thinking is, of course, good, but not in this case.
Here is an example of the interface design of the player program. The upper buttons (“previous” - “play” - “next”) should perform exactly these functions, and the slider should change the volume level.
A few more examples. If you make the buttons bulky, they will look more like buttons, so they will be more likely to be clicked:
And the on / off switch looks understandable when done like this:
One of the designers’ biggest fears is that they will be considered unoriginal. And as such, they often avoid using techniques that have long been proven effective and work in favor of making “something new and creative”. Of course, there is no need to openly plagiarize. But using the interface design models already familiar to users is a surefire way to make it predictable. What resources does your target audience most often use? Facebook, LiveJournal, Twitter, Amazon, Youtube? Use a similar style in your interface so they can feel like they are in a familiar environment. For example, if you are targeting Youtube, make the main menu vertical and place it on the left of the page, and center the search bar at the top.
3. Be minimalistic.
Trying to place as many categories, menus, buttons, etc. in the interface as possible, you will only do great harm to it. An overly cluttered interface is a big obstacle to the user’s understanding. Anything that can be described in one phrase should not be described in three. Extra elements and subcategories on the main page are also useless. Testing will help you determine which ones are "superfluous" and which are not (see how it can be done at the end of the article). But you shouldn't sacrifice something really important - if you know that without some explanation or an additional button it will be difficult for the user to navigate the site, then leave the button in the interface, but accompany it with as few words as possible.
4. Load quickly.
Slow loading of the interface will annoy and repel the user, causing them to increasingly dislike the resource. Make sure the download speed is optimal for your comfort. To a large extent, this is related to the previous point - after all, the fewer “heavy” elements on the site, the faster it will load.
5. Show all important options.
Use drop-down lists and menus only where it cannot be avoided. In other cases, try to show the users all their capabilities immediately. If some of the possible actions are hidden, the users may not even guess where they need to click to perform a certain action. And if these actions are targeted (“buy a product”, “place an order”), then they cannot be hidden at all in drop-down menus, on the contrary, they should be emphasized.
Have a look at an example of a drop-down menu that is aimed at being user friendly - hovering over the sub-sections opens the menu sections, which is quite convenient, The "Contacts" button, on the contrary, is visible immediately, without additional hovering.
6. Be able to communicate with the user.
The point is that the users must understand that their actions are currently being processed by the system. The process of sending a message should be accompanied by the display of the phrase "message is being sent", and the end of this process - "Message sent". If there is a failure in the system, the users must also be notified of this, as well as of the reasons for the error and what they can do in this situation. If the resource involves loading large amounts of information, then you need to place progress bars so that the user can monitor the state of the system.
7. Have different styles for buttons with different types of actions.
In any interface, each button has its own purpose: go somewhere, open a menu, open in a new window, download, and so on. In order not to confuse users, follow these rules:
1) clickable and non-clickable elements must be different. You can highlight them with color, font, size. The users should immediately see which buttons they can press and go somewhere, and which are provided just for information.
2) highlight with color or style the section of the menu in which the user is currently located.
8. Be attractive.
Functionality and convenience are good, but there is also an elementary “beautiful/not beautiful” notion. Any user will find it much more pleasant to deal with the interface, which, among other things, also pleases the eye.
But don't forget that beautiful design is subjective. You won't be able to make it equally beautiful for everyone, no matter how hard you try. Anyone will agree that when developing a resource for high school students and a resource for accountants, you will need to make different design decisions. Therefore, first of all, focus on your target audience and their needs.
9. Provide the ability to personalize.
Personalization is the ability to customize something “for yourself”. Most often, this function can be found in programs, services and applications. The user can change, for example, the font color, icon style, background image, the size of the text blocks as he likes (choosing from the proposed options, of course).
In the Trello service, you can change the background to a different color or image.
10. Be loyal to user errors.
And yet, there will always be users who will not be able to understand something immediately while working with the interface. They will make erroneous actions, and then the interface is faced with the task of making sure that these errors can be quickly corrected. If the user accidentally deleted the information they needed, they should be given the opportunity to restore it. A user who wandered into the wrong page should be able to quickly return to the previous page or section by pressing the "back" button. To prevent erroneous actions, the interface should ask the user again whether they really want to do this. For example,
“When you close the current page, the download of the file will be interrupted. Do you really want to do this? " However, do not overdo it with such questions, otherwise it will become annoying.
11. Speak the user's language.
All interface text, any designations should be created for the target audience of the resource. Everything is obvious here: if you are making an educational website for preschool children, then the text of the interface should be written in “children's” language. If you have a program for advanced webmasters, then you can safely use specific terms without explanation - the target audience already knows them. And if this is a service for beginners, then the language should be as simple as possible.
12. Provide the optimal number of choices.
The more options you offer the user, the less likely they are to take any of them at all. If there are really a lot of options, and you cannot reduce them (for example, a product catalog), then use the recommendation function. For example, you offer ten product options on one page, but select one or two of them in the “We recommend” category. The client will pay attention to these products, which may make his choice easier.
13. Giving soft prompts.
Tooltips are very good. They help the user to understand fully what they could not figure out themselves. The main question remains how to make these prompts effective and stress-free. Remember the paperclip from earlier versions of Microsoft Word? The company turned this feature off precisely because it caused a lot of negative emotions from users and was criticized.
To keep users loyal to the tips, stick to these points:
- do not write too much text in them;
- do not connect hints to each button, but limit yourself only to those where the user may really have difficulties;
- enable the user to close the hint or completely disable the hint function.
14. Have short registration forms.
Getting the user to register is an important and one of the most difficult tasks of the interface. Usually people try to avoid registering on sites that they are not going to visit regularly, or that they are not yet sure about. And often they even refuse to buy in an online store, if this requires mandatory registration, and go on to look for their goods on other sites. So that users do not feel hostility towards the registration process, you need to make it as fast and easy as possible. Do not use long registration forms where you need to indicate your entire biography. Limit yourself to the most essential lines.
15. Have simple principles for filling in the fields.
Almost every site offers users something to fill out on it. In addition to registering on the site, this can be an ordering goods, please leave your contact information or take a survey form. If you make the form too complicated or stressful, no one will fill it out. Several important tips follow from this:
1. When filling in different fields (“city”, “street”, “date of birth”), it would be good to give hints to the user using a dropdown menu so that they do not need to enter all this manually, but simply select the desired option from the list …
2. If the user still needs to enter their data manually, then use the line-by-line system to check that the form is filled out correctly. No one will like it if the system, after each filling error, will reset all the lines filled in earlier.
3. Field names are best placed above the input lines. It has to do with human visual perception. It is easier for a person to perceive information from top to bottom or from bottom to top than from left to right or vice versa.
4. Minimize the chances of filling out the form incorrectly.
Imagine the situation. You start typing your phone number in the field. After the first filling, the system tells you: “The phone number must be entered in 10-digit format”. You enter again, and the system gives you: "The phone number should not contain hyphens." And then you will already start to get nervous and mentally curse this site (or maybe not mentally). The ideal input form is when the user can write anything into it, and the system will not tell him “wrong”. Of course, data processing will be somewhat difficult, since you will have to process some of the requests manually. But your main goal is to take the order, not weed out impatient customers.
16. Provide convenient control options.
If on sites we mainly use a mouse (except for the standard functions "copy / paste", etc.), then in programs and applications it is often convenient to control from the keyboard. Let users choose the kind of control they like best and show which function corresponds to which key combination.
How to test the interface for usability?
Ann, as we promised at the beginning of the article, we are now going to tell you a little about testing the interface. Why is this so important?
- firstly, during the development of the interface, errors could creep into it and that will affect the operation of the entire program or resource;
- secondly, you can never immediately nail the optimal interface design, the one which will be perfectly perceived by most users;
- thirdly, the interface can be displayed normally on one device (or in a browser), and be completely incompatible with another.
Testing can solve all these problems. How can it be done?
1. By hand.
Such testing will require a lot of time and physical resources, since the whole process will be carried out by a person. But this is also the plus of manual testing. To implement it, you will need a tester who will check step by step how the system reacts to a particular user action. The most convenient way to do this is to create a special table into which all the data will be entered.
2. In an automated way.
This method of testing is carried out with the help of special software, which, as it were, imitates the actions of a living person during manual testing. This testing does not require human intervention, so the speed of the test increases and the cost of money decreases. There is one big “but” here. Automated testing cannot give 100% results, since it is carried out only on formal grounds (those that are hammered into the program) and does not provide an opportunity to find usability defects that can only be perceived by a human (for example, the color scheme of the interface).
3. Using focus groups.
In our opinion, this is the best testing method in terms of price-performance ratio. It is carried out as follows:
- Several focus groups are recruited, consisting of your target users. You can divide groups according to different criteria: registered / unregistered, regular / rare users, as well as according to different demographic indicators (which fit into your target audience);
- each group is given tasks to perform certain actions on your website / service / program. You have to tell the subjects what they should do, but don't say how. This is the essence of testing - to see what actions users will use to achieve their goal.
- after all this, you analyze exactly how the subjects performed their tasks - where they clicked, which links they followed, whether they quickly found what they wanted, etc.
When designing an interface, remember that too much attention to one characteristic can significantly harm another. By removing some elements in an effort to achieve minimalism, you can create problems with the understanding of the user interface. By embodying the characteristic of attractive design, you run the risk of overdoing it and making the interface too heavy to load quickly. Therefore, the most important (and most difficult) in this whole story is to maintain the perfect balance of all interface properties, and then it will be truly user-friendly.