10 principles for improving usability (effectiveness) of website design

Determining the success or failure of a site is not a visual design, but the usability and effectiveness of the design. Users who visit the Web page hold the mouse and decide everything, "user-centric" is already the standard design direction of the successful website. In short, users do not have the functionality, it should not exist.

Instead of repeating the details of the operation (for example, how the "Search Toolbar" should be placed), our gaze will focus on the core principles, heuristics, and getting started on the effective design of the site. These can be used properly to induce richer designs and make the presented information easier to access.

Web Design Effectiveness Principles

In order to make use of these principles, we first need to understand how users interact with Web pages, how they think, and what the basic patterns of behavior are.

What does the user think?

In layman's words, the user's behavior on the internet has nothing to do with the customers in the daily store. Visitors scan each new page, browse through some of the text, click on the link they are most interested in, or vaguely feel they can find a link to the content they want. In fact, most of the pages, they don't look at all.

Many users are looking for information that they are interested in (or they find useful) and can click on, as long as some of the desired targets appear and the user clicks. If the new page does not meet the user's expectations, the user will click "Back" to continue the search.

• Users value quality and reputation. If a site provides users with high-quality content, users can tolerate ads and bad designs. That's why some Web sites are designed to be mediocre, but provide high-quality content, with impressive traffic year after year. Content is heavier than form.
• The user is not reading, but browsing. When users analyze a Web page, they look for important nodes or anchors in order to be able to guide them to the desired content.

  
  The user is not reading, but peeking through. The main "highlight" area is broken in the middle of the page content. This is a typical peek-through mode.

• Internet users are impatient and must be satisfied immediately. Very simple principle: if a website does not meet the user's expectations, the designer's work will fail, the company will also have economic losses. The higher the cognitive load and the less intuitive the navigation, the more users tend to leave the site and look for alternatives.
• The user does not make the best choice. Users will not find the most convenient way of finding the information they need. They're not linear. Browse a Web page, jumping from one site to another in order. Instead, users are easily satisfied, and they usually choose the first option to make them happy. As long as they find a link they feel can point to the desired target, they will usually click immediately. The best choice is difficult and takes a lot of time. Satisfied can be very efficient. Video

  
  Two images are displayed: The Web reading mode is non-linear. The path graph at the bottom right shows the line of sight for the user browsing a webpage.

• Users to follow their intuition. In the usual circumstances, the user sweeps through the clutter rather than reading the information presented by the designer. According to Steve Krug's research, the most fundamental reason is that users do not care. "If we find something that works, we'll be attracted to it." How these things work is not important to us, as long as we can use them is enough. If your audience likes a big bulletin board, what you need to do is design a bigger, bulletin board. ”
• Users want to have a sense of control. Users want to control their own browsing behavior and rely on the continuous content that the site renders. For example, they don't want a new window to pop up unexpectedly, and they want to use the Back button to return to the page they just had, so it's a good behavior to never open a hyperlink in a new browser window.

1. Don't let users think

Based on the availability of Krug first principle, the webpage should be clear and self-explanatory. When you create a Web site, your job is to avoid problems-choices that require the user to think through the causes and consequences to make decisions.

If the navigation and structure of the site is not intuitive, the number of problems will increase greatly, and make it difficult for users to understand how the system works, how to jump from point A to point B. A clear architecture, moderate intensity, moderate visual guidance, and easy-to-identify links help users find a way to achieve their goals.

Let's take a look at a case. Beyondis.co.uk declared himself to be "beyond the column, beyond the product, beyond the distribution." What does that mean? Since the users tend to "F" mode of web browsing habits, the above mentioned "columns, products, distribution" is the user to browse the Web page, the first must see the ternary.

Although the design itself is very simple and intuitive, users still need to find out to understand what this page does. This is the so-called unnecessary problem. The designer's job is to reduce the problem to 0. The visual interpretation has been placed on the right. As long as the location of the left and right modules is exchanged, availability increases.

ExpressionEngine uses a structure that is very similar to Beyondi, but avoids unnecessary problems. What's more, the slogan of publicity is effective, users will choose to try the service, download the free version.

By reducing the cognitive load, you can make it easier for visitors to get the idea behind the system. As long as you do this, you can understand why the system is useful and how users benefit from it. If people get lost on your Web page, they won't use your website.

2. Don't waste your patience

