November 14, 2011 at 07:02 pm

Usability principles: clear, convenient, comfortable. Briefly about the main thing

• Digital Professionals Hub Blog

IN modern world Understanding the basics of usability is a must. Most website visitors do not take the actions that resource owners expect from them. People don’t order goods, don’t register, don’t subscribe to updates, etc. What is the reason for this user behavior?
The reason is simple - the resource turns out to be inconvenient for the user. For example, in order to “order” a product, you have to go through several pages, and the registration button is completely impossible to find. This makes the resource uncompetitive.
How to reduce the number of refusals to use the site? If a project needs a thorough approach, you can contact the studio and specialists. Usability labs offer not only various options testing and interface design. And if your budget is limited, you can try to learn the basics of usability yourself.

To develop an interface yourself, you need to consider a few simple rules:

1. Rule of 7.
   It is known that the abilities human brain not unlimited. A person is capable of holding short term memory no more than 5-9 entities. Therefore, you should not place more than 7 items in the navigation.
   From this point of view, the site tutu.ru certainly deserves good reviews, since the main functionality was placed in the site header, limited to 4 menu items and a drop-down list.
   While the Russian Railways website is an excellent example of what not to do. The amount of scattered information makes your eyes dazzling, you just want to close it and never enter again.
2. 2 second rule.
   The less a user waits for a response from a program, website or application, the greater the likelihood that he will not give up using this product. 2 seconds is the optimal time interval for the program’s response, and this is what you should strive for. So you should think a hundred times before installing a heavy flash screensaver on your site, as they did on mtv.ru.
3. 3 click rule.
   Nobody likes to surf pages looking for the necessary information and functionality. The visitor should be able to get from the main page to any other page of the site by making no more than 3 clicks. This also contributes to more successful indexing of the site by search robots.
4. Fitts rule
   A model of human movement published by Paul Fitts in 1954 determines the time required for fast travel to the target area as a function of distance to target and target size.
   Metaphorically, the rule can be explained as follows: it is easier to point to a lighter than to a match. But pointing to a cliff or a huge airship is equally easy. If an interface object, such as a link, is already quite large, there is no point in making it even larger.
5. Inverted pyramid
   Usability guru Jakob Nielsen himself adheres to this principle. The article should begin with a summary statement, followed by key points, and end with the least important information for readers. This is optimal for the web, where the user wants to get information as quickly as possible.

But even an interface designed according to all the rules is worth testing. Focus groups are the most affordable way for testing on your own.

Testing consists of four stages:

1. Focus group selection. Testers must match your target audience. You shouldn't ask grandma to test an application to find driver updates.
2. Drawing up a test plan– a list of tasks for which your product is designed. This is the list that testers will follow. If you are running an online store, the list should include such tasks as searching for a product, obtaining information about a product, the path from receiving information about a product to ordering it, and removing a product from the cart.
3. Testers complete a list of tasks and fix errors. Anything can be considered an error: a captcha that is too complex, a lack of a message from the server that “an item has been added to the cart,” the inability to change the number of items in the cart or cancel an action, etc.
4. After identifying and correcting errors, the testing cycle must be completed again. The cycle must be repeated until the results meet the necessary requirements.

Interface quality assessment should be carried out at each stage of the project. Don't leave usability testing until the very last moment. Serious errors simply cannot be corrected due to the fact that the project is in its final stages. And then - either redo it again, or get a low usability score.
As a rule, 5 testers are enough to identify major bugs.

Example on topic

Finally, let's look at typical mistakes using the example of the site of the famous performer Vlad Topalov. Suppose we want to arrange a performance with his management and want to find their contacts on the website. And this is where the quest begins!
The first thing we see on the site is a black splash screen with an “enter” link and a proposal to update the flash player.


The “enter” button sounds like a call to get to the main page of the site. But instead of the main page we find ourselves on a “blank slate”.


