10 principles for improving website design availability (effectiveness)

Document directory

• Principles of web design effectiveness
• How do users think?
• 1. Do not let users think
• 2. Do not waste your patience
• 3. capture users' attention
• 4. Try to make the features explicit
• 5. Effective Writing
• 6. Try to be concise
• 7. Do not leave it blank
• 8. Effective communication in "visualized" Language
• 9. Standards are our friends.
• 10. Early tests, often tests.
• References

What determines the success or failure of a website is not a visual design, but the availability and effectiveness of the design. Users who access the webpage hold their mouse and decide everything. "user-centric" is already the standard design direction for successful websites. In short, functions that are not used by users should not exist.

We do not intend to repeat the operation details (for example, how to place the "search toolbar"). On the contrary, we will focus on the core principles, heuristic methods, and entry points of effective website design. If they can be used properly, they can generate richer Design Works and make the presented information more accessible.

Principles of web design effectiveness

To make rational use of these principles, we first need to understand how users interact with webpages, how they think, and what is the basic behavior model.

How do users think?

In general, users' behaviors and habits on the Internet are similar to those of customers in daily stores. Visitors scan every new page, browse some of the text, click the link they are most interested in, or vaguely think they can find the link they want. In fact, most of the pages are not read at all.

Many users search for information that they are interested in (or that they find useful) and can click. As long as some seemingly expected targets appear, users click. If the new page does not meet your expectations, the user will click back to continue searching.

• Quality and credibility are important to users.If a website provides users with high-quality content, they will assume that they have endured advertisements and poor design. This is why some websites are designed to be mediocre, but with high-quality content, there will be impressive traffic year after year. Content over form.
• Users are not reading, but browsing.When you analyze a webpage, you can find some important nodes or anchor points to hope these links can guide them to the desired content.

  
  The user does not read, but browses. The main highlighted area is disconnected from the page content. This is a typical scan mode.

   

• Internet users are impatient and must be satisfied immediately. A very simple principle: If a website fails to meet users' expectations, the designer's work will fail and the company will suffer economic losses. The higher the cognitive load, the less intuitive the navigation, the more users tend to leave the website and find its alternative.　
  
• Users do not make the best choice. Users will not find the most convenient way to find the information they need. They do not browse a Web page linearly, but jump from one site to another in order. On the contrary, users are easily satisfied. They usually choose the first option to satisfy them. As long as they find a link that they think can point to the desired target, they usually click it immediately. The optimal choice is difficult and takes a lot of time. If you are satisfied, it will be very efficient. [Video]

  
  Both images are displayed: The webpage reading mode is non-linear. The path in the lower-right corner shows the line of sight of a Web page.

• Users follow their instincts. In general, users view the information rather than reading the information presented by designers in disorder. According to Steve Krug's research, the most fundamental reason is that users don't care. "If we find something works, we will be attracted. How these things work is not important to us. We only need to be able to use them. If your audience prefers a large announcement board, you need to design a bigger one ."
• Users want to be controllable. Users want to control their own browsing behavior and rely on the continuous content presented by the website. 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 created. Therefore, never opening a hyperlink in a new browser window is a good action.

1. Do not let users think

According to the first principle of Krug availability, web pages should be clear and self-explanatory. When you create a website, your job is to avoid problems-those who need to carefully consider the cause and effect before making a decision.

If the navigation and structure of the website are not intuitive, the number of problems will increase, making it difficult for users to understand how the system works and how to jump from point A to point B. A clear architecture, moderate-intensity and mild visual guidance, and easy-to-recognize links can help users find ways to achieve their goals.

Let's look at a case. Beyondis. co. uk claims that it is "beyond the product, beyond the distribution. What does this mean? Since the discovery that users prefer the "f" Web browsing habits, the "column, product, and distribution" mentioned above are three elements that must be seen first when users browse the Web page.

Although the design is simple and intuitive, you still need to find out what the webpage is. This is an unnecessary issue. The designer is responsible for reducing the problem to 0. Explanations with visual effects are placed on the right. As long as the positions of the left and right modules are exchanged, the availability increases.

Expressionengine uses a structure similar to beyondi, but avoids unnecessary problems. Furthermore, the publicity slogans are effective, and users will choose to try the service and download the free version.

By reducing the cognitive load, you can make it easier for visitors to get the ideas behind the system. As long as you do, you can understand why the system is useful and how users benefit from it. If people get lost on your webpage, they will not use your website.

