15 steps to improve usability

Meet on clothes, see off the mind. This old saying says, among other things, the importance of a first impression. This is true not only for people, but also for software products - websites and mobile applications. One of the most important points in the formation of the attractiveness of a network project is the convenience of its use - usability. And when a person first gets acquainted with a website or application, first impressions often determine whether he will return to this product again and again. In other words, usability is one of the key properties of a site that form (or destroy) an audience. Let's look at some common and often overlooked user behavior scenarios, as well as ways to improve usability at the most important stages of interaction with your website or mobile application.

Clear and informed interaction

1. Choose font sizes

People are surfing the net more and more using mobile devices, and for some sites the mobile version has become the main one. And this dictates its requirements for font size, because the screens of smartphones and tablets are much smaller than conventional monitors and laptops. The proliferation of responsive design has played a big role in drawing attention to the font problem.

Often, site creators focus on the usability of buttons, icons, tabs, and other objects that you need to click on. And few remember about the convenience of clicking on text hyperlinks. Therefore, always conduct live tests of the comfort of clicking on hyperlinks with your fingers.

2. Write informative error messages

Many neglect the selection of wording for error messages, considering them to be something secondary. Developers usually know how to avoid incorrect actions in their products, and therefore rarely encounter such messages.

But real users cannot boast of it.

If the user has a poor understanding of what to do after an error message occurs, then he may even abandon your product. Therefore, the text of the message can be playful, but at least it should help users quickly figure out the reason and avoid failures in the future.

Try to avoid specialized terms, write messages in a public, understandable language. No need to dump information to the user that he cannot use. If desired, even verification errors can be rephrased to make them sound more friendly. Compare two versions of the same screen from one popular operating system:

Convenience of input forms

3. Simplify password requirements

Today it is customary to require users to create complex passwords. But this must be done positively, with encouraging help, and not in the form of an insurmountable harsh condition. Many input forms look very nice, but completely uncomfortable. Although the usability of this interface element can have a decisive influence on the success of the entire product. Unsuccessful decisions can push users away already at the stage of entering a login-password, or at the time of placing an order. Therefore, you need to pay close attention to the convenience of using forms.

For example, it has historically been found that select boxes are difficult to style. In most cases, developers try to hide standard objects and clone them as more suitable DOM elements. In this case, the data from the "clones" are transmitted to the input of the original elements.

You need to spend a lot of time just to get the opportunity to manage the design of the usual drop-down menu. But is the game worth the candle? We must not forget that mobile users very quickly get used to the appearance and behavior of the standard interface elements used in their operating systems.



For example, Windows Mobile users expect that when you select a drop-down menu, the list of options opens in full screen, separate from the field itself. While Android users expect to see a modal window. And if for the sake of your design ideas you do not live up to such expectations, then users may not appreciate your decisions at all. Most likely, it will be more difficult for them to work with your product, which will negatively affect their experience. In other words, changing the design of standard elements will create more problems than you solve.

4. Use the correct input forms

Many advise using data formatting in input fields. For example, if you add input[type="email"], input[type="tel"], then the input automatically switches the layout. However, it looks strange and does not help at all, but hinders the filling out of the form.

If you have several input fields, it is better to assign one data type to them. It’s much easier for the user when the same layout is used during input, and jumping from letters to numbers and back only introduces additional confusion.



Using different types of input in HTML 5 is advisable only when there are as few fields as possible on the screen. A good example is Google’s two-factor authentication: there’s only one field in which you can enter only numbers. It will be very appropriate to automatically switch to a digital layout.

But in more complex forms, such “helpfulness” and “initiative” of the keyboard can be annoying, since it makes the user mentally switch, increases the cognitive load. Especially when switching from letters to numbers, and vice versa:

5. Organize a vivid and memorable first-time experience

If a beginner is disappointed with your site or application from the first seconds, then this is akin to the rudeness of the owner when meeting guests. No matter how tasty the treats, the meeting will be hopelessly ruined.