Here the image of a red ribbon catches our eye, and we, of course, think that this is a link, and maybe even to a menu. But no - this is just a symbol of the fight against AIDS, which is intended to indicate the singer’s social position and nothing more. And then the hand reaches to the upper left corner. And there’s not a menu at all, but a button full screen mode. A few seconds of confusion, and the search is over, the coveted menu is at the bottom, in the center of the screen. Click... and see the PLAYER! We have been deceived again.


While the clip is broadcast in the player, we continue to search for the menu. Now it is at the top, in the very center. In the drop-down list, we finally see the coveted word “Contacts”. But even here, not everything is so simple. These contacts cannot be copied. You'll have to rewrite it manually!


Now about the numbers. The waiting time for a response may vary depending on the connection speed, but in any case it will be more than 2 seconds. And the path to the management contact page took 7 clicks. Or it could take just one.
Vlad Topalov, of course, can afford such “creative” solutions. But it is obvious that such decisions are simply disastrous for business. 11/17/14 2.8K

Click on the link - view - close page - search again. We perform such actions every day, visiting hundreds of sites, almost without thinking. Some resources fly by “like plywood”, while others are added to bookmarks. It seems that this process is difficult to comprehend; some are simply lucky and others are not.

If you enter any query in the search, you can get a huge number of sites with suitable information as a result. But for some reason the same resources are popular, leaving competitors far behind.

This superiority is even more clearly manifested in the service sector, when some online stores sell a lot and at high prices, while only immediate relatives buy from others.

So why do people go to some people and stay for a long time, while they run away from others like fire? The answer to this question is the same as to “Why did you buy this sofa and not that one?” Because it's more convenient:

The comfort of the sofa is expressed in the softness of the fit, ease of transportation, non-susceptibility to contamination and “ How does it match the color of your eyes?! The usability of the site is responsible for such factors in web development, and a person working in the field of Internet business must understand the basic principles of ensuring the convenience of resource users.

What is usability

Usability should be understood not only as specific technical aspects that ensure the convenience and ease of use of the site. Applicability in the environment for which the project was developed is also taken into account. In other words, the requirements for a sports news website and video hosting will be completely different.

In order to understand the difficult issue of user preferences, it is worth highlighting the basic principles of website usability.

• Content. Information content resource is the basis, the core, without which the site makes no sense. It is important for visitors to easily perceive the text and extract everything from it. necessary information. If this does not happen, the person will not rack his brains again and will go in search of something more understandable;
• Functional. Anyone who has written a couple of programs in life can say with confidence that nothing works right away. Errors can be obvious, or they can hide and reveal themselves at the most crucial moment. During the operation of the site, especially in the first stages, shortcomings are constantly identified, and it is very important for developers to respond to them in a timely manner. If some function of the site does not work ( or is executed incorrectly) for a long time - even the most dedicated users will not understand this and will be merciless;
• Cross-browser and platform independent. If you think your loved one Internet Explorer- the one and only, then ask Bill Gates for a pie from the shelf:

It is important to ensure the correct display of the site in all most popular browsers. Concerning operating systems, then it’s worth remembering something other than Windows or enjoying a second pie.

There are, of course, noble perverts who can perceive red text on a green background, but most visitors will refuse such pleasure. In addition to color solutions, the site design implies mutual placement " building blocks» pages such as menu, logo, text field and so on.

It is important to understand that the visitor is able to positively evaluate originality, but within reasonable limits. The design should highlight the information rather than take center stage.

• Navigation. Visitors want to know their location and also understand where to go next. The presence of areas that are difficult or impossible to reach significantly limits the capabilities of the resource.
• Structuring information. Everything in the world is subject to logic, and informational resources should not be an exception. As the user moves deeper into the site, the user should receive more and more details on the issue under consideration. For example, a visitor searches for “ What meat to feed sheep“, then the starting point should be the section “Mammals”, and the ending point should be the subtitle “ What do sheep like for an afternoon snack?».

Why is this so important

Despite the fact that people use the Internet, many sites are not created in order to discover something new for a person or expand existing information. Everyone is hungry for money, and is constructing their resources for advertising.

It would seem, why follow usability standards if the site is not created for the benefit of humanity, but solely as a source of income?

