User experience: 10 useful Web Usability design references

Everyone will agree that usability is a very important aspect of the site. Whether you're working on a portfolio site, an online store, or a Web application, making your pages easy and enjoyable for users is a key. Over the years, many people have done a lot of research on web sites and in many aspects of interface design, and these conclusions are valuable in helping us to improve our work. Here are 10 useful usability conclusions and guidelines that can help you improve your site's user experience.

The form label is best placed above the field

a study by UX matters found that the ideal location for labels in a form is on top of fields (field). In many forms, the label is placed on the left side of the field to form a two-column layout; although this looks good, it is not the easiest layout to use. Why do you say that? Because the form is usually vertically oriented, that is, the user fills out the form from the top down, and the user browses the form. It is easier (to browse) to place the field below the label than to place the field on the right side of the label.

TUMBLR follows the recommendations of UX matter, providing a simple and concise registration form.

Placing a label on the left raises another question: Do you leave the label left or right? Living left allows the form to be scanned but separates the label from the field, making it difficult to distinguish which label to which field. Right is the opposite: it can achieve a good interface but the scanning is weaker. In all cases, the label is best on the top. The study also found that labels were best not to be bold, although the proposal was not entirely convincing ...

Users focus on the face

When others enter the field of vision, people instinctively notice them immediately. On the Site page, we tend to focus on people's faces and eyes, which provides a good technology for marketers to attract attention. But we are attracted to people's faces and eyes is just the beginning, and it turns out that we will indeed turn our eyes to the direction the people in the picture are looking.

An eye-tracking heat map that is looking at our baby's pictures comes from the usableworld study .

So now the child is looking at the content. Note that people are growing in the direction of heading and text.

Here is an eye-tracking study that describes this. We are instinctively attracted to the face, but if that face is looking at other places than us, we will look at that direction as well . Use this phenomenon to attract your users ' attention to the most important part of your page or AD.

The quality of design is an indicator of credibility

Various studies have shifted to what affects people's perceptions of the credibility of the site:

• Stanford-makovsy Website Credibility Research 2002: Investigate what makes a website believable (PDF)
• What makes a website believable? Report on a large number of quantitative studies (PDF)
• Computer confidence Element (PDF)
• Elements that affect the credibility of a Web site: An early result from a self-assessment study (Proceedings of ACM CHI Conference on Human Factors in Computing Systems, v.2, New York:ac M Press)

We don't know if Fever app is really good, but the stylish user interface and website give us a good first impression.

One interesting conclusion of these studies is that users really judge a book by its cover ... More precisely, a website relies on its design. Elements such as layout, consistency, typography, colors, and styles all affect the user's understanding of your site and the image of your project. Your site should not only have a good image, but also should be what your users need.

Other factors that affect credibility include the quality of the content of the site, the number of errors, the frequency of updates, ease of use, and trusted authors.

Most users do not scroll

Jakob Nielsen's research on how much user scrolling (in prioritizing Web usability) shows that only 23% of visitors scroll while visiting a Web site for the first time. This means that 77% of users do not scroll ; they just look at the contents of the fold line above (that is, the area of the page that is visible on the screen without scrolling down). Also, the percentage of users scrolling during a return visit has decreased, with only 16% of users scrolling on their second visit. These data emphasize how important it is to place the key content in a significant position. Especially on the login page.

It's not that you should put everything in the upper part of the page, just say, you should make the best use of that place. Stuffing content will only make the content difficult to understand; When users see too much information, they don't know where to start.

Basecamp A good use of space. Above the folding line (768 pixels high), it displays a large screenshot, slogan, valuable proposition, call of Action, customer list, video, and a short list of features that use a picture display.

This is most important for the home page, and most new visitors will be browsing the home page. So please provide these core elements there:

1. Website name;
2. The value proposition of the website (for example, what benefits users will get from using);
3. The main part of the user-related navigation.

