30 basic concepts not to be overlooked in usability design of Web sites

You don't have to get other people's consent on everything. As a professional web developer, you are an advocate of your visitors ' interests and needs, and you must stick to your understanding of a good user experience to ensure that your visitors may still find their way under a complex web site architecture. This means that when discussing with users and colleagues, you must be able to stick to your position and communicate your ideas effectively. In fact, your job is to compromise the idea of faulty thinking and misleading ideas, rather than blindly follow them.

In this situation, there is nothing to help you, except the profound knowledge that is related to the fundamental problem in your work. However, even if you know the knowledge, it is important that you know how to address these concepts and how to use them in the discussion. In addition, preparing some of the exact terms you may need is handy as an argument and helpful for your discussion.

In this article, we present 30 important usability issues, terms, rules, and principles that are often forgotten, ignored, and misunderstood. What is the difference between readability (readability) and legibility (legibility)? What exactly does 80/20 and Pareto principle mean? What do you mean by "minesweeper" and "Satisfaction"? What is the gradual reinforcement and graceful demotion? You can find the answer.

I. Usability: Rules and principles

7±2 principle

Because the human brain has limited ability to process information, it divides complex information into blocks and small units. According to George A. In the study of Miller (George A. Miller), human short-term memory usually remembers only 5-9 things at a time. This fact is often used as an argument for restricting navigation menu options to 7, but the magic of "7, plus 2 or minus 2" has sparked heated debate. It is not clear, therefore, whether the 7±2 principle can, or should, be applied to the web. Miller's research.

2-Second principle

A loose rule that users do not need to wait more than 2 seconds for some system responses, such as application conversions and start response times. Choosing 2 seconds is a bit arbitrary, but it's a reasonable order of magnitude. The reliable principle is that the less user waits, the better the user experience. [Availability First]

3 times Click Principle

According to this principle, users will stop using the site if they cannot find information and complete the site function in 3 clicks. In other words, this principle emphasizes clear navigation, logical architecture, and the hierarchy of subsequent sites. In most cases, the number of clicks is irrelevant; what's really important is that visitors always know where they are, where they've been and where they're going. If users feel they have a good understanding of how the system works, even 10 clicks, users will feel OK.

80/20 principles (Pareto principle)

The Pareto principle (also known as the important minority rule and the sparse principle of factors) points out that the 80% effect comes from 20% of the reasons. This is the basic rule of thumb in business ("80% of sales come from 20% customers"), but it can also be applied to design and usability. For example, we can significantly improve the effect by identifying 20 of the users, customers, activities, products or programs that contribute 80% of the profit, and maximizing their application.

8 The golden rule of interface design

As a result of the research on interface design, Ben Shneiderman proposes and collects some of the principles inspired by experience that apply to most interactive systems. These principles apply to user interface design, but also to web design.

1. Striving to maintain consistency

2. Provide available shortcuts to old users

3. Provide useful feedback

4. Design End Function dialog box

5. Provide simple error handling

6. Allow simple reversal function

7. Provide a sense of control. Support for internal control points

8. Reduce short-term memory

Fitzpatrick Law

Published in 1954 by Paul Fetz (Paul Fitts), Fitzpatrick's law simulates human activity by predicting the time it takes to move quickly to the target area, with a function of the target distance and the size of the target. This method is usually applied to the movement of the mouse, and the visitor must move from point A to point B. For example, this rule is important for how to place content areas in a more practical way, maximizing content availability and increasing content clicks.

Inverted pyramid

Inverted pyramid is a writing style that expresses summary text at the beginning of an article. This approach uses the famous "waterfall effect" in journalism, and news writers try to make their readers instantly aware of the subject of their stories. The article begins with a summary, followed by the key points, and the final minor details, such as background information. This inverted pyramid writing style is important for web writing and a better user experience, as online users need instant gratification. It's like Nelson's support.

Satisfaction

Web users don't like the best way to find the information they are looking for. They are not interested in the most reasonable and sound solution to the problem. Instead, they always scan the quick ' n ' dirty solution They think is "good enough." In the network, this way accurately describes the user's satisfaction: users use a "good enough" solution to the problem--in the long run some alternatives to better meet their requirements.