• Usability affects conversion. If a page is created for the user to take some action, then he must find, understand, think, perform and do all this quickly. If the visitor is confused even for a second, this may force him to leave the site;
• Usability affects traffic. If a user has a positive experience while visiting your resource, he will not forget the pleasant experience. A site where everything is clear and actions are completed quickly will become popular. If it is uncomfortable to be on the pages of the resource, and it is inconvenient to perform actions, you will be content with one-time visits and a bad reputation;
• Adding advertising should not reduce traffic. Usability rules provide for the proper placement of objects on the page. If the site has grown to become the first advertisers, then the banners should be harmoniously combined with the main content of the resource.

We should not forget that even if a site is created to make a profit, without visits there will be no money. Therefore, it is necessary to create maximum convenience for users so that they choose your resource.

How to achieve convenience

If we talk about the specific usability framework into which the site should fit, then it is necessary to take into account the functional requirements that visitors place on the pages of the resource. There are some important practical points to note.

Online store

When a site needs to sell something, in addition to the general norms, there are specific features. Let's look at the basic usability rules for online stores.

• High-quality visualization of goods. When a person spends his money, he should know what. Nice photos will help awaken the visitor's purchasing interest. But it is worth remembering that the image must correspond to the real object;
• As much as possible fast loading pages. If a person decides to buy, it is important that nothing stops him;
• The more the buyer knows about the product, the better. You should carefully work out the description of all the details, then the trust of visitors will increase significantly. For example, it will be very useful for customers to know whether a product is in stock;
• Help your visitor find the product they need. It is quite difficult to create convenient navigation with an abundance of categories. When a user views information about a specific product, you should unobtrusively offer him similar ones. Perhaps in this way a person will find what he needs or think “ Should I buy both??»;
• The elements responsible for performing targeted actions must be clearly identified. The “Buy” button should immediately catch the eye, because it is precisely the purchase that you are seeking from the visitor.

Audit required

A website usability audit is a comprehensive study that can be used to identify resource problems in terms of usability. You can do this work yourself, but it is better to entrust the matter to people competent in this area.

They will determine user needs and compile a detailed report, which will include:

• Analysis of the audience for which the resource is intended;
• Tasks that the site performs;
• Full description and analysis of functionality;
• Analysis structural organization and recommendations for its improvement;
• Some tips for attracting advertisers;
• Technical parameters of the site;
• Analysis of the structure and content of content.

Quantitative performance assessment is also used user interface. The calculation takes into account:

• the time the user spends deciding to take an action;
• button press time;
• transition from one input device to another;
• time spent searching for an element on the screen.

How to test usability

To obtain the most complete data for further improvements to the project, it is necessary to conduct site usability testing. It consists of a subjective user assessment of individual pages or the entire resource as a whole.
You can select respondents yourself, or you can use the services of special organizations. There are also online services that can help you conduct quality testing.

Below are some of them:

Thus, analyzing the usability of a resource allows us to identify the main problems in terms of user convenience.

You can entrust site testing to experts, do it yourself, or use the help of online services.
For Internet sites, users are clients, and the client is always right.

Good bad

From the author: Today we have a very important topic - the principles and rules of website usability. Many books and articles have been written about this. The greatest minds of mankind have developed their own formulas for the ease of use of a website. It would seem, how can you please all Internet users, because they are so different? But, as research shows, there are certain patterns of user behavior on the site that must be taken into account when developing it. Of course, if the purpose of the resource is to attract traffic and make a profit, and not to intimidate with acid colors, flashing banners (or better yet, with sound) and mysterious navigation.

Principles of interface usability

Most main principle, which should run like a red thread through the entire interface, sounds like this: “the simpler the better.” Its meaning is that using standard techniques for designing web pages makes life much easier for the user.

After all, if he has already seen similar navigation somewhere, the location of buttons and menu items, he will know how to use it all. This means they will feel confident on your site. For convenience, I have divided the remaining principles of website usability into several semantic groups.

Principle 1: Navigation. Horizontal and vertical menu.