However, the user's habits have changed dramatically now. Recent research has shown that users are quite receptive to scrolling, and in some cases they expect to scroll to the bottom of the page. Many users like to roll over the page, and for many users the most important information about the page does not have to be placed on the "fold line" (this is because a large number of visible display schemes are useless and rejected). So it's a good idea to split your layout into segments for easy browsing, and use some whitespace to separate them.

For more information you can view these articles: folding expands (clicktale), Paging and scrolling (University of Warwick –surl), breaking the Folding myth (box with arrows). ( thanks Fred Leuck).

Blue is the best color for links

While it's great to give your site a unique design, it's best to do what others are doing when it comes to usability. Follow the Convention because when a person visits a new site, the first place they look for things is where they find them on most other sites; they use their experience to understand the meaning of the new content. This is known as the use of habits . People expect something to stay the same, such as link color, site logo location, tab navigation behavior, and so on.

There is only one reason why Google keeps all the links on its web site blue: Most users are familiar with the color, which makes it easy to locate.

What color should your link be? The first is the difference (contrast): The link must be dark (or bright) to contrast with the background hue. Second, it can be highlighted from other texts, so don't use black links on black fonts. Finally, research shows (Van Schaik and Ling) that if usability is your focus, keeping the blue link is the best. The default link color of the browser is blue, so the user expects it more. Choosing a different color is definitely not a problem, but it will affect the speed at which users find it.

The ideal search box is 27 characters wide

What is the ideal width of the search box? Is this a thing? Jakob Nielsen did a survey of the length of search questions in the search box in the Web site (prioritizing Web usability). The result is that most of the search boxes are now too short. The problem with a short search box is that even if you can type a long question, you'll only see part of the text one at a time, making it difficult to check or edit what you've entered.

