10 useful usability conclusions and guidelines

Document directory

• The form tag should be placed above the field
• User attention to face
• Design quality is an indicator of Reliability
• Blue is the best color of the link.
• The ideal search box is 27 characters wide
• Blank space can enhance understanding
• Effective user testing is not necessarily extensive
• The information product page can help you attract attention
• Most users ignore ads
• No.: conclusions from our case study
• Other resources)

Original article: 10 useful usability conclusions and guidelines

Translated from: 10 useful usability findings and guidelines

All rights reserved. Please indicate the source for reprinting. Thank you!

Everyone agrees that availability is an important aspect of the website. Whether you are creating a portfolio website, online store, or online application, making your page easy and happy for users
Use is a key. Over the years, many people have done a lot of research in many aspects of website and interface design. These conclusions are of great value in helping us improve our work. Here we can help you improve your
Website user experience10 useful usability conclusions and guidelines
.

 

The form tag should be placed above the field

A Study of UX matters
It is found that the ideal position of the label in the form is above the field. In many forms, labels are placed on the left of the field to form a two-column layout. Although this looks good, it is not the easiest layout to use. Why? Because forms are usually vertically oriented, that isEnter the form from top to bottom
The user browses the form downward. In this way, placing a field under a tag is easier (browsing) than placing a field on the right of the tag.

Tumblr
Following the advice of UX matter, a simple and concise registration form is provided.

Placing a tag on the left also raises another problem: Do you want to place the tag on the left or right? The left-side Navigation Pane allows the form to be scanned, but the label and field are separated, which makes it difficult to distinguish which label belongs to which field.
Difficult. On the right side, the opposite is true: it can implement a good interface, but it is more vulnerable to scanning. In various cases, labels are the best. At the same time, the study found that the labels should not be bold, although this suggestion is not completely
Convincing ......

User attention to face

When others enter the field of view, people will notice them instinctively. On the website page, we tend to focus on people's faces and eyes, which provides market personnel with a very good technology that attracts attention. However, it is just the beginning that we are attracted to people's faces and eyes. facts have proved that we will really turn our eyes to what people are looking.

An eye animation heat map that looks at pictures of our children is from usableworld's research.
.

Now the child is reading the content. Note that people are increasing in the direction of Titles and texts.

Here is a description of this Eye Movement Tracking Study
. We are instinctively attracted to the face,If the face is looking at other places instead of us, we will also look at that direction.
. Use this phenomenon to attract users' attention to the most important part of your page or advertisement.

Design quality is an indicator of Reliability

Various studies have shifted to the direction of how people think about the credibility of the website:

• Stanford-makovsy website Credibility Study 2002: investigate what makes a website credible (PDF)
• What makes a website credible? Reports on massive quantitative research (PDF)
• Computer credibility element (PDF)
• Elements that affect the credibility of a Website: an early result from a self-assessment study (Proceedings of ACM Chi 2000 Conference)
  On Human Factors in computing systems, V.2, New York: ACM Press)

We do not know fever
Is the app really good, but the fashionable user interface and website give us a good first impression.

One interesting conclusion of these studies is thatThe user uses the cover to determine a book.
... More specifically, a website depends on its design. For example, layout, consistency, layout, color, style and other elements will affect users' understanding of your website and the image of your project. Your website should not only have a good image, but also what your users need.

Other factors that affect credibility include the quality of website content, number of errors, update frequency, ease of use, and trustworthy author.

Most users No
Scroll