The basis of website usability is convenient and clear navigation. IN horizontal menu There should be main sections, and additional ones in the vertical section. IN Lately More and more often I come across sites without vertical menu, that is, simplified to the limit. But this depends on the characteristics of the resource and the content posted on it.

JavaScript. Fast start

If, having gotten rid of the vertical menu, you end up with a complex and confusing horizontal one, then it is better to refrain from this technique. In addition, it makes sense to duplicate the main menu in the footer. If your site has a complex structure, make it separate page, where in the form of a tree-like, intuitive list, display a list of all categories and subcategories.

Principle 2: No errors.

Testing and testing again. Every day. No weekends or holidays. The site must work correctly, because every second of its incorrect operation, every link leading to nowhere, or button to a non-existent page will cost you visitors and customers. No one will linger on a non-working site. And don’t forget to design the 404 page in the style of your web resource.

Principle 3. Correct design of the site header.

It is at the top of the site that people spend their gaze more often and longer. Some people are even too lazy to scroll down the page. I confess, I also belong to this group of users. If the header doesn’t contain the information I need (menu, contact information, phone numbers, etc.), I’m unlikely to waste time looking for it. In general, you understand - in the header we place all the data that we would like to draw the attention of clients to, first of all.

Principle 4. Free space.

You've probably come across sites where every extra centimeter was "plugged" with something - some kind of banners, icons, buttons, animation. Bored text, a bunch unnecessary information, brrrr. Such sites should burn in a special hell for those who do not know the principles of usability and the psychology of perception.

Real web design masters will always leave free space, and the text will be formatted with normal line spacing to make it easier for the user to breathe and the information to be perceived easily and accessible.

Principle 5. Quality text.

The quality of the text includes not only its semantic component and the absence of errors, but also correct formatting. About line spacing I have already mentioned, it remains to talk about techniques that can attract more attention to your content. This:

presence of headings and subheadings;

allocation keywords and important information ( in bold, footnotes, markers, etc.);

JavaScript. Fast start

Explore JavaScript basics on practical example on creating a web application

use of numbered and bulleted lists;

breaking the text into paragraphs consisting of 3-4 sentences.

Principle 6. Site search.

It would seem that it is already clear that a web resource should have an internal search. But no - quite often there are sites on which there is not even a hint of this most important element of usability. But most users come to a website with a clear goal: to find some information quickly.

Having done search bar and filter, you will make both yourself and potential clients happy. They will find what they need, you will increase your conversion and, perhaps, get a regular customer.

Principle 7. Loading speed.

Continuing the previous requirement for website usability - people are very impatient, they come to the Internet for information and want to get it as quickly as possible. According to Nielsen Norman Group research, users spend an average of 27 seconds on a web page and rarely scroll to the end. This happens because there is a lot of junk and useless information on the Internet - if people studied every resource in detail, they would go crazy.

Therefore, you have only a few seconds to tell the visitor about yourself, interest him and encourage him to further actions. And if most of this time allotted to you is taken up by loading the site, then there is no chance of attracting potential client you have practically nothing left - it will simply go to another site. This question, how to attract and retain a visitor, is what usability deals with.

Briefly: What is usability? How, when and where can it be improved? Why should you even care? This article provides answers to these basic questions.

What

Usability is qualitative sign, which determines how easy the user interface is to use. The word "usability" also refers to a set of techniques used to improve an interface during the design process.

Usability has five quantitative components:

• Learning ability: How easily can users complete basic tasks when encountering an unfamiliar interface for the first time?
• Efficiency: Once users are familiar with the design, how quickly can they complete the same task?
• Memorability: Once the user returns to the interface after a certain period of time, how easy will it be for him to regain his skills in working with this interface?
• Errors: How many errors does the user make, how serious are these errors, how easily can the user correct these errors?
• Satisfaction: How pleasant is it for the user to use this interface?

In addition to usability, there are many other important quality attributes of design. One of the key ones is utility, which describes the functionality of the design and answers the question: is the interface what the user needs? Usability and usefulness are equally important: what good is a program, even if it's easy to use, if it doesn't do what you need? A program that hypothetically does what you need, but you cannot work with it because of its complex interface, is also bad. To study the usefulness of a program, you can use the same methods that you use to study the quality of its usability.