In any project where you want to provide services to users or use tools, try to lower your threshold and reduce the user's requirements. The less a service requires a user to pay, the more likely it is to be tried by a randomly-entered visitor. If you don't have to fill in a long web form that they won't use again, the first time you visit will be willing to try the service. Please allow users to browse the Web freely so that they can try your service without exchanging private information. It is unreasonable to force the user to fill out an email address to test the user's characteristics.

As the 37Signals team developer Ryan Singe says, users may be willing to leave an e-mail address after they see the product, so they have an idea of the return on email.

Stikkit is a very user-friendly example, it is clear and easy to understand, and hardly ever requests anything from visitors. This is also what you should do in your website to make your users experience.

Obviously, Mite is asking for a lot. But the entire registry can be completed in less than 30 seconds-because the page is landscape-wide and users do not need to scroll the page.

If you want to ideally remove all obstacles, first of all, do not need to contribute something or fill in the registration. Just a user registry itself is sufficient to prevent users from the site's random browsing behavior, and will have a great negative impact on the site browsing.

3. Seize the attention of the user

Because sites are usually both static and dynamic, some user interfaces are more appealing than others. Obviously, the image is more eye-catching than text-it's as if the bold sentence is more noticeable than the bold.

The human eye is a highly non-linear operating device that allows web users to intuitively identify boundaries, patterns, and movements. This is why video ads are particularly objectionable, but from a marketing standpoint, they do perfectly capture the attention of users.

Humanized.com a good use of the focus principle. The visual element that is presented directly to the user on this page has only one "free", which attracts attention very much, when it is still very concise and the message is simple to pass. Small clues provide users with sufficient information to find "free" products.

Using medium-intensity visual elements to draw attention to specific areas of the page allows visitors to your site to easily reach point B from point a without hesitation, ignoring the possible logic behind them. The fewer problems a visitor encounters, the more likely they are to have a sense of direction and more trust in the company the site presents. In other words: the less you need to figure out what this screen renders, the better the first goal of usability-the user experience.

4. Make the features appear as clearly as possible

Contemporary web design always laughs at the large buttons that use vivid visuals to instruct the user: the first step--the second step--the third step ... But from a design standpoint, these elements are not actually fossils. On the contrary, these navigation is extremely effective, because they can be in a very simple and friendly way to lead the browser of the Web site content between the shuttle.

Dibusoft.com combines the pleasant nature of vision with a clear website structure. This web sheet has 9 main navigation options, all placed in a position that can be seen at a glance. Although, the color of these navigation may be a little too shallow.

It is the benchmark of the successful user interface to let the user see clearly the rationality of the function. Whether this is achieved or not is actually not important, it is important whether the content is well understood and whether the user feels comfortable interacting with the system.

5. Write effectively

Because the site is different from print history, it needs to match the way users like to write, and is compatible with their browsing habits. Words that preach grandiose will not be read. Text with large segments without images, bold, or italic keywords will be ignored. Exaggerated language will be ignored.

That's serious. Avoid too much college or smart names, market-oriented names, company names, or technical nouns that are not branched. For example, if you describe a service that requires users to sign up for an account, the "register" ratio "starts here!" "Good, the latter is still better than" to explore our services.

The eleven2.com hit the key directly. No flowery words, no exaggerated statements. Instead, it's a price: that's what the user needs.

Optimized solutions for effective writing