Second, the psychology behind usability

Infant Duck syndrome

Infant Duck syndrome describes the tendency for visitors to stick to the original design they remember and to judge other designs by similarity to the original design. As a result, users tend to prefer designs that are similar to the original design they remember and dislike unfamiliar systems. These usability problems are when many systems are redesigned: users, accustomed to previous designs, feel uncomfortable with the new Web site architecture and must find their way to use the site.

Ignoring ads

Internet users have overlooked everything that looks like advertising, and interestingly, they are very good at it. Although the advertisement was noticed, it was almost always overlooked. Since users have built associated schemas for different tasks on the site, they focus only on parts of the page where they think they might be relevant, i.e., small text and hyperlinks, when searching for specific information on the site. In this example, large colourful places or animated banner ads and other graphics are ignored.

[Source: Ignore ad some discoveries and some new discoveries]

Gripping effect (Zeigarnik effect)

Humans cannot tolerate uncertainty. We tend to find answers to questions that are of interest and unanswered. The gripping effect is based on the fact that compelling movies, articles and plots always have unexpected results and often leave with a sudden shock or a difficult situation. This effect is often used in advertising: Advertisers often ask visitors to answer the questions of the stimulus to force them to read the ad, click on a banner ad or follow up on a link.

The gripping effect, discovered by Bromma W. Zeigarnik (Bluma W.zeigarnik) in 1927, has created an emotional link among readers and has been extremely influential in marketing. Visitors can better remember what ads are, and even the smallest details can be remembered more clearly and exactly. In Web writing, the gripping effect is also used to lure visitors into the site. (like "Crawl our rss-feed to make sure you don't miss the second part of the article!").

Gestalt principle of visual perception

These principles are the basic principles of human-computer Interaction design Psychology.

The approach to the law holds that when we perceive objects as being grouped, it is easy to attribute similar objects to a group.

A real example of the approach to the MTV Music Awards.

Similarity rules mean that when content elements are similar to each other, we perceive them as a group.

Prägnanz Law (image-background) refers to the perception of a certain field of sight, some objects (images) appear to be highlighted, and other things in the field of vision subsided into the background.

The Mac logo can be seen as a regular smiley face and a side-happy face (looking at the computer screen)

The law of symmetry means that we tend to perceive objects as a symmetrical shape around the center.

The law of coherence means that we tend to perceive the form of a coherent or continuous flow, rather than a broken or discontinuous form, in fact they are inconsistent.

We perceive the letters ' I ', ' B ', and ' M ', although we actually see the shapes, only a few lines of white space of different lengths are dangling from each other.

Self-referencing effect

Self-reference effect is especially important in network writing, which can significantly improve the communication between authors and readers. Things that are associated with our personal beliefs are more clearly remembered than those that are not directly related to us. For example, after reading an article, users can better remember the characters, stories, or facts associated with their personal experiences. Self-referencing effects in usability are often used in the expression of Web writing and the presentation of Web content.

III. Availability Glossary: Terminology and concepts

Eye tracking

Eye tracking is the process of measuring the point at which we gaze (where we are looking) or the movement of the eye relative to the head. Eye-tracking monitors record the movements of each eyeball and highlight it in the most active areas of the site. Eye-tracking research can help estimate whether users browsing the site are comfortable using the site, and how quickly they understand the architecture and system behind the site. In the recent eye-tracking research Eyetrack07, you can find some interesting usability results.

Folding Position (Fold)

A collapsed position is the bottom position of a Web site in the visible area of the screen. Of course the folding position also depends on the screen resolution of your visitors. The visible area of the page (also known as screenful) is the area on the Web page that you don't need to pull the scroll bar to see. Since the folding position is visible without scrolling, it is often seen as an area that can guarantee the highest ad clicks and profits. However, the folding position is not that important. [Usability.gov]

Center Concave (center concave area)

