10 useful conclusions and principles of usability
Everyone agrees that usability is an important aspect of web design. Although you are working on a portfolio site design, an online store or a web application, it is important to make the pages comfortable and easy for users. In recent years, a lot of research has been done on various aspects of web design and interface design. The results of these studies are very significant and help us improve the quality of our work. This article contains 10 useful conclusions and usability principles that will help you improve the user experience of your sites.
A study done by UX Matters showed that it is best to place form labels above form fields. On many forms, labels are placed on the left side of the margins, creating a two-column layout; while it looks good, it is not the easiest layout to use. What is it for? Based on the fact that the forms are mostly vertically oriented, users enter information from top to bottom in the forms . Users go in top-down forms and it will be more convenient for them to read labels over form fields, rather than look for them on the left side of the form.
The Tumblr website has a simple and elegant registration form that follows the recommendations of the UX Matter.
')
Positioning labels on the left side in turn creates another problem: along which edge will you align the labels, along the left edge or along the right? Aligning to the left makes the form visually convenient, but separates the labels from the forms, making it difficult to understand which label belongs to which field of the form.
Alignment on the right edge does the opposite: the form is pleasant in appearance, but it is already visually inconvenient. Inserting labels above form fields will be most convenient in most cases. The study also showed that labels should not be bold, but this recommendation is not mandatory.
People instinctively notice other people as soon as they come into view. On web pages, we focus on the faces and eyes, which gives marketers a good tool to attract attention. But our attention to the faces and eyes of people is just the beginning, it turns out, in fact, we are even starting to look in the direction where the person in the picture is looking.
Heat map of gaze tracking when viewing an image with a child who is looking directly at us. Research done by Usable World .
And now the child is looking at the content. Pay attention to the increase in the number of people on the title and text.
This is demonstrated by this gaze tracking study . We instinctively look in the direction of people, but if people look at something else, we also begin to look in that direction . Take advantage of this phenomenon to draw the attention of your users to important parts of your page.
Various studies have been conducted to find out the factors affecting people's trust in the website.
We don’t know whether a good application is Fever or not, but the elegant user interface and website create a great first impression.
One of the interesting findings of this research is that users actually judge a book by its cover ... or, rather, a website by its design. Elements such as layout, texture, typography, color and style affect how users perceive your site and what kind of picture you are projecting. Your site should not only project a good image, but also project the image that is right for your audience.
Other factors affecting the credibility of the site are: the quality of the content of the website, the number of errors, the frequency of updates, ease of use, the reliability of the authors.
Most users
A study by Jakob Nielsen about how many users scroll the page ( Prioritization of site usability ) revealed that only 23% of users scroll the page when they first visit the site. This means that 77% of users will not scroll the page , they will simply view the content before scrolling. Moreover, the percentage of users who will scroll will decrease on subsequent visits to the site to 16%. This data shows how important it is to show important information in a prominent place, especially on landing pages.
This does not mean that you should collect an excessive amount of information in the header of the site, it only means that you should use this part of the page in the best possible way. Excessive amount of information in the header of the site will simply make the content inaccessible when the user sees too much information, he will not know exactly where to start viewing all this.
Basecamp uses the place in an excellent manner. At the top of the screen (768 pixels in height), it shows a large screenshot, subtitle, offer, call to action, customer list, video and a short list of features, with images.
This is the most important for the home page, on which all new users will be in the first place.
So provide basic data in this part of the site:
However, since then, user habits have changed significantly. Recent studies prove that users are quite comfortable scrolling, and in some situations they are ready to scroll to the bottom of the page with joy. It is more convenient for many users to scroll than to use page switches, and for many users it is not necessary that important information be located on the top of the site (this is because of the variety of monitors with high resolution). So it's a good idea to divide your layout into pieces for easy viewing, separated by large spaces.
It's great when you create a unique design for your site, but when it comes to usability, it’s better to do what everyone else does. Follow the conventions, because when people visit a new site, they are always looking for things in the places where they are used to finding them on other sites, they use their experience to comprehend new content. This is called “use of samples”. People expect certain things, such as link colors, the location of the site’s logo, the behavior of navigation tabs, etc.
Google always makes its links blue and for good reason: the color is familiar to many users, which is why links are easy to spot.
What color should have links? The first consideration is the contrast: links should be dark enough (or light) to contrast with the background color. Next, they should be different from the rest of the text on the page, so do not make black links when the text on the page is black. Finally, the study showed (Van Schaik and Ling) that if you put usability on top, then it’s better to make the links blue. The browser's default link color is blue, so people expect to see exactly this color. Choosing a different color is not a problem, but users will need more time to find such links.
What should be the width of the ideal field to enter a search query? Jacob Nielsen conducted a study on the number of characters in search queries entered into search fields on sites. It turns out that most of today's search query input fields are quite short. The problem with the short fields for entering a search query is that, although you can write a long enough search query, only a small part of it will be visible at the same time, which makes it difficult to edit it later.
The study showed that, on average, the search query input fields are 18 characters wide . According to the data, 27% of search queries were too long and did not fit in them. Extending the search query input field to 27 characters in length will allow you to place 90% of the search queries in it. Remember that you can set the width not only in pixels and points, but also in “em” (relative unit of length equal to the size of the current font). Thus, use this value to set the width of the input field for the search query to 27 characters.
The Google search query input field is wide enough for long search queries.
Apple’s search query input field is too short; the “Microsoft Office 2008.” query did not fit.
In general, it is better to make the search query fields too long than too short, so that users can quickly check the entered query and send it. This is very simple advice, but, unfortunately, it is often rejected and ignored.
Most designers know the meaning of white space, which is the space between paragraphs, images, buttons, and other elements on a page. Free space makes objects on the page more clear and prominent. We can also group items by reducing the distance between them and increasing the space between them and other elements on this page. This is important for demonstrating the relationship between elements (for example, to show that this button belongs to this group of elements) and the structure of the hierarchy of elements on the page.
Notice the broad border of the content and the division of paragraphs on The Netsetter . All this space makes the content easy and comfortable to read.
Free space also makes content more readable. The study showed that the use of free space between paragraphs and in the left and right columns increases understanding by 20% .
In fact, according to Chaperro, Shaikh and Baker, the layout of the web page (including spaces, headers and indents) may not noticeably affect performance, but it will affect user satisfaction.
A study by Jacob Nielsen on the ideal number of testing site usability showed that only 5 testing users would reveal almost 85% of all problems on your site, while 15 testing people would identify almost all problems.
The biggest problems are usually the first or the first two testers, the other testers confirm these problems and find the remaining minor problems. Only two testing users will probably find half of the problems on your site. Which means that testing should not be extensive or expensive to get good results. The greatest success is achieved when moving from 0 testers to 1, so do not be afraid to do too little: any testing is better than nothing .
If your site has product pages, people who will buy these products will surely check them out. But many product pages do not contain enough information, even if users only scan through them. This is a serious problem, because product information will help people make a purchasing decision. The study showed that 8% of problems with convenience are associated with insufficient information about products, which also causes 10% of customer losses (ie, the user simply leaves the site).
Apple provides separate “Technical Specifications” pages for each of its products, thereby separating difficult technical details from lightweight marketing pages, but providing access to such data if necessary.
Provide your users with detailed information about your products, but do not load them with a lot of text. Provide them with easily digestible information. Split text into small blocks and use many subtitles. Insert into these pages a lot of images of your product and use the right language: do not use slang words that your users may not understand .
Jacob Nielsen, (Jakob Nielsen) in his topic on AlertBox , says that most users simply do not see ads. If they are looking for some specific information or are focused on the content of the site, then they simply will not pay any attention to the banners.
The consequence of this is not only that users avoid advertising, but that they will avoid everything that looks like advertising, even if it is not advertising . Some menu items may look like banner ads, so be careful with such items.
Square banners on the left side of the FlashDen site are not actually banners: these are links to content on the same site. They look too much like banners and can be ignored by some users.
However, ads that look like content can be visited by people who are looking for this particular content on the page. This can bring you more advertising revenue, but it can also lower user confidence in your site, because they will click on the banner thinking that this is a link to the material on the site. Before you decide on this, think what is best for you - short-term income or long-term trust?
Labels for form fields should be placed above the form fields.
A study done by UX Matters showed that it is best to place form labels above form fields. On many forms, labels are placed on the left side of the margins, creating a two-column layout; while it looks good, it is not the easiest layout to use. What is it for? Based on the fact that the forms are mostly vertically oriented, users enter information from top to bottom in the forms . Users go in top-down forms and it will be more convenient for them to read labels over form fields, rather than look for them on the left side of the form.
The Tumblr website has a simple and elegant registration form that follows the recommendations of the UX Matter.
')
Positioning labels on the left side in turn creates another problem: along which edge will you align the labels, along the left edge or along the right? Aligning to the left makes the form visually convenient, but separates the labels from the forms, making it difficult to understand which label belongs to which field of the form.
Alignment on the right edge does the opposite: the form is pleasant in appearance, but it is already visually inconvenient. Inserting labels above form fields will be most convenient in most cases. The study also showed that labels should not be bold, but this recommendation is not mandatory.
Users concentrate on their faces.
People instinctively notice other people as soon as they come into view. On web pages, we focus on the faces and eyes, which gives marketers a good tool to attract attention. But our attention to the faces and eyes of people is just the beginning, it turns out, in fact, we are even starting to look in the direction where the person in the picture is looking.
Heat map of gaze tracking when viewing an image with a child who is looking directly at us. Research done by Usable World .
And now the child is looking at the content. Pay attention to the increase in the number of people on the title and text.
This is demonstrated by this gaze tracking study . We instinctively look in the direction of people, but if people look at something else, we also begin to look in that direction . Take advantage of this phenomenon to draw the attention of your users to important parts of your page.
Design quality is an indication of trust
Various studies have been conducted to find out the factors affecting people's trust in the website.
- Stanford-Makovski Web Sites Trust Study, 2002: What makes a site trustworthy ,
- What makes the site trusted. A report on a large quantitative study
- Elements of computer confidence ,
- Elements that influence site confidence: Preliminary Research Findings (ACM CHI 2000 Materials on Human Factors Conference on Computational Systems, v.2, New York: ACM Press)
We don’t know whether a good application is Fever or not, but the elegant user interface and website create a great first impression.
One of the interesting findings of this research is that users actually judge a book by its cover ... or, rather, a website by its design. Elements such as layout, texture, typography, color and style affect how users perceive your site and what kind of picture you are projecting. Your site should not only project a good image, but also project the image that is right for your audience.
Other factors affecting the credibility of the site are: the quality of the content of the website, the number of errors, the frequency of updates, ease of use, the reliability of the authors.
Most users don't scroll
A study by Jakob Nielsen about how many users scroll the page ( Prioritization of site usability ) revealed that only 23% of users scroll the page when they first visit the site. This means that 77% of users will not scroll the page , they will simply view the content before scrolling. Moreover, the percentage of users who will scroll will decrease on subsequent visits to the site to 16%. This data shows how important it is to show important information in a prominent place, especially on landing pages.
This does not mean that you should collect an excessive amount of information in the header of the site, it only means that you should use this part of the page in the best possible way. Excessive amount of information in the header of the site will simply make the content inaccessible when the user sees too much information, he will not know exactly where to start viewing all this.
Basecamp uses the place in an excellent manner. At the top of the screen (768 pixels in height), it shows a large screenshot, subtitle, offer, call to action, customer list, video and a short list of features, with images.
This is the most important for the home page, on which all new users will be in the first place.
So provide basic data in this part of the site:
- Site name,
- A suggestion of significance (i.e. what benefits they will get from using it),
- Navigation through the main parts of the site that are important to the user.
However, since then, user habits have changed significantly. Recent studies prove that users are quite comfortable scrolling, and in some situations they are ready to scroll to the bottom of the page with joy. It is more convenient for many users to scroll than to use page switches, and for many users it is not necessary that important information be located on the top of the site (this is because of the variety of monitors with high resolution). So it's a good idea to divide your layout into pieces for easy viewing, separated by large spaces.
The best color for links is blue.
It's great when you create a unique design for your site, but when it comes to usability, it’s better to do what everyone else does. Follow the conventions, because when people visit a new site, they are always looking for things in the places where they are used to finding them on other sites, they use their experience to comprehend new content. This is called “use of samples”. People expect certain things, such as link colors, the location of the site’s logo, the behavior of navigation tabs, etc.
Google always makes its links blue and for good reason: the color is familiar to many users, which is why links are easy to spot.
What color should have links? The first consideration is the contrast: links should be dark enough (or light) to contrast with the background color. Next, they should be different from the rest of the text on the page, so do not make black links when the text on the page is black. Finally, the study showed (Van Schaik and Ling) that if you put usability on top, then it’s better to make the links blue. The browser's default link color is blue, so people expect to see exactly this color. Choosing a different color is not a problem, but users will need more time to find such links.
The ideal search field should be 27 characters wide.
What should be the width of the ideal field to enter a search query? Jacob Nielsen conducted a study on the number of characters in search queries entered into search fields on sites. It turns out that most of today's search query input fields are quite short. The problem with the short fields for entering a search query is that, although you can write a long enough search query, only a small part of it will be visible at the same time, which makes it difficult to edit it later.
The study showed that, on average, the search query input fields are 18 characters wide . According to the data, 27% of search queries were too long and did not fit in them. Extending the search query input field to 27 characters in length will allow you to place 90% of the search queries in it. Remember that you can set the width not only in pixels and points, but also in “em” (relative unit of length equal to the size of the current font). Thus, use this value to set the width of the input field for the search query to 27 characters.
The Google search query input field is wide enough for long search queries.
Apple’s search query input field is too short; the “Microsoft Office 2008.” query did not fit.
In general, it is better to make the search query fields too long than too short, so that users can quickly check the entered query and send it. This is very simple advice, but, unfortunately, it is often rejected and ignored.
Free space improves understanding
Most designers know the meaning of white space, which is the space between paragraphs, images, buttons, and other elements on a page. Free space makes objects on the page more clear and prominent. We can also group items by reducing the distance between them and increasing the space between them and other elements on this page. This is important for demonstrating the relationship between elements (for example, to show that this button belongs to this group of elements) and the structure of the hierarchy of elements on the page.
Notice the broad border of the content and the division of paragraphs on The Netsetter . All this space makes the content easy and comfortable to read.
Free space also makes content more readable. The study showed that the use of free space between paragraphs and in the left and right columns increases understanding by 20% .
In fact, according to Chaperro, Shaikh and Baker, the layout of the web page (including spaces, headers and indents) may not noticeably affect performance, but it will affect user satisfaction.
Effective user testing should not be extensive.
A study by Jacob Nielsen on the ideal number of testing site usability showed that only 5 testing users would reveal almost 85% of all problems on your site, while 15 testing people would identify almost all problems.
The biggest problems are usually the first or the first two testers, the other testers confirm these problems and find the remaining minor problems. Only two testing users will probably find half of the problems on your site. Which means that testing should not be extensive or expensive to get good results. The greatest success is achieved when moving from 0 testers to 1, so do not be afraid to do too little: any testing is better than nothing .
Product info pages help you stand out
If your site has product pages, people who will buy these products will surely check them out. But many product pages do not contain enough information, even if users only scan through them. This is a serious problem, because product information will help people make a purchasing decision. The study showed that 8% of problems with convenience are associated with insufficient information about products, which also causes 10% of customer losses (ie, the user simply leaves the site).
Apple provides separate “Technical Specifications” pages for each of its products, thereby separating difficult technical details from lightweight marketing pages, but providing access to such data if necessary.
Provide your users with detailed information about your products, but do not load them with a lot of text. Provide them with easily digestible information. Split text into small blocks and use many subtitles. Insert into these pages a lot of images of your product and use the right language: do not use slang words that your users may not understand .
Most users don't see ads.
Jacob Nielsen, (Jakob Nielsen) in his topic on AlertBox , says that most users simply do not see ads. If they are looking for some specific information or are focused on the content of the site, then they simply will not pay any attention to the banners.
The consequence of this is not only that users avoid advertising, but that they will avoid everything that looks like advertising, even if it is not advertising . Some menu items may look like banner ads, so be careful with such items.
Square banners on the left side of the FlashDen site are not actually banners: these are links to content on the same site. They look too much like banners and can be ignored by some users.
However, ads that look like content can be visited by people who are looking for this particular content on the page. This can bring you more advertising revenue, but it can also lower user confidence in your site, because they will click on the banner thinking that this is a link to the material on the site. Before you decide on this, think what is best for you - short-term income or long-term trust?
Source: https://habr.com/ru/post/70787/
All Articles