Why

On the Web, usability is a necessary condition survival. If a website is difficult to use, visitors will simply leaving from him. If the home page of the site does not clearly and clearly state what the company does and what tasks the site allows you to perform, visitors leaving. If the site is confusing, visitors leaving. If the information on a website is difficult to understand and does not answer key questions from visitors, they leaving. Did you get the idea? There are no such visitors who carefully study " reference guide on working with the site" or spend their time mastering its interface. Web is complete There are plenty of other sites out there, so leaving a site is the first instinct visitors have when they encounter a problem.

The term “usability” refers to the convenience of a website for the user. Today it's very important parameter, which can seriously affect the promotion of the resource. If the site is convenient for the user, then he will spend more time on it, which affects behavioral factors, which, in turn, are reflected in positions in search engines, and they are paying more and more attention to the user’s actions, it can be assumed that over time this trend will only intensify.

When we're talking about about sites with several pages (business card sites, etc.), they rarely think seriously about usability - this is not necessary. Enough good design and content. But in the case of large and complex projects, you have to seriously rack your brains over usability.

Why is this necessary?

According to various studies, on average people spend about 30 seconds on one page. In addition, few users view the page to the end. This is explained a huge amount websites, many of which contain useless or bad information. People are used to this, and they need to be hooked literally in the first seconds.

In addition, a person should easily navigate the resource; navigation should be intuitive. There are a number of standard and effective solutions, but I will talk about them below.

It turns out that a site with good usability should immediately grab the user’s attention and retain it, and also allow him to easily get into any section, even if he is on your resource for the first time.

Many developers strive to simple solutions, which is absolutely correct. IN in this case simplicity is the key to success. In some cases, simplicity is sacrificed due to necessity, but you always need to be very careful. For example, green text on a black background will definitely attract attention, but it will be inconvenient for anyone to use such a site.

We make a convenient website

How a person perceives information

Jakob Nielsen conducted a study in which he created a map of the movement of a user’s gaze on a website. Most people perceive information like this:

The image shows people looking at left side screen. This happens subconsciously. That is why menus and other most important elements on the site are most often added to the left side. This has already become a standard, so in this case there is no need to invent anything new. People are accustomed to the fact that the menu will be either on the left or at the top of the site. Other solutions can disorient a person.

Three click rule

A long time ago, someone came up with the three-click rule, according to which a user should go from any page of the site to any other with no more than three clicks. Obviously, this is not suitable for resources with a complex structure. Example: " Home page– store – bicycles – mountain bikes – brand.” It already turns out that a person needs to make four clicks. But in this case we cannot say that this is bad.

If you exclude any item, for example, “mountain bikes,” then the user will have too many products on the page, some of which he does not need (for example, road bikes). This example shows that on sites with a large number of pages and a complex structure, you need to think not about three clicks (or any other number), but about user convenience.

About navigation

• the presence of a logo at the top of the screen, which leads to the main page;
• contact information is in the footer if we are talking about a selling site;
• links should be visually different from the text.

It is stupid not to comply with these standards. Simply because all users are already accustomed to them. Their observance can be called the basics of usability in the field of navigation; there’s definitely nothing worth inventing here, unless it’s required non-standard solutions in the field of design, but these are special cases.

If on the site a large number of pages, then you definitely need to do an internal search. Usually the line is placed on the right top corner(as on my website). If the number of pages does not exceed 900–1000, then absolutely simple search, and if there are much more of them, then it makes sense to do a complex search (error correction, search tips etc.). However, you should never try to replace poor navigation with internal search. Ability to quickly find necessary information- this is just an additional option.

About content

The quality of content and its design also directly relates to the usability of the site. If you have meaningless articles on your resource Bad quality, then it doesn't matter how good the other elements are. And if you have excellent articles, but terribly designed, then their quality doesn’t matter at all - they won’t be read. There are generally accepted rules for text formatting that are suitable for almost any site, and they are worth following, if only for the convenience of users.