Jakob Nielsen's research on how many users are rolling (in prioritizing web usability
Only 23% of visitors scroll during the first visit to a website. This means77% of users do not scroll
They just readFolding Line or above
(That is, the page area visible on the screen without scrolling down. In addition, the percentage of users who roll back during the return visit is also reduced. Only 16% of users scroll during their second visit. The data emphasizes how important it is to place key content in a prominent position. Especially on the logon page.

This is not to say that you should put everything in the Upper Area of the page, but that you should make the best use of that part. Filling in the content will only make the content difficult. When users see too much information, they will not know where to start.

Basecamp
It makes good use of space. The Folding Line is above (768 pixels high) and displays a huge list of slogans, valuable ideas, behavior calls, customer lists, videos, and short features that are presented using images.

This is the most important thing for the Home Page. Most new visitors will visit the home page. Therefore, please provide these core elements here:

1. Website name;
2. Valuable ideas of websites (for example, What benefits do users get from their use );
3. User-related navigation.

However, users' habits have changed significantly. Recent research has proved that users are quite comfortable with scrolling, and in some cases they expect to scroll to the bottom of the page. Many users prefer to roll over
Paging, and for many users, the most important page information is not necessarily placed on the "Folding Line" (this is because a large number of visible display schemes are useless and rejected ). So divide your layout into segments.
It is a good idea to facilitate browsing. Use some blank spaces to separate them.

For more information, see these articles: Hide and expand
(Clicktale), paging and scrolling
(Huizhika University-Surl), breaking the myth of folding
(Box and arrow ). (Thank you, Fred leuck.
).

Blue is the best color of the link.

Although it is great to give your website a unique design, when it comes to availability, what other people are doing is the best. Follow the Convention, because when a person accesses a new website, the first place they are looking for is where they find them on most other websites; they use their experience to understand what new content means. This is calledUsage habits
. People expect something to be consistent, such as the link color, the location of the Website Logo, and the behavior of tab navigation.

Google
There is only one reason to keep all links on their websites Blue: most users are familiar with the color, which makes it easy to locate.

What color should your link be? The first principle is difference (comparison): the link should be dark (or bright) and be compared with the background color. Secondly, it should be highlighted from other texts; therefore, it should not be in the dark
Use a black link on the Color font. Finally, studies show that (Van schaik
And Ling) If availability is your focus, keeping blue links is the best. The default link color of the browser is blue, so users expect it. It is definitely not a problem to select a proper color, but it will
This affects the speed at which users can find it.

The ideal search box is 27 characters wide

What is the ideal width of the search box? Is there a problem? Jakob
Nielsen made a survey on the length of the search question in the search box of the website (prioritizing Web
Usability ). The result is that most of the current search boxes are too short. The problem with the short search box is that even if you have a long input, you can only view a part of the text at a time, making it difficult to check
Or edit the content you entered.

This study foundThe average width of the search box is 18 characters
. The data shows that 27% of queries are too long to be input.Expanded the search box to 27 characters to meet 90% queries
. Note that you can use em to set the width, instead of pixels or PT. 1em is exactly the width and height of an "M" character (regardless of the font size of your website ). Use this unit to control the 27 character width of the search text box.

Google
The search box is wide enough to accommodate long sentences.

Apple
The search box is a little short, and the query content will be cut off: "Microsoft Office 2008 ."

In general, the search box is too wide or too short, so that users can quickly check, verify and submit the query. This rule is quite simple, but unfortunately it is often ignored. Using some padding in the input area can also improve the design and user experience.

Blank space can enhance understanding

Many designers know the value of blank spaces, that is, gaps between paragraphs, pictures, buttons, and other elements on the page. Blank spaces allow sufficient space for each element to breathe to avoid page congestion and disorder. We can also group data by reducing the space between entries and increasing the space between them and other entries on the page. Display the relationship between entries on the page (for exampleThis
Show entries in the SetThis
Button) and build element level is very important.

Note netsetter
Large content such as margin, padding, and section space on the website. All these spaces make the content easier and more comfortable to read.

Blank Space also makes the content clearer and easier to read. A study (Lin, 2004) found that the spacing between paragraphs and between left and right can beAbout 20% better understanding
. Users will find it easier to focus on and process large blank content.

In fact, according to chaperro, Shaikh, and Baker studies, the layout of a page (including blank spaces, titles, indentation, and illustrations) it may not significantly affect performance, but it will certainly affect user comfort and experience.

Effective user testing is not necessarily extensive

Jakob Nielsen
Research on the ideal number of testing objects in the usability test shows that only five users can find 85% of all the problems on your website, 15 users can find almost all problems.

Source: Jakob Nielsen's alertbox

The biggest problem is usually discovered by the first or second user. Later users will confirm these problems and find other minor problems. Only two test users can find half of your website
Problem. This means that testing does not have to be extensive or expensive to get better results. The biggest benefit is from 0 to 1 Testing users, so there is no need to worry about too few testing users:Any tests are better than none.
.

The information product page can help you attract attention

If your website has product pages, people will surely see them when they shop online. However, many product pages do not have enough information to allow the browser to quickly browse. This is a serious issue,
Because product information helps people make up their determination to buy products. Research shows that the lack of product information can cause about 8% availability problems and even 10% of users failed (that is, the user gave up and left the network)
Site) (prioritizing web usability ).

