Main principles of Usability and basic rules. Usability - the origins and basics of usability
Website usability is a stage of development that almost no one in RuNet ever does. Neither a layout designer, nor a programmer, nor a designer. And only if the site owner, before development, asks about the convenience of his future project and describes his wishes in terms of reference– sometimes you get something decent. But these are rather exceptions, because... the site owner relies on intuition 100% of the time, and it very often fails.
I have several every week standard letters: “the developers made the site, the advertisers launched advertising, there are clicks, but there are no sales. Why?".
In this article I will not consider cases of technical impossibility effective advertising when a product or service is not in demand at all or has little demand on the Internet or the topic in the context is prohibitively expensive for a beginner, etc.
Much more often, the reasons for the failure of a site are more simple things: for example, if the user does not see the company’s contacts on the right side of the header, the owner loses about 20% of the possible profit. If you forgot to indicate in the main screen (without scrolling) what exactly the company does (this is not fiction, such cases happen all the time) - deduct another 20 percent of the profit. Several such mistakes in design and all efforts to develop the site went to waste. Most of the usability principles for a simple business card website are extremely simple, it’s just that almost no one knows about them.
Therefore, I will try to write briefly and simply, and you go through your site and check what is on it and what is not :).
What is website usability?
For the visitor, this is convenience in achieving the purpose for which he came to the site. And for the site owner, this is an increase in traffic and conversion, one of the key factors influencing the behavior of the site user. Moreover, usability is even assessed search engines and affects the place in the search results. Let's look at what exactly makes a site convenient.
Convenience or beauty?
Let's start with the obvious things that still need to be said. It's great if your site is both usable and beautiful at the same time, but if improving the usability of the site requires sacrificing beauty and design intent, then they should be sacrificed. A user will always prefer a convenient one to a beautiful one.
Correct layout
Just because you look at a website and it looks and works great, unfortunately, that doesn’t mean it will be the same for everyone. There are many people who will always use Internet Explorer, as well as fanatical fans of any other browser. Therefore, it is absolutely necessary to test the site for all of them, otherwise, no matter how wonderful services and goods you fill it with, someone simply will not be able to use them.
The F-shaped pattern is one of the main “secrets” of usability
Research says that when a person visits a website, they scan the page in an F-shaped pattern. The greatest attention is concentrated in the upper left corner, and what is located in the lower right receives the least amount of attention. The visitor scans the information from left to right, then looks down, then again from left to right, and so on. The result is a trajectory similar to the letter F.
In general, the right side attracts the user much less than the left. If we are, of course, talking about a person who writes from left to right (when creating a website, for example, in Arabic, these recommendations should be read exactly the opposite). Therefore, important semantic elements should not be placed in the right column.
If you place a bright and large image (for example, a photo of a product) in the center of the page, then the visitor’s eye will initially be attracted to it. In the future, it will begin to scan the page along the same F-shaped path, but the information in the upper left corner will be irretrievably skipped. If you have placed some important elements in the left column, it is better to have a bright image above them.
And of course, the target action of the page - for example, a button to order a service or add an item to the cart - must be on the viewing path.
Terrain orientation
A visitor does not always start viewing a site with home page. Many come from search engines or advertising. Therefore, you should never think that the user has already become familiar with some information before; information that is important for understanding where he is should be duplicated on each page.
Required elements:
- Company `s logo
- Company name
- a slogan that at least partially explains what this site offers
- company contact details
- chain of links to the main page (“breadcrumbs”) – possible, but not necessary
In 95% of cases when I do a usability audit, sites are missing one or more of the above elements. And this is very important for effective conversions.
Color combinations are very important for website usability.
There are simple and clear usability principles in this regard. You can read about them in the article
Scrolling
Horizontal scrolling should simply be disabled. A huge part of visitors, faced with it, will leave the site immediately.
Vertical scrolling is not annoying, but there must certainly be something on the first visible screen that will interest the user. He should not leave the site without even starting to scroll.
Margins and Padding
They must be there. Text without margins will be read faster, but its meaning will largely elude the visitor - it will be viewed “diagonally”.
A cap
You shouldn't make it huge, because someone is viewing your site from small screen netbook or tablet. And it rarely looks beautiful on a full-fledged monitor. Most visitors, having seen one header instead of content, will no longer look for it.
In addition there is standard information, which a person expects to see here - at least the same logo, name and contact information. By the way, everyone is also accustomed to the fact that the logo is a link leading to the main page of the site.
Is the menu horizontal or vertical?
The menu is the main tool for navigating the site, so it shouldn’t be complicated. The ideal menu is horizontal and single-level.
Undoubtedly, great amount sites uses vertical menu. And this a good choice, if it is vital for you to use many points in it, and especially if the number of these points increases. But it’s not uncommon to see a vertical menu of three or four items in the left column. The space underneath is then often used for advertising. By doing this, you are giving away the most valuable space on your site to advertising. If you do not plan to expand the menu, it is better to make it horizontal, and instead of the left column, immediately begin introducing the user to the content on which you need to keep his attention.
Also, instead of a vertical one, you can use such an interesting menu design option, when the main links stand out more brightly and large print, and the secondary ones are located under them. 
A drop-down menu can also be used, but it would be a good idea to warn the visitor about this: sudden flickering on the screen when nothing was foreshadowed can be annoying. It is best to indicate this with a simple marker like a triangle pointing down near the corresponding menu item. 
If the page content is expected to be long and the user will have to scroll through it, then horizontal menu To speed up navigation, you can duplicate it in the footer. This number will not work with a vertical menu.
Menu items
People always respond well to familiar and familiar interface elements. Coming to the site, he expects to see in the menu something like “About us”, “Services”, “Contacts” and so on. If such ubiquitous menu items are named differently, the visitor may simply not pay attention to them.
Search, login, registration form, etc.
As a rule, such forms are located at the top right, and this, again, is familiar to the visitor. You shouldn't force him to look for them all over the page. It is better to place all these secondary forms there, connecting them with other navigation elements.
(But, of course, you shouldn't rely on search as a replacement for regular site navigation. If the user can't find something through the menu, in most cases he will never find it at all.)
Links should be color-coded and underlined on hover so they don't blend in with the rest of the content. It is better if visited and unvisited links are different colors, - no one likes to click on links multiple times by mistake. The priority color of links is blue and, if the color scheme of the site allows it, you should use it for links.
Animation
In general, animation has a right to life, but it should not be overused. You shouldn’t hang falling snowflakes and twinkling stars all over your site. The slider will certainly attract the visitor's attention, but excessive flickering will only cause a headache and a desire to immediately leave the page. In any case, it is better to limit yourself to one animated object on the page.
Sound
It’s better not to use it at all: some people listen to music, some have children sleeping, and some people’s boss would rip their heads off. If necessary, you can insert a player on the page that the visitor can turn on and off independently.
I think these are, overall, fairly simple recommendations. However, compliance with these simple rules can help you a lot in achieving good conversion of your project.
What are the main Usability principles? You will find answers to this and many other questions in the article. Usability principles are generally accepted views on interaction with design, which were introduced by Nelsen Jacob (the founder of Usability). These views are more a set of rules than rigid guidelines, which is why they are called “Heuristics.” There are ten such principles in total.
Status Visibility
The first principle of Usability is visibility of system status. This position says that the user should know where he left off and what is happening. If this complicated registration, you need to indicate that this is the second step or the third.
Efficiency
The next principle of Usability is efficiency. In fact, it means that there must be a connection between each user and the system. Your site must be tailored to a specific audience, you need to speak to them in their language, using their level of readiness and designation. Therefore, a website should always be designed for its audience. This applies not only to structure, but also to texts, design, help, visual perception of information, and so on.
Free choice
What is the third principle of Usability? user control, which is necessary so that the client can always control the situation. For example, if a person fills out a form, they should always see a “clear form” button. What if it contains several steps? The user should always be able to return to previous steps or skip one of them in order to repeat the action a little later.
Thanks to this situation, the user will have the impression that he is in control of everything, that no one is trying to confuse or deceive him. And the interface, which at first glance seems tricky, will become ordinary with the right approach. After all, it is much easier for a person to complete several simple actions than one complex one.
Standards
The fourth principle of Usability is consistency and standards. There are already certain established stereotypes on the Internet (contacts in the upper corner, type of basket, and so on). However, one designation can have several types, so inexperienced user You can easily get lost among them. For example, electronic baskets are identical to carts, regular baskets, trendy bags, and so on. And for consistency to appear, you need to choose a specific style that must be followed everywhere. This applies to layout, fonts, text, and pictures.
Error Prevention
The fifth principle of Usability is error prevention. This rule states that an error should not be corrected, but prevented. You always need to eliminate random ones, unnecessary actions and wherever possible, simplify the choice. This can be a regular hint when typing something on the keyboard.
This also applies to buttons. For example, the “Accept” offer is usually made brighter and larger than the “Clear form” request. You should provide information you know about the information you are entering (region code, phone format, etc.).
Simplification
The sixth principle is the rule “It is easier to find out than to remember.” Make life as easy as possible for users, remember the information they previously entered (even from their previous visits to the site), give them hints. For example, if you use a multi-step registration system, show the person already filled out fields if they will be useful to him in the future.
Flexibility
The seventh principle of Usability is flexibility of use. According to this rule, the interface must be flexible; it must be tailored to the prevailing audience. Here the basic emphasis is on simplicity, taking into account regular user. Advanced parts should be small. They can be placed in less noticeable parts of the screen, since such people will find them everywhere.
Design
The Usability design principle is the eighth in a row. It lies in aesthetics and minimalism. According to this rule, the interface should not contain information that the user does not need. It should also not contain information that a person will need in rare cases.
You need to create forms in the same way: you cannot ask the user for data that you do not need. Unfortunately, almost no one uses this position. In order to simply congratulate them on their name day or New Year, in 90% of cases clients are required to provide both the date of birth and home number phone, mobile, e-mail and even address.
Help
Every webmaster should know the main principles of Usability. The ninth vision of this scientific and applied discipline is to help users understand and correct errors. People need to be informed about all mistakes in ordinary, “human” language, and not in computer language. If the link was created incorrectly, you don’t need to write just 404. Report it like this: “An error occurred while entering the page.” If, while filling out the form, the user forgot to indicate his phone number, write that there was an error when entering data, and not just a “form error.”
Support
Why are the core principles of Usability so important? Let's look at the tenth principle, which is called Documentation and Assistance. Materials and support should be simple and clear, easily accessible, and relevant to the user's goals. In addition, the documentation should not be voluminous. It must contain clear steps. If the materials are too large, you can make a short navigation for quick transition by section, as well as search for support.
"Usability"
So, we have looked at the main principles of Usability. But what kind of discipline is this? "Usability" is a measure of the quality of the user experience obtained when interacting with a system or product. For example, it could be software application, website or anything else.
User Interfase Engineering specialists determined that in 60% of cases people cannot find the information they need on the Internet. As a result, their productivity decreases. They do not want to return to the site, because of which they are forced to waste precious time.
It is also known that Forrester Research has received some figures that show the amount of losses resulting from poor-quality “usability” of sites. Chain stores lose about 50% of customers who cannot find required product. Approximately 40% of users do not want to return to a site they did not enjoy working with.
Jakob Nelsen argues that research into people's web behavior has shown that they have poor perceptions of complex web sites and slow sites. He says users don't want to wait. They also don't want to have to figure out how to use the home page. There are no website instructions or training for web projects anywhere. Jacob knows that people want to quickly scan pages and instantly understand the functionality of a website.
Creation
What is Usability Development? Its principle lies in a methodological approach to creating a website or any other user interface. This development consists of several methods that are used sequentially in the process:
- gathering requirements;
- creation and analysis of prototypes;
- evaluating opposing design options;
- studying user questions;
- proposal of solutions and analysis of the site (or any other interface).
Testing
What is Usability Testing? Not everyone knows the principle of this nuance. In general, it is part of the process of creating “Usability”. A typical test requires a person to perform several tasks using a prototype (or other system). During operation, the observer records what the user says and does. Typically, such a test is carried out with one or two people acting together.
The analysis can collect data such as mistakes users make, the sequence of actions a person takes to achieve a goal, when and where audiences encounter difficulties, how much people like the product, and how quickly they complete tasks. Most tests are used to identify and solve any problems that appear in the public.
Steps of Discipline
What are the steps of Usability? To plan a website, you first need to understand why you are developing it, for whom, why and when your readers will visit your resource. If you answer these questions, you will discover the purpose of your site. Specific goals depend on the site's audience and your organization.
In addition, you must define the site's Usability objectives. In line with your overall goals, your resource should be effective to use, easy to learn, and easy to remember for repeat visits. It also needs to satisfy the user.
Each Usability goal is important for most websites, but you may want to consider others for different audiences and situations. It is known that design is based on the needs of people, so you need to collect information not only about them, but also about the extent to which the existing site satisfies them. There are several methods for collecting data, which include server logs, forms feedback, Usability testing of an existing website.
It's easier for people to interact with real example than to argue what will work best. Useful results can always be obtained using a website prototype that has a minimum of content and no graphics. Such a basic prototype is suitable for the first round of tests.
Content should only be posted that is necessary for site users. If you have a mountain of information, choose the ones that will be useful and enjoyable for your audience. All information should be broken down into small pieces with subheadings, as people want to quickly read what interests them. You need to remove unnecessary words from the text, use tables and lists.
Next, an interactive process is carried out - Usability testing, which we wrote about above. Sometimes you need to test an interface that has already been designed in accordance with all the rules. By the way, focus groups are the most accessible way for analysis “on your own.”
Components
So, using the rules and the principle of Usability, you can create a resource that you will be proud of. The presence of this amazing item is a qualitative sign that determines the extent to which it is easy to use. The word "usability" also refers to a collection of techniques that improve a website during its creation.
Usability has five quantitative components:
- Efficiency: After introducing users to the design, how quickly will they complete the same task?
- Learnability: How easily can people perform basic tasks when using an unfamiliar interface for the first time?
- Mistakes: how many mistakes does a person make, how serious are they, can he easily correct them?
- Memorability: if the user returned to the interface through certain period time, will he be able to regain his skills in working with it?
- Satisfaction: to what extent is a person pleased to use this interface?
In addition to “Usability”, there are many other important quality features of design. One of the key ones is usefulness. This attribute describes the functionality technical solution and determines the usefulness of the interface to users. Usability and practicality are equally important: why use convenient program, if it doesn’t give the result you need? A program that hypothetically works the way you need, but you don’t like its complex interface, is also considered bad. To analyze the usefulness of a project, you can use the same tools as when studying the quality of its “Usability”.
In Web-e “Usability” is considered a necessary condition survival. If the site is difficult to work with, visitors will leave it very quickly. If the home page of a website does not clearly and clearly indicate what the business does and what tasks the resource allows you to perform, users will look for another website. People will also leave if the site is confusing, has information that is difficult to understand, and doesn't answer their key questions.
There are no such visitors who spend their time mastering the site interface or carefully study the instructions for working with it. There are many other resources on the Web, so if a visitor encounters a problem, you will lose him.
Usability (from English usability - “ease of use) is a qualitative assessment of the simplicity and comfort of working with a site. The user should easily find necessary information, without getting lost in functionality and numerous pages, and at the same time receiving aesthetic pleasure from working with the resource.
Why is it important to follow website usability principles?
- Conversion. Properly designed navigation will prompt the user to perform a target action: call the company, download a price list, order a product, use a service, etc. It is important to correctly build the narrative and structure, because if the visitor thinks for even a few seconds or does not immediately understand what to do next, you can lose him. For example, if, having got to the main page, from the very first lines he does not learn about the scope of the company’s work, does not get his bearings where he is and what to do next, he will close the tab without regrets. If he does not find detailed answers to the questions of interest in the form of an article, video, graphics, the same thing will happen.
- Attendance. The user will return to the site only if he enjoys working with it. Therefore, the resource must be convenient and understandable from all points of view: text, navigation, interface, sequence of actions, etc. Thanks to the abundance of choice, the modern consumer does not have to spend a long time understanding the intricacies of working with the site: if it’s difficult here, he will move on to competitors who have a clearer and simpler approach.
Principles of web resource usability
Website usability development is based on the main rule: “the simpler, the better.” The more familiar the structure and interface the user sees, the easier it is for him to navigate and the less time he will spend to find the desired section, because will feel more confident.
1. Design is the key to trust in the site
Do not overload the visual part with many details, colors and dynamic elements. Nothing should distract the user from perceiving the information. And if he spends a long time on the resource, he should not get tired of the abundance of contrast, poor readability of the text, and diverse graphics. The emphasis is on minimalistic design: in addition to uniqueness, you should consider the combination of background and font colors, the number and type of images.
Another important point: well thought out " appearance» website is a guarantee of trust on the part of a consumer who comes to you for the first time. Ease and accessibility of use, color combinations, style that suits your target audience pictures, quality of content, absence of errors - all this affects the disposition to the resource.
An example of a website oversaturated with graphics. The design is replete with eye-catching color combinations and an abundance of pictures.
2. Logical structured content
One of the main usability factors is the convenient perception of texts. Structure, design, information content, logical breakdown, optimization, absence of errors - all these parameters are important to consider when writing an article. If this is a long manual text, make a table of contents in the form of links so that the user can quickly find the desired section.
According to reports from Clicktale and CX Partners, page length does not affect whether a user will explore the content below or not. What is more important is a well-thought-out structure of graphics and text: highlighting priority information, sequence of arrangement.
3. Important information - in the left corner
Visitors browsing web page in an F-shaped pattern: attention is concentrated in the upper left corner and limited to the first few paragraphs of the text in descending order. Therefore, when distributing important information Using such a scheme will increase the likelihood that the visitor will quickly find the necessary data and see the most important things by quickly skimming the section.
4. Communication with the user
Successful registration, accepted order, non-existent page - a person should always be aware of what is happening. And in every detail. If it is registered in the system, tell us what to do next if the order is accepted: indicate the number, call waiting time, contact information; If you land on a 404 page, how to find the information you need or where to return.
Once on such a 404 page, the user will not be confused and, most likely, will not immediately leave the resource.
5. Cancel action
A person should have the opportunity to change his mind. Eg, social network VKontakte allows you to restore a page after it has been deleted. Some online stores - change or delete an order after placing it, adjust the delivery and payment method. All of these are components of website usability.
6. Unobtrusive offer of help
There is no need to insist on communication. Large pop-up windows offering help in choosing, a colored strip with a phone number occupying a third of the screen - such elements not only look intrusive and repel the visitor, but also cover up part of the functionality. The example below shows a product selection form. The help window should be easy to hide, so crosses and other similar icons should be made visible, and not translucent or blending into the background.
It's better to initially this form was in a folded state, but at the same time noticeable - for example, in the form of a bright side tab. And at the same time it did not overlap some of the content on the page. The latter also applies to social media buttons.
7. Conversation in understandable language
Do not focus on specialized terms - speak simply so that the user does not have to waste time interpreting an incomprehensible word. If you can’t do without narrow concepts and explanations, develop pop-up windows. The same applies to filling out forms: if you dictate certain conditions in the form of name length, password, phone format, acceptable geography, indicate this in the form of hints.
8. Refusal of sudden changes
This applies to menu items, the name and type of buttons, and their location. Imagine a reshuffle in your favorite supermarket: after a year of daily shopping, you suddenly notice that the management has decided to swap departments, products, and make a redesign. And now milk is on the counter for sour cream, porridge - where butter used to be, and instead of frozen cherries you find pork kidneys. The signs have become more beautiful, but completely different - just like the usual discount icons. Bottom line: you get lost and spend much more time than usual studying the new design and getting your bearings, getting used to it again.
The same applies to web design: the user will not only spend more time, but will also be disappointed when he notices that instead of the cart icon there is now “Add Product”, instead of “Catalog” - “Products”, and the usual volumetric buttons of the streamlined button have become flat and chopped. Therefore, having conceived a “rearrangement”, do not shock the visitor - the changes should be gradual and not radically change the familiar structure.
9. All possibilities are in sight
A good solution is when the user sees all the sections he can go to, because... at any moment he can quickly figure out where he is and how to get back. If you plan to have a lot of content on the site, it is reasonable to provide a horizontal top menu, a vertical menu (both - possibly with subsections), as well as a “footer”. If we're talking about about a minimalist “business card” or landing page- only the top horizontal menu is enough.
If there are a lot of categories, add the “Site Map” item, which will allow the user to navigate which sections the resource contains and how to get there. Don't neglect " bread crumbs» - a navigation chain at the top of the content block, which tells you how the person got to the page.
Example lucky card site
10. Registration and order form: the more concise the better
The more fields there are to fill out, the less time the user wants to spend on this. Moreover, the layout of fields, inscriptions, and selection of fonts may be ideal, but the length may be repulsive. Modern Basics usability factors force web developers to reduce the length of these forms to a minimum, mercilessly throwing out questions about education, income level, profession, etc. But! Compare two forms: despite the presence of only a couple of additional fields, you want to fill out the first one less than the second. Not to mention the requirement to provide a phone number.
11. Noticeably long search field
The corresponding button is best helper visitor. Especially if we are talking about a large resource. The search bar should be easy for the user to find. So that when meeting someone for the first time, he doesn’t have to spend even a few seconds finding the corresponding line.
Another important point is the length of the search field. According to research by Jakob Nielsen, the average length is 18 characters, and the optimal length is 27 characters. In 90% of cases, even a long request will fit here so that the user can see it in full and correct it if necessary. To set the desired width, use relative unit"em" equal to the size of the font used.
The search bar is not in the site header, but under the presentation, at the bottom of the page. Not the most convenient option, given that the user automatically looks for this option at the top of the site.
12. More free space
A website can be compared to a living room: if every square meter busy with something - a person will feel uncomfortable. It’s the same here: if the page is overcrowded with useful blocks, sections, remarks and other information, the visitor will get lost and won’t understand where to pay attention first. Modern design prone to minimalism: only the most important things are on the page.
A lot of blocks with almost invisible frames, an abundance of various graphics, and a lack of highlighting of priority information make it difficult to understand what to pay attention to first when arriving at the site.
After all usability principles have been taken into account, they move on to testing, which is carried out constantly, because any mistake can alienate a potential client.
Usability testing
The new interface is assessed from two points of view:
- High quality. This category analyzes the functionality of the resource, target orientation, competent structure and preparation of content, as well as other parameters listed in the previous section. It is important to check the site for errors: broken links, redirects, 404 page appearance, etc.
- Quantitative. Here we evaluate page loading speed, response time, transition between pages, search the desired section or buttons.
Testing is carried out independently or with the help of special services- for example, Yandex.Metrica. To evaluate usability on your own, you need to spend a little time: recruit a group of 5-6 people from the target user category, prepare tasks and questions for them about the operation of the resource, draw conclusions from the results obtained, and correct any errors found. After changes have been made, the focus group should be reconvened.
It is important to apply usability rules not at the very last moment: the sooner the developer begins to plan the structure and appearance of the future resource, the more aspects he will think through, the better the result will be obtained and he will be able to make all the adjustments without haste. You should first analyze your competitors’ websites, identifying their weak and strengths, as well as evaluate the previous resource, if available, identifying points that require improvement.
The article was prepared by Victoria Zakirova.
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:
- 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 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 click rule.
Nobody likes to surf pages looking for 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. - 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. - 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.
Testing consists of four stages:
- Focus group selection. Testers must match your target audience. You shouldn't ask grandma to test an application to find driver updates.
- 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.
- 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.
- After identifying and correcting errors, the testing cycle must be completed again. The cycle must be repeated until the results meet the necessary requirements.
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 left top 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.
Summary: Definition of usability. How, when and where can this user interface (UI) setting be improved? Why is it important for a marketer as well as a web designer?
This post represents a presentation of an article by the world's largest authority in this field, Jakob Nielsen, adapted to the specifics of web marketing.
Below are key terms and parameters that describe the design and usability of a selling website, and provide answers to the main questions that both a marketer and a web designer may have.
Definition
Usability is a qualitative measure that evaluates how easy user interfaces are to use. The adjective “quality” in the definition of the term means that it cannot be expressed in terms of quantitative parameters, unlike, say, click-through rate (CTR), return on investment (ROI) or cost per lead (CPL). In other words, we will not be able to calculate the exact value of this parameter and write it down in numbers. The semantic translation of Usability is “ease of use.”
This parameter also refers to ways to simplify the use of the user interface (UI, user interface) used in the design process.
We propose to consider the term UI in a narrow sense practical significance from the point of view of an Internet marketer - user interface there is a visualization of a landing page, eCommerce website page or SaaS solution displayed on the monitor of a representative of the target audience.
In turn, ease of use is determined by 5 quality components (lower level criteria):
Learning ability(Learnability): How easily will users be able to complete conversion tasks when they first see the landing page design?
Efficiency(Efficiency): Once users have seen the design of a web resource, how quickly can they complete the task at hand?
Memorability(Memorability): If users return to a web page after a long period of absence, how easily will they be able to remember the algorithm for completing the conversion task?
Errors(Errors): how many errors will users make while interacting with the landing page/site, how serious will these errors be, and how easily will users be able to recover from these errors (i.e., will they be disappointed to such an extent that they will simply leave the web resource )?
Satisfaction(Satisfaction): How pleasant is this UI to use?
This is what usability is software system and landing page.
There are other important quality design attributes. Key Parameter related to the functionality of the user interface - utility: does the design meet the basic needs of users?
Usability and usefulness are equally important, and only through the combination of these 2 parameters can you determine whether something is useful for the user: it doesn’t matter how easy it is to perform an action if you don’t need it.
However, it is equally bad if a visitor who finds himself on landing page after search query, understands that theoretically he can perform the conversion action he desires, but in practice he will not be able to fulfill his desire, simply because the user interface is too complicated.
To study the usefulness of design, the same methods are used as for usability research (we will discuss them below).
So, let’s formulate 3 definitions of design that promotes usability in conditional UI:
Usefulness/utility= whether the design provides the user with the necessary functions.
Usability= how easy and pleasant it is to use these functions.
Useful design= ease of use + usefulness.
Why is usability important?
On the Internet, ease of use is a prerequisite, especially in the field of ecommerce any format. If a sales landing page or SaaS solution is difficult to use, visitors will go to competitors.
If Homepage Unable to clearly state what the company offers and explain what members of the target audience can do on the web resource, users “flee for their lives.” The same reaction will be caused by the lack of clear navigation, the inconvenience of reading text content (the notorious “wall of text”), evasive, unconvincing or incompetent answers to key questions.
This is the basic behavioral pattern of a person’s online behavior: he will not read instructions for using a landing page/site or otherwise waste his time trying to figure out how a specific web interface is structured and works. There are many other web resources available just a click away. Leaving is the first defensive reaction of a visitor faced with difficulties.
Now let’s remember the “first law of e-commerce”:
If visitors can't find the product, they won't buy it.
Nielsen claims that best practice on this moment is this: spend 10% of the total budget allocated for design development on usability optimization.
This approach ensures an increase in the quality metrics of a web resource by more than 2 times (Nielsen, as an indirect criterion for assessing ease of use, uses ROI as a parameter that has an exact numeric value, and he has repeatedly monitored the relationship between the ease of use of the interface and the return on investment ratio in his extensive long-term practice).
Doubling sales, doubling the number of registered leads, doubling any marketing result - isn't it a compelling enough argument to finally pay attention to the usability of landing pages?
How to improve usability?
There are many methods for studying this parameter, but the main and most useful is user testing, consisting of 3 sequential operations:
- Attracting a number of representative users representing the target market.
- Test participants perform typical conversion tasks.
- Observing them: what they do, what they succeed, where they have difficulties in interacting with the user interface.
Marketers should not interfere in any way with the test, leaving participants to solve all problems individually. Any hint will negate the results of the experiment.
In order to determine the most important issues, 5-10 users are enough. There is no need to run an expensive large-scale study; a series of tests with a small number of participants will be much more effective, but each test should be carried out after each change made to the design so that you can correct flaws as soon as they are discovered.
Let us recall that this method is called iterative design, and it is also used in the process of website redesign to increase conversion, although in the second case the situation is much simpler: each iteration ends with a regular split test.
And of course, the more versions and interface design ideas we can test, the better.
User testing should not be confused with a focus group survey - this method is good for researching the target market, but is not suitable for assessing usability. The marketer only needs to receive and analyze the opinions received from the focus group; the UI designer must personally see how each user completes the conversion task using the designed web interface.
When should you start working on usability optimization?
This parameter plays a role at every stage of the web interface design development process. Consequently, there is a need for numerous tests, each of which, however, can be carried out quickly and cheaply.
Here are the basic steps:
- Before you start developing a new UI or redesigning it, test it old version to identify convenient and useful to the user elements that can be used in the future.
- Conduct a so-called field study - observe how representatives of the target audience behave in their “natural habitat”, i.e. in a familiar environment when visiting their preferred web resources: do they use , do they scroll the page using the mouse wheel or a vertical scrollbar engine, etc.
- This is how you can form an approximate opinion of how future visitors imagine ease of use.
- Create some simple, rough sketches of new designs and begin user testing as early as possible. Don't waste time on painstaking work design ideas- you will have to change them all based on the test results.
- Gradually move from a prototype that meets the most common web design requirements accepted in your marketing niche to a custom, high-quality computer representation of your landing page/site. Don't forget to test every iteration!
- Check the design for compliance with generally accepted rules (there are many works on this topic, for example, the same Jakob Nielsen).
- If you decide that you have finally completed new option design, check it again - minor usability problems always “creep into the light” precisely during the implementation of a new interface on a web resource.
Don't put off user testing until the new design is fully operational. If you do this, it will be impossible to fix the vast majority of critical issues.