Use standard fonts like Arial, Tahoma, Verdana or similar ones. Custom fonts can be used for headings, but this will not be the case for body text. the best solution. Not everyone will be comfortable reading a large article with such a font, even if it looks interesting:

Black font on a white background - standard and optimal solution. Non-standard options do occur, but the text and background should be contrasting, and bright colors should be avoided. For example, red font on a green background will create a strong visual strain, and most visitors to your site will simply find it unpleasant to read such text. It is permissible to use a dark background, but even here you need to choose the combination of colors and shades very carefully. Good example:

The font size should not be less than 12 pixels. Also avoid crawling lines and blinking text - these techniques make it difficult to read and are simply annoying for many people. There is no need to overuse bold text; key points can be highlighted, but you should not do this in every sentence.

The quality of the content is also important. There are certain rules for writing and formatting articles that are relevant for almost any resource. In general, this is a topic for a separate article, but I will mention the main points that greatly influence usability.

• It is more correct to write articles in the form of an “inverted pyramid”, that is, the most important information and the key takeaways should be at the very beginning, and the least important ones at the end. This helps to immediately capture the user’s attention: he must quickly understand whether the article will be useful to him or not;
• The size of the article does not matter (including from the point of view SEO perspective), it should completely answer the user's question. It is clear that if an article of 10–15 thousand characters is in the top, then with an article of 2–3 thousand characters you will not occupy a leading position. Simply because you cannot answer the user’s question fully enough in such a volume;
• For large articles, it is worth creating a table of contents (with anchors in the text), which will allow you to quickly get to the desired section;
• Headings, lists and thoughtful structure of the material greatly facilitate its perception.

How to identify problems

Usability problems can be found on any website; in this sense, there can be no limit to perfection. Exist various methods, you can do the analysis yourself, or you can seek the help of specialists. A clear signal of problems with usability can be a decrease in website conversion.

Studying statistical data

Statistics can provide quite a lot of food for thought. There are very advanced tools, for example, Yandex Webvisor, which allows you to look at your site through the eyes of the user. Yes, studying this data will take a lot of time, but you don't need to look through the eyes of every visitor. Usually they pay attention to refusals and only those that came in response to targeted requests.

In addition, ordinary statistics can also suggest weaknesses in a resource. Here is a screenshot from Yandex Metrics with data on traffic to different sections on the site:

I have highlighted the data for one section that is clearly different from the others. The browsing depth here is much higher than average, and this can also be said about the time on the site. The bounce rate is slightly below the average for the entire site. What's the matter? It's simple: this section of the site is completely finished, there is a link between articles and additional elements navigation (recommended articles). This alone gave +0.64 viewing depth and +1 minute and 13 seconds to time on the site.

An extremely simple method that will allow you to quickly find weak points in your project. It is far from certain that problems will arise specifically in the area of ​​usability, but it is still necessary to work with web analytics.

User rating

In this case they ask real people evaluate the convenience of the site and give detailed feedback. You can ask friends, you can hire third-party specialists who will provide detailed reports and make recommendations. If you ask your friends or relatives, the main thing is to meet one condition: they must visit your site for the first time. There is such an effect as “blurring the eyes”, so only New user will be able to pay attention to weaknesses that you yourself do not notice, since you are accustomed to your resource.

Testing

Testing is the most the hard way, but he gives the most best result. Typically, focus groups of 5-8 people are used to evaluate the site. Before the test, parameters are determined that testers will need to evaluate. The option is not the cheapest, but it really is the best.

Actually, there are a lot of testing methods, there is a decent amount on this topic scientific publications, so I will not go into details, since it will not be possible to completely cover the topic completely within the framework of one article. For an ordinary webmaster, the first two methods of assessing the usability of a website will be quite enough - they will identify the most critical problems.

Conclusion

User friendliness should be a top priority for any website today. If you want to make a truly successful project, then it should not have weak points. After all, there will always be competitors who have everything perfect. By paying increased attention to usability, you are laying a solid foundation for the future of your site. And don’t forget that although there are generally accepted standards and recommendations, no one forbids experimenting, and the success of each solution can only be determined after real tests.