• Use short sentences (hit the key, the faster the better)
• Use the way you lay out (categorize content, use multi-layered headings, use visual cues and tree images)
• Use plain, intuitive language (a slogan that doesn't sound like an advertisement; give users some rational and objective reasons to stay on your website and enjoy your service)

6. Be as concise as possible

"Brevity" is the first principle of website design. Users rarely stop at a site because they like its design, and usually they are looking for the information they need, and of course the design provides them with a look for help. Try to be concise rather than complex.

Crcbus provides a neat and simple design for web visitors. Maybe because it's Italian, you can't understand what the site is for, but you can clearly identify the navigation, title, content area, and footnotes. Note that the icon can be used to convey information clearly. As long as the mouse hovers over the icon, more information is automatically rendered.

From the user's point of view, a good web page should be a plain text, no ads, new content and users to find the target is closely related. This is also one of the reasons why a user-friendly web page brings a good experience

Finch clearly presents the site information, allowing users to make further browsing choices without extraneous content interference.

7. Don't be afraid to stay white

In fact, the benefits of leaving blank areas on a Web page are not too much to estimate. It not only reduces the cognitive load of Web visitors, but also makes it easier to access the information presented by the Web page. The first thing that new users do when they browse the Web is to scan the full page, mentally dividing the content area into appropriate chunks, and then processing the information.

Complex structures are not easy to read, peek, analyze and use. If there are two options, one is to use the obvious vertical line to separate two areas, the other is to use some white space to achieve this effect, usually the better choice is the latter, that is, leaving a blank. Layering reduces page complexity (Simon's rule): The better the visual hierarchy, the easier it is to get the content information on your page.

The blank area is good. Cameron.io uses white space as the main element of the design. This allows the main information to be highlighted in a distinct level.

8. Communicate effectively in a "visual" language

Aaron Marcus in the article "Effective visual expression," there are three basic principles, one of which is "visual language", which is what the user sees on the screen.

• Organization: To provide users with a clear and stable conceptual structure. Consistency, page layout, module relationships, and page navigation are important concepts in the organization. The same expressions and rules apply to all elements.
• Cost-effectively: Use visual elements as little as possible. Simplicity, clarity, differentiation, and focus are the four key points that need to be weighed. The implication of simplicity is that only the important elements that express the need can be presented. Clarity means that all components should be consistent with the meaning of their passing, without causing ambiguity or vague expression. The distinction is very important, it requires that all elements should be unique. The emphasis is on the key elements that can be easily captured by cognition.
• Expression: The use of the user's ability to accept the expression. To make the presentation smooth, the user interface must find a balance between readability, legibility, structure, symbolism, many points of view, color and material effects. You can use up to three fonts in a page, with up to 3 font sizes-The text can be up to 18 words or 50-80 characters per line.

9. The specification is our friend

Websites designed with traditional elements are not uninteresting. In fact, traditional norms are useful because they reduce the cycle of learning and save energy to collect effectiveness. For example, if all sites have different visual features enabled for RSS feeds, this will be a nightmare for usability. This is not the same as we are accustomed to the data specification collation, or for the store shelves of the law, there is no difference.

If you follow the rules, you will gain the confidence, trust, trust, and reliability of your users. Follow the user's wishes--understand their expectations for a site navigation, text structure, search bar location, and more. (Refer to Nielsen:usability alertbox)

Babelfish in Use:Amazon.com in Russian.

A typical example of usability testing is translating a webpage into Japanese (assuming that your site users do not understand Japanese, for example, using Babelfish), and then ask your usability test to try to find something in a different language Web page. If the specification is well-complied, the user can find something that is not particularly specific, even though they are ignorant of the language.

Steve Krug suggests that you innovate only when you're sure you have a better idea, but if you don't, stick to the existing code.

10. Early testing, often tested.

The Teto principle can be applied to any Web page design, because usability testing can always provide critical insights into the important issues and details of existing layouts.

Do not test too late, too little, or for inappropriate reasons. "Do not test for inappropriate reasons" means that many design decisions are for the moment, and you cannot easily declare certain layouts to be superior to others because you need to weigh them from a particular perspective (considering demand, investor interest, budget, etc.)

Some important points to keep in mind:

• According to Steve Krug's study, testing one user is a lot better than one, and testing a user at the start of a project is a much better test than 50 when it's out of the project. According to Boehm's law one, errors are very common in demand and design activities, and the later they are discovered, the more expensive it is.
• Testing is the process of an iteration. This means that you need to design something, then test it, fix it, and then test it. Perhaps the first round can not find some problems, because these problems may be covered by other problems, users have been stuck on other issues.
• Usability testing always leads to useful results. Whether you are pointing out a problem with existing sites or are not violating some of the major design mistakes, you can make a meaningful review of your project.
• According to Weinberg's Law, the website's code developer is not suitable as a tester. The same principle applies to designers. Because you've been designing a website for a long time, you're not able to look at it from a whole new perspective. You know how it's built and how it works-you know too much than independent testers and website visitors.

Baseline principle: If you want to make an excellent website, it must be tested.

Reference Documents

• Designing effective User Interfaces by Suzanne Martin
• Summary on Web Design
• UID Presentation (Flash)
• research-based Web Design & Usability Guidelines
• "The Psychology of Computer Programming" by Gerald Weinberg
• "Designing Web Usability" by Jakob Nielsen [JN/DWU]
• "Prioritizing Web usability" by Jakob Nielsen
• "Don ' t make Me Think" by Steve Krug
• "Usability for the web:designing Web Sites It" by Tom Brinck, Darren gergle, Scott Wood
• A Summary of Principles for User-interface Design

English Original: Principles of effective Web Design Chinese original download: Xiaoxiao ' s Weblog

10 principles for improving usability (effectiveness) of website design