The study found that the average width of the search box was 18 characters . The data shows that 27% of the queries are too long to be entered. Extended search box to 27 characters to meet 90% of the query . Please note that you can use EM to set the width, not pixel or pt. 1em is exactly the width and height of a "m" character (regardless of the size of your site's use). Then, use this unit to control the search text box for 27 characters wide bar.

Google 's search box is wide enough to hold long sentences.

Apple 's search box is a little short and will cut off the query: "Microsoft Office 2008."

Overall, the search box is too wide or too short to allow users to quickly check, verify, and submit queries. This rule is fairly simple, but unfortunately it is often ignored. Using some internal margins (padding) in the input area can also improve the design and user experience.

Gaps can enhance understanding

Many designers know the value of whitespace, which is the space between paragraphs, pictures, buttons, and other elements in a page. whitespace by giving each element enough space to "breathe" to prevent the page from being too crowded and messy. We can also group by reducing the space between entries and increasing the space between them and other items in the page. It is important to show the relationship between items in the page (for example, to display the button in this set of entries) and to build the level of the elements.

Note the large content margin, padding, and paragraph space on the netsetter site. All of these spaces make the content easier and more comfortable to read.

Whitespace also makes the content clearer and easier to read. A study (Lin, 2004) found that paragraphs and left and right spacing can improve understanding of about 20% . Users will find it easier to focus and handle content that uses large gaps.

In fact, according to Chaperro, Shaikh and Baker, the layout of a page (including whitespace, headings, indents, and illustrations) may not significantly affect performance but will certainly affect the user's comfort and experience.

Effective user testing does not necessarily have to be extensive

Jakob Nielsen 's research on the ideal number of test subjects in usability testing shows that only 5 users can find 85% of all the problems on your site, and 15 users can find almost every problem.

Source: Jakob Nielsen ' s Alertbox

The biggest problem is usually found by the first or second user, and subsequent users identify the problems and find other minor problems. Only two test users may be able to find half of your site's problems. This means that testing does not have to be broad or expensive to get better results. The biggest benefit comes from 0 test users to 1, so don't worry about too few test users: any test is nothing .

Information product pages can help you get noticed.

If your site has a product page, people will certainly see them when they shop online. But many product pages lack enough information, or even enough to allow browsers to quickly browse. This is a serious issue, because product information helps people make the decision to buy. Research shows that lack of product information leads to about 8% usability problems and even up to 10% of users fail (that is, the user abandons and leaves the site) (prioritizing web usability).

Apple provides a separate "technical feature" page for its products, which can separate complex detail pages from simple product sales pages, and then provide a convenient entrance when they (users) need it.

Provide detailed information for your product, but don't fall into the trap of bombarding users with too much text. make this information easy to understand . By dividing the text into small pieces and using a lot of subheadings to make the page browsable, add a lot of pictures to your product and use the appropriate language: do not use terminology, your users may not understand .

Most users ignore ads

Jakob Nielsen reported in its Alertbox entry that most users simply ignored the banner. If they look for a piece of information on a page or concentrate on the content, they won't be disturbed by the ads next to it.

This means that users will not only avoid advertising, but they will also avoid everything that looks like advertising, even if they are not advertising . Some of the heavily styled navigation bars will look like banner ads, so be careful with those elements.

The square banner on the left side of the Flashden is really not an ad: they're just links to content, but they do look like ad banners, so they're ignored by some users.

In other words, if the ad looks like content, people will browse and click. This will lead to more ad revenue but at the expense of your users ' trust, because they click on what they think is really content. Before you take that approach, weigh the deal: short-term gains and long-term trust .

Extra: From the conclusion of our case study

In recent years, Smashing magazine's editorial team has led a number of case studies to try to find some popular programs and practices. So far, we've analyzed Web Forms, blogs, typography, and collections, and more case studies will be released next month. We have found some interesting patterns that can serve as guidelines for your next design.

Here, we'll review some of the practices and design patterns we found in those case studies, simplifying these overviews to make it easier for you.

According to our typesetting research :

• Row height (pixel) \ Main font size (pixel) = 1.48
  1.5 is usually recommended in traditional printed books, so our research also supports this empirical approach. Only a few sites use less than this, and using more than 1.48 of the sites is as much as shrinking.
• Row length (pixel) 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 sites still use a font of 12 to 13 pixel size in the body.
• Space between paragraphs (pixels) = row height (pixels) = 0.754
  The result is that the paragraph space (the space between the last line of a paragraph and the first line of the next paragraph) is rarely equal to the gap between the lines (which will be the main feature of the perfect vertical rhythm). More commonly, the spacing between paragraphs is exactly 75% of the gap between the lines. The reason may be that gaps in the lines usually include the downlink, and because most characters have no downlink, the extra whitespace appears below the line.
• The best number of characters per line is 55 to 75.
  According to traditional typesetting books, the best number of characters per line of text is 55-75, but in fact, 75-85 characters per line is more popular.

According to our blog design Research :

• The layout is usually 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 home page shows a summary of 10 to 20 posts (62%);
• 58% of the overall layout of a Web site is used to display the main content.

According to our website Form Design Research :

• The registration link is written as "Sign Up" (40%) and is placed in the upper-right corner of the page;
• The registration form has a simple layout to avoid distracting the user's attention (61%);
• The header of the input field is bold (62%), and the field is positioned vertically more significantly than the horizontal (86%) position.
• Designers tend to adopt some mandatory fields and optional fields;
• No email verification (82%) is provided, but password verification is required (72%);
• The "Submit" button is left (56%) and has a right (26%).

According to our Portfolio website Research :

• The 89% layout is centered horizontally, and most of them use a large horizontal navigation menu.
• 47.2% of the Portfolio site has a customer page, 67.2% have a number of independent service pages.
• 63.6% each project will have a detailed page, including case studies, testimonials, screenshots, drafts and sketches, and so on.
• The contact page includes effort direction, mobile phone number, email address, mailing address, business card, and online form.