2. Do not waste your patience

In any project that you want to provide services to users or use tools, try to lower your threshold and reduce your requirements for users. A service requires users to pay less, and the more likely they are to be tried by a random visitor. If you do not need to fill in long web pages that they will not use again in the future, the first visitors will be willing to try the service. Please allow users to freely browse the Web page so that they can try your service without exchanging private information. It is unreasonable to force a user to enter an email address to test user characteristics.

As Ryan singe, developer of 37 signals team, said, users may be willing to leave an email address after seeing the product, therefore, they have thoughts on the return of emails.

Stikkit is a user-friendly example that is clear and easy to understand and rarely asks visitors for anything. This is what you should experience on your website.

Obviously, there are a lot of requests from mite. However, the entire registry can be completed within 30 seconds-because the webpage is horizontal, you do not need to scroll the page.

If you want to remove all obstacles in an idealized manner, you do not need to contribute or enter registration information. A single user registry is enough to impede users' arbitrary browsing behavior on the website and has a great negative impact on website browsing.

3. capture users' attention

Because websites generally provide both static content and dynamic content, some user interfaces will be more attractive than others. Obviously, the image is more eye-catching than the text-as if the bold sentence is more likely to attract attention than the unbold sentence.

Human eyes are a highly nonlinear device that allows web users to intuitively recognize boundaries, patterns, and movements. This is why video ads are particularly objectionable, but from the marketing perspective, they do perfectly attract the attention of users.

Humanized.com makes good use of the focus Principle. There is only one "free" visual element directly presented to the user on this page, which attracts attention very much, while still very concise and simple information transmission. Small Clues provide users with sufficient information to find "free" products.

Using a medium-intensity visual element to attract users' attention to specific areas of the webpage allows visitors of your website to easily reach point B from point A without thinking, ignore the logical relationships that may exist. The fewer problems that visitors encounter, the better they will have a sense of direction and trust the company presented on this website. In other words, the fewer content displayed on the screen, the better the user experience, the primary goal of availability.

4. Try to make the features explicit

Contemporary web design always ridicule the use of big buttons with clear visual effects to instruct users: Step 1-Step 2-Step 3 ...... But from the design perspective, these elements are not actually fossil. On the contrary, these navigation functions are extremely effective because they can lead Web page viewers through the website in a very simple and friendly manner.

Dibusoft.com combines visual friendliness with a clear website structure. This web page has nine major navigation options, all of which are displayed at a glance. However, the color of these navigation may be too light.

The rationality of the function is the benchmark for successful user interfaces. It doesn't really matter whether the content is achieved. What matters is whether the content is well understood, and whether users feel that their interaction with the system is very comfortable.

5. Effective Writing

Because the website and the printing and publishing history are different, it needs to match the user's favorite Writing Method and match the browsing habits. The exaggerated words will not be read. Text without images, bold words, or italic keywords in a large segment is ignored. Exaggerated language will be ignored.

Seriously. Avoid too many technical terms, such as college or self-developed names, market-oriented names, company names, or non-stick names. For example, if you describe a service, you need to register an account. "register" is better than "start from here !" Better, while the latter is still better than "exploring our services ".

Eleven2.com. There are no rhetoric or exaggerated statements. Instead, there is a price: This is what users need.

Effective Writing optimization solution

• Use a short statement (directly hit the key, the sooner the better)
• Use the overlay method (classify the content, use multi-level titles, and use visual clues and tree charts)
• Use plain and intuitive language (a promotion slogan does not sound like an advertisement; give users rational and objective reasons to stop them on your website and enjoy your services)

6. Try to be concise

"Conciseness" is the primary principle of website design. Users seldom stop at a website because they like its design. Generally, they are looking for the information they need. Of course, the design provides them with help. Try to be concise, not complex.

Crcbus provides a clean and simple design for webpage visitors. Maybe because it is in Italian, you cannot understand what the website is doing, but you can clearly identify the navigation, title, content area, and footer. Note that all icons can clearly transmit information. As long as you hover your mouse over the icon, more information will be displayed automatically.

From the user's point of view, a good web page should be plain text without advertisement. The newly added content is closely related to the user's search target. This is also one of the reasons why Web pages facilitate printing bring a good user experience

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

7. Do not leave it blank