A developer can easily overlook some initial use case scenarios for his product. For example, it is difficult to call an intuitive screen full of icons or sections. You can mitigate your first use experience, for example, with helpful hints and warning messages that you can easily turn off.

6. The devil in the details

All sorts of little things can play a big role in facilitating the development of your product. For example, the familiar standard cursor in the first input field will allow you to plunge into the interface faster and more painlessly. Ideally, the user should “navigate” the site or application on “autopilot”.

The lack of experience for new users with your product is reflected in the fact that some functions can cause serious difficulties. Remember the Microsoft Office Paperclip that suddenly got out and offered its help, which was more annoying.



Directing a successful first use experience is like walking a tightrope - it’s very difficult to do everything right, but if you succeed, then it is more than rewarded with user recognition. For example, the Stumbleupon projectvery successfully teaches beginners their basic capabilities.





A good solution is to integrate the learning process into the normal procedure for using the product. Suppose, when archiving letters in a mail application, you can get the message “Do you know that you can start archiving using Ctrl + K?”. This approach allows you to educate users much softer compared to traditional lessons in the style of "overview of the entire application."

7. Microcopy should not be used retroactively

Microcopy refers to all the small instructions and confirmations used in applications.

• “Don’t worry, we won’t let your mailing address leak”
• “No credit card required for payment”

Microcopies are an ideal tool for building trust and improving your experience. Also, with their help, you can very effectively train users who are not too confident in working with your product.

For example, linking a bank card or providing email to many users is a pretty controversial issue. And if you can’t imagine some time-tested, respected brand, then people will always be afraid to provide you with such information. Microcopies can help with user concerns

8. Always ensure context

Users hate the lack of context. Considering what kind of information flow they constantly have to cope with, people try to abstract from everything superfluous on the screen and focus on specific things. When endless scrolling came into fashion, many sites ran into one problem: as soon as the user mistakenly clicked somewhere, the current position was reset. This is especially unpleasant in cases where a person flipped through the contents of the site very far down. After five scrolling screens, a random click can cause irritation.

Most sites today solve this problem using modals and other schemes specific to single-page applications. For example, in Pinterest, when you click on a tile, not a new page opens, but a modal. This allows you to study the details of a record without losing the current position and without waiting for a new page to load.



The Facebook mobile application uses the same approach: if you click on a photo in an album, it will load in a full-screen modal. It almost looks as if a new page has opened, but when you click the "Back" button, you are carefully returned to the context.

Very popular today material designfrom Google has taken to a new level the use of animation to provide context. Clicking on an object starts an animated flow from the current page to the loaded information about the object. This clearly shows the logical relationship, where that comes from and where the user will return.

Although it would be even better if a similar animation was displayed upon return. A good example is working with notifications on Stackoverflow. When you click on a message, you get to the corresponding page, and you are transferred immediately to the desired content. Very useful, but they went even further, and implemented a return to context using unobtrusive animation. It gently but effectively directs the user's attention to exactly where it is needed, helping to filter visual “noise” on the screen.

9. Atomic actions

It is often easier for users to perform some action if all other elements that are not related to it are darkened or masked. This solution helps to reduce cognitive load and simplify the work with the interface.



One of the great examples: the modal “compose new tweet” window on Twitter, which is a module for performing one of the most important actions in this application. After all, Twitter will die if people stop tweeting. As you can see, everything here is aimed at ensuring that the user can focus on writing text without being distracted by anything superfluous.

This approach works best when performing atomic actions. At the same time, you can provide everything you need to complete an action within the same module.

10. Error messages

It is also very important to provide users with context. Using error messages, you can immediately highlight specific input fields that you need to pay attention to.

Sometimes error messages are so stupid that they do not help the user solve the problem. Always try to immediately immediately tell where exactly the user should solve the difficulty.



The Basecamp registration form is presented above, in which not only the required fields are highlighted, but also a text prompt is given for filling. You probably think that if there are only two or three fields in the form, then everything is so obvious that the user does not need to be helped. However, even in this case, it is recommended to focus people's attention on problem areas, this is much more useful than just dumping them a list of errors, as is done in Amazon:

11. Concentration of notifications in one place

Thanks to the spread of single-page applications, we are able to unify all kinds of custom notifications. The line between native and web applications is becoming increasingly blurred. When an application needs to interact with the user, then it is much easier to send all messages to some particular place, rather than placing them in context. Although there are exceptions to this rule. A good example of a notification repository is the Gmail inbox. A module for organizing notifications Growl will not let the user not notice an important message.



In Feedly, notifications are always located in the middle of the page header. This instructs the user to always look for important messages in this zone, even while performing some actions and leaving the original context. Here is a convenient function for moving to the next article when the user marks the current article as read.



In Feedly, all notifications are global and always appear in the same place. At the same time, the links and the list of necessary actions are clearly separated from the text context.

12. Avoid deadlocks

Modals are a convenient thing, but you don’t need to use them to block the user's actions, not allowing him to work with the application until he does something in the modal. Such deadlock states leave no choice but to cancel the current operation. In some rare cases this may be necessary, but it is still recommended to avoid such situations by all means.

13. Give the user control

A carousel without navigation buttons leaves the user with very few control options. This outdated approach provides far from the best user experience due to too many variables. It’s especially bad if you place a carousel at the top of the page: it is very likely that this will be the first thing a user encounters in your application. And the inability to control these elements sets a bad tone in your relationship.

It is best to adhere to a simple rule of thumb: only respond to explicit user actions. If you do not know exactly what he wants, then give him the opportunity to manage.

14. Avoid scattering attention

JavaScript warnings are very distracting. A person has to switch from a page to notifications that require attention. Therefore, use them only when absolutely necessary, and in other cases, use milder alternatives .

Users, especially mobile ones, do not like when the contents of the screen suddenly change. This should be resorted to only in response to explicit user actions. For example, feeds on Twitter and Facebook are forcibly updated. Otherwise, you would get an unpleasant situation when you read a message, and at this time the background process updates the feed and dumps you a bunch of new messages that bury what you read before. It's like a gust of wind pulling a newspaper out of your hands.



Fortunately, Twitter delicately informs the user about the appearance of new messages and waits for the user to give a command to download. That is, a person completely controls the change in the contents of the screen and is not confused.

15. Break large complex tasks into smaller operations

No one likes filling out a full page form. Therefore, all kinds of settings sections, registration forms and profiles will only benefit from a logical separation into smaller blocks. Use cards, sections, tabs, side panels for this. It will be easier for a person to perceive the need for multiple fillings, even if there are several logical blocks on one page.

Partitioning into logical blocks subjectively simplifies the task of configuring and filling in numerous fields, and prevents the sensation of unpleasant work. This is especially important for mobile applications and site versions.



For example, Facebook has honed the grouping of privacy settings for several years to make it easier to configure. But once it was such a non-trivial task that many simply did not touch these settings. After dividing them into sections, the proportion of users who work with these pages rather than avoid them has increased.



Another good example of splitting a large task into logical blocks is the checkout process. For many web applications, this procedure becomes a critical point, an indicator of project success. When placing an order is divided into stages, then when they pass, users have a sense of progress, progress, even if not everything goes like clockwork.

Logic blocking also makes it easier to detect and solve problems. After all, no one wants to deal with a message like “Could you fix the following four points?”

If you force the user to fill in all the fields or configure the settings on one difficult page, then you will put the eggs in one basket. Any error will prevent all other data from being sent.

The same can be said about the forms of donation, especially in mobile projects. You probably want the user to think: “Wow, how simple it is” instead of “Yeah, it takes time.” Improving the usability of forms directly affects the profitability of the project.

* * *

Most of the above points are quite simple when you consider them separately. But if you work with it every day, the eye is often blurred. Therefore, it is important to be able to step back, abstract and look at your brainchild through the eyes of a “new user”.