Central Fossa, a part of the human eye, responsible for sharp central vision, is essential for humans to read, watch TV or film, drive, and any other activities that require high attention to visual detail. The central fossa is a small space for your eyes to aim at, and it is the only place where you can perceive the highest level of detail. The central recess corresponds to a two-degree view or a tight area of two thumbnail sizes in front of your eyes. This is where you deliver the most important information for your visitors.

The central concave view is very important because how your visitors look at your pages outside this widescreen area is very different. In this part of the area, you are the only area with the greatest attention to your eyes-only here without eye scans is necessary.

Comments

A comment is an automatic behavior that provides prompt and summary information where the link is linked and the user clicks where it will link to. Hints can be provided by a link's caption feature. From a usability perspective, users want to have full control of everything that is happening on the site; clear and accurate internal and external links to explain, reasonable connection to the source tag, can improve the usability of a website.

Graceful demotion (fault-tolerant system)

Graceful demotion refers to the ability of a Web site to display content and basic functionality even when its parts (partially or completely) have been unable to display or become invalid. In practice this means that the site displays content in every possible "fault" scenario and can be used under each user's possible configuration (browsers, Plug-ins, connections, operating systems, and so on). A rich, enhanced version of the page is still available for the "Ashes level user". For example, it typically provides an alternative display for multimedia content to ensure that the content can still be perceived when the picture cannot be displayed. [Wikipedia: Fault-tolerant systems]

Particle size

Granularity refers to the extent to which a large, complex dataset or information is divided into smaller units.

Hot Zone

The hot zone is a clickable area of the site, and once clicked it changes their form or/and appearance, which is typical: the focus effect when a link or any other site element is clicked.

Hot zones and notes on the smashingmagazine.com

Readability (legibility)

Legibility refers to the visual clarity of the article.

Mine

Minesweeper refers to those who want to determine the link between the site of the user and the site most of the interaction. In most cases, minesweeper is a clear warning signal in usability issues. Typically, minesweeper involves a user moving the cursor or pointer quickly on a Web page, gazing at where the cursor or pointer changes to a display link. [Usability.gov]

Meat Mystery Navigation system (MMN)

The mystery of meat in the network navigation describes the design that users want to find the destination of the navigation link or determine where the link is extremely difficult.

Physical consistency

This concept describes the consistency of the site's appearance, such as the location of the logos, navigation, graphical elements, and the use of the layout. Physical consistency is critical for better direction and effective site navigation.

Progressive Hardening (PE)

Progressive hardening is a design strategy that sites are created in a multi-level fashion-from the most basic features that fit all browsers to the more powerful features that fit the existing browsers. The main advantage of progressive enhancement is its "universal availability"--for example, it allows people using any browser or network link tool to access the basic content and functionality of the site, and it also provides a stronger version of the Web page using better network bandwidth and more advanced browser software. [Wikipedia]

Readability

Readability describes the comprehensible extent of the text based on complex sentences and difficult words. Readability metrics can often be divided into levels of availability, determined by some people who easily understand the age and level of reading an article. Readability is not easy to read. [Terms of availability]

User-centric design (UCD)

User-centric design is such a design concept, user needs, preferences and behavior determines the basis of the site, is the site structure, navigation and access to information methods. UCD is regarded as the standard way of modern network application, especially because of the rise of user creation content. Visitors must be actively involved in web2.0, so they need to be optimized for their needs.

Be on the lookout for (continuous attention)

Vigilance is the ability to continue to focus on long, monotonous tasks, such as school team articles looking for spelling errors, reminding appointments, modifying word processors documents, and so on. The task of vigilance in the modern network application is mainly embodied in the background, automation and the availability of the delivery system.

The design that comes to use

A come-and-go design is self-evident and intuitive, so the first and one-time users can use it effectively, without the need to implement the introduction or training.

Line diagram

A wireframe is a Web site's basic structure-the skeleton-that describes the idea, concept, and structure of a Web site. Wireframes can be designed to describe how the site is designed, what functions it provides, and how users perform their tasks. Wireframe usually does not have any visual elements, or a complete page layout; they are often the first drafts and sketches that designers draw on paper. (Author: translation speech shelafly)