Apple
Provide independent "Technical Features" pages for their products, which can separate complex details pages from simple product sales pages and) provide a convenient portal when needed.

Provide detailed information for your product, but do not fall into the trap of using too many words to attack users.Make the information easy to understand
. By dividing text into small sections and using a large number of sub-titles, you can view the page, add a large number of images for your product, and use the appropriate language:Do not use terminology. Your users may not understand it.
.

Most users ignore ads

Jakob Nielsen in its alertbox entry
It is reported that most users simply ignore advertising banners. If they look for a piece of information or concentrate on the content on a page, they will not be disturbed by the advertisement next to them.

This means that the user will not only avoid advertising, but alsoThey will also avoid anything that looks like an advertisement, even if they are not an advertisement
. Some heavy-style navigation bars will look like banners, so be careful with those elements.

Flashden
The square banners on the left are indeed not advertisements: they are only content links, but they do look like ad banners, so that they will be ignored by some users.

That is to say, if an advertisement looks like content, people will browse and click. This will bring more advertising revenue, but it will be at the price of your users' trust, because they click what they think is really content. Before using that method, please balance the transaction:Short-term benefits and long-term trust
.

No.: conclusions from our case study

In recent years, the editing team of smashing magazine has led some case studies to try to find some common solutions and practices. So far, we have analyzed website forms, blogs, typography, and works. More case studies will be released next month. We have discovered some interesting patterns that can act as guidelines for your next design.

Here, we will review some of the practices and design patterns we have found in those case studies to simplify these summaries for your convenience.

Based on our typographical Research
:

• Row Height (pixel) Subject font size (pixel) = 1.48
  
  1.5 is usually recommended in traditional printed books, so our research also supports this empirical method. Only a few websites use less than this, and more than 1.48 of websites are also decreasing.
• Line Length (pixel) bytes Row Height (pixel) = 27.8
  
  The average line length is 538.64 pixels (excluding the outer and inner margins), which is quite large considering that many websites still use 12 to 13 pixel fonts in the body.
• Space (pixel) between paragraphs rows height (pixel) = 0.754
  
  The result is the section space (the space between the last row of a paragraph and the first row of the next paragraph)
  It is rare that the lines are blank (this will be the main feature of the perfect vertical rhythm ). More often, the Section spacing is exactly 75% of the gap between the lines. The reason may be that blank lines usually include offline lines.
  Some characters do not have a linestring, so the extra white space will appear below the linestring.
• The number of characters in each line is preferably 55 to 75.
  
  According to the traditional typographical books, the optimal number of characters in each line is 55-75, but in fact, each line is more popular with 75-85 characters.

Based on our blog Design and Research
:

• The layout usually uses a fixed width (pixel-based) (92%) and is usually centered (94% ). The width of the fixed layout is mostly between 951px and 1000px (56% ).
• The homepage displays the summary of 10 to 20 logs (62% );
• 58% of the overall layout of a website is used to display the main content.

Based on our website Form Design Research
:

• The registration link is written as "sign up" (40%) and placed in the upper right corner of the page;
• The registry form has a simple layout to avoid distracting users (61% );
• The title of the input field is bold (62%), and the vertical placement of the field is significantly more than the horizontal placement (86% ).
• Designers tend to use mandatory and optional fields;
• No email verification (82%) is provided, but password verification (72%) is required );
• The "Submit" button has either the left (56%) or the right (26% ).

Based on our portfolio website Research
:

• 89% of the layout is horizontally centered, and most of them use huge horizontal navigation menus.
• 47.2% of portfolio websites have a customer page, and 67.2% have some independent service pages.
• 63.6% each project has a detailed page, including case studies, comments, screenshots, slides, drafts, and sketches.
• The contact page includes the hard drive, mobile phone number, email address, mailing address, business card, and online form.

Other resources)

• 15 valuable availability PDF files you have never heard
• 15 important research conclusions you should know
• 10 additional research results you should know
• Good availability
• Results of 11 eye movement tracking studies
• 25 extremely useful availability manuals and lists
• 10 Availability conclusions for increasing sales and user loyalty
• Website Form Design Guide: An Eye Movement Tracking Study

Do you have any ideas about what we are talking about? Or are you aware of other useful usability conclusions? Please leave a message below. Thank you!

About the author

Dmitry fadeyev usability post
The creator of the blog, where you can read his views on good design and availability. Follow Dmitry on Twitter @ usabilitypost