In fact, the benefits of leaving blank areas on the Web page are not even estimated. It not only reduces the cognitive load of Web Page visitors, but also makes it easier to obtain information displayed on the web page. When a new user browses a webpage, the first thing to do is to scan the entire page, divide the content area into appropriate blocks psychologically, and then process the information.

Complex structures are not easy to read, view, analyze, and use. If there are two options, one is to use a clear vertical line to separate the two areas, the other is to use some blank to achieve this effect, usually better choice is the latter, that is, leave blank. Layered to reduce page complexity (Simon's rule): the better the visual sense of hierarchy, the easier it is to obtain content information on your webpage.

The blank area is good. Cameron. Io uses blank areas as the main element of the design. In this way, the main information is highlighted.

8. Effective communication in "visualized" Language

Aaron marcus mentioned three basic principles in the article "effective visual expression", one of which is "visual language", that is, what users see on the screen.

• Organization: provides 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.
• Economic: minimize the use of visual elements. Simple, clear, distinctive, and highlighted. These four points need to be weighed. The simple meaning is that only the important elements required for expression can be presented. Clarity means that all components should be consistent with the meaning transmitted by them, and do not cause ambiguity or express ambiguity. Differentiation is very important. It requires that all elements should be unique. Highlighted means that key elements must be easily captured by cognition.
• Expression: an expression that is acceptable to users. To ensure smooth expression, the user interface must be balanced between readability, readability, structure, symbolic, many views, color and material effects. A page can contain up to three types of fonts and up to three types of font sizes-Up to 18 or 50-80 characters can be displayed in each line of text.

9. Standards are our friends.

Websites designed with traditional elements are not simply boring. In fact, traditional norms are very useful because they reduce the learning cycle and save effort to collect effectiveness. For example, if all websites enable different visual features for RSS feeds, this is a nightmare of availability. This is no different from the regular arrangement of data specifications or the regular arrangement of shelves in malls.

If you follow the rules, you will gain the confidence, trust, and trust of users, and prove your reliability. Follow your expectations-understand your expectations for a website navigation, text structure, and search bar. (Refer to Nielsen: Usability alertbox)

Babelfish in use: Amazon.com in Russian.

A typical example of usability testing is translating web pages into Japanese (assuming that your website users do not understand Japanese, for example, they use babelfish ), then ask your usability test subjects to search for some content on the webpage of a different language. If the regulations are well followed, users can find some inappropriate and special target content, even though they have no idea about the language.

Steve Krug recommends that you innovate only when you confirm that you have a better idea, but if you do not have one, follow the existing rules.

10. Early tests, often tests.

The teto principle can be applied to any web design, because availability tests always provide key insights for important issues and details of existing la S.

Do not perform tests too late, too few, or for inappropriate reasons. "Not testing for inappropriate reasons" means that many design decisions are for the moment, and you cannot universally declare that some layout methods must be better than others, because you need to weigh from a special perspective (consider the needs, the interests of investors, the budget, and so on)

Some important points should be kept in mind:

• According to Steve Krug's research, testing a user is twice as good as never happens, and testing a user at the beginning of the project is much better than testing 50 users at the end of the project. According to Boehm's rule 1, errors are common in requirements and design activities, and the sooner they are discovered, the more expensive they are.
• Testing is an iterative process. This means you need to design something, then test it, correct it, and then test. Some problems may not be found in the first round, because these problems may be covered by other problems, and users will be stuck on other issues.
• Usability Testing always produces useful results. Whether it is a problem with the existing website or does not violate some mainstream design errors, you will make a meaningful review of your project.
• According to weberger's law, website code developers are not suitable for testing. This principle also applies to designers. Because you have designed a website for a long time, you cannot examine it from a brand new perspective. You know how it is 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, you must test it.

References

• Designing valid tive user interfaces Suzanne Martin
• Summary on Web Design
• UID presentation (flash)
• Research-based Web Design & usability guidelines
• "The psychology of computer programming"Gerald weberger
• "Designing web usability" Jakob Nielsen [Jn/DWU]
• "Prioritizing web usability"Jakob Nielsen
• "Don't make me think"Steve Krug
• "Usability for the Web: Designing Web sites that work"Tom brinck, Darren gergle, Scott Wood
• A summary of principles for user-interface design
  

10 principles of valid Web Design

Chinese original: Xiaoxiao's weblog Translation: pandatv