Web Design Core Issue 3: Designing for Users (3)

web| Design | problems

3.3 Common characteristics of the users

There are no common people, but people generally have similar physical characteristics. Most people see the same things, can remember, react to stimuli the same. But remember, people are not the same. Some people may have good eyesight, while others are poor. Some people are able to memorize hundreds of of links and filter them quickly, while others are unable to handle more than two options. Some people react very quickly, while others are slow. However, as with other aspects of web design, you should first look at common ground and be sure to consider the differences as well. We first consider the common characteristics of the user, such as vision, memory, and response to stimuli.

Vision

First, consider how users receive information from a Web site. Users primarily accept information from a Web site visually. They accept information from text, colors, images, and animations on the screen. The ability of the user to see is obviously very important. Imagine a poorly sighted user who cannot interact effectively with a Web site unless the text is a large font and the foreground and background are clearly contrasted. Unfortunately, many sites assume that users have superhuman vision. An example with this problem can be in h t T P://w W. Web d e S i g N r E F. C o m/c h a P t e r 3/v i s i o n i s u e s. H T M find.

To avoid annoying color combinations, designers should understand how the human eye accepts color. The three factors that affect the color are:

• Tone. The degree to which the colors are similar to the basic colors as red, blue, green, and some of their combinations.
• Saturation degree. The degree of difference between color and non color (white, gray, or black).
• Brightness. Under the same observation conditions, one color is brighter or darker than the other.

Visually impaired users often cannot distinguish between which tones have a slight difference and the same color as brightness and saturation. For example, a red-green blind (one of the most common color defects) cannot distinguish between red and green with the same brightness and saturation. Because of this visual flaw can not distinguish the problem of traffic lights, it is very annoying. These people with visual impairment may not know when to go or when to stop. On the web, if the hue, brightness, and saturation of the links are similar, how can users confirm that a link has been accessed or not accessed?

By following some simple rules, web designers may avoid visual problems. First, make sure you don't use a combination of text and pictures with similar tones. Instead of dark blue as a light blue background, you should use a yellow or white background.

Recommendation: Do not use text, images, and background colors that have similar tones.

Text and background colors with similar saturation can also cause problems. For example, do not use rosy rose as a background for gray-blue characters, both of which are similar to gray. White characters should be used on top of the rosy background, or vice versa. Recommendation: Do not use text, images, and background colors that have similar saturation.

The most obvious problem is that the contrast is not big enough. A black character on a black background or a bright character on a bright background may be unreadable on all monitors. Do not use light blue text on a light yellow background, and you should use blue on a white background. Or, using black on a white background is always a mistake. The contrast between yellow and black is very large, so they are used to make path markers. However, before you change the site to this color, do some design, not just for usability reasons.

Rule: Maintain a high contrast. Do not use text, images, and background colors that have similar brightness.

One important application of color on the Web page is the color of the link. Generally, you should avoid modifying the color of links. If you do modify the color of the links, remember not to use tones, saturation, and brightness that are similar to the background color, nor should the colors between links be the same. For example, do not change the color of a link from red to pink. For some reason, designers will like certain types of combinations. Instead, consider changing the color of the link from dark blue to pink, which is similar to the normal state of the link. Note that depending on the link state, the background color may also interfere with the readability of the link. Therefore, White is a good background color. If you have to make sacrifices on the color contrast, the color of the links you've visited can be slightly less than that of the linked users.

Links and text often collide with background colors. In particular, you should avoid using patterns with multiple shades, saturation, and contrast to do the background. Speckled and textured patterns are often a bad background; you should use a fine pattern or a simple color.

Suggestions: Avoid the use of complex background patterns.

To make Web pages more readable, or for people with visual defects, web designers should use colors that differ in two ways, such as hue and brightness, to differentiate between items. If this rule is followed, those who have a vision defect in one area (such as red-green blindness) can still distinguish between different items through other features such as brightness and saturation. Rule: The color that is certain to differentiate between options, such as links, is significantly different in two ways, such as hue and brightness.

3.4 Memory

Memory is critical to a user visiting a website. If a user cannot remember anything while browsing the site, he will inevitably get lost because he cannot remember whether he has been to a certain page. But the user's memory is far from perfect, and they don't consciously memorize it. Users always try to get the most out of things by doing the least. Human nature suggests that users cannot spend a lot of time guessing something unless there is a good reward for doing so. Rule: The user tries to achieve maximum benefit with minimal effort.

Of course, a good income is different for different people. Some people like to solve complex problems, just for the sake of personal satisfaction. For them, the rewards are a strong sense of achievement through overcoming difficulties. Let's assume, however, that users do not typically behave like this, and that they work hard only when necessary or when they do bring good returns. If you have a different view on this point, you might as well assume that the user is lazy. More rules on user response will be given later in this chapter. The former rule is only used to link the idea of memory into one.

It is now assumed that users will not like or even avoid visiting sites that require great effort from them, forcing them to remember will not be a good idea. As a practical example, consider an automated telephony banking interface. You call the bank, the bank asks you to enter the account number, and then gives you a list of options and their corresponding keys, "The balance of inquiries, please press 1, transfer, please press 2, please press 3 for payment." If you run into this system and you are unfamiliar with various options, the system may be very difficult to use. You have to remember all the options, if too many options, this may not be an easy job. If the same information appears on a small text menu, you can easily find them. All you need to do is browse the table and select the appropriate item. The sound example becomes difficult to use because of the need for memory. Generally speaking, recognition options are always easier than memory. Because users make mistakes and tend to use useful systems, we should try to rely on recognition, not memory.

Rule: recognition is easier than memory, so don't force users to remember information.

There are many examples to show that recognition is easier than memory. Students generally think that multiple-choice questions are easier than filling in the blanks. Although you must learn, the fill in the blanks requires much more memory. The choice question becomes relatively easy because it can see the answer and recognize it.

Many of the rules and recommendations in this book are fundamentally related to the idea that recognition is easier than memory. For example, consider the idea of modifying the color of the link in Chapter 6th. If we turn off the color of the links so that the links never seem to be accessed, users will be forced to remember whether they have visited a particular link. If the link changes color, the user only needs to identify a different color to be able to confirm whether the link has been visited.

Rule: Do not have the same style and color for links that have been visited and not visited, which forces users to remember whether they have visited the link.

Another important feature of memory is that it is not perfect. It's not easy to remember things, and it's possible for a user to remember only a part of it, or it may be mistaken. Like the real world, repetition can improve memory. For example, a skilled user and a superuser will remember where the object is on the screen, but most users have only a vague impression of how the possible links and Web pages are organized. However, in memory, intuitive memory is one of the most powerful ways of memory. It is much easier to memorize pictures or to produce pictures of sentences and ideas than to memorize abstract, visual cues. Remembering a person's face or a place you've been to is much easier than remembering a name. So it would be wise to make the pages that need to be remembered look different from the other pages. For example, the site navigation map and home page form a security area for a user. It is important to use different images or colors to make them easy to remember. However, do not assume that the user has a perfect memory. Do not let the home page and other pages have subtle differences, or expect users to remember the text on the page to distinguish between the home page and other pages.

Suggestion: Since the image memory is easier, the pages that need to be remembered do look different from the other pages.

Another important memory feature for Web usability is the short-term memory of the user. Let's go back to the example of the telephone banking system. Users must remember them when they are told to have options. If you have too many options, users will forget some of the options. This is an example of a short-term memory in which, in a sense, there is a region of our brain devoted to short-term memory, which cannot be remembered in many ways and is unreliable. Cognitive scientists have long been interested in short-term memory and have done a lot of experiments. Some random objects or words are displayed to the participants, asking them to take a quick glance or make a choice from them to test their short-term memory. The results showed that the participants were able to remember about seven items, some two, and two fewer. This means that users can remember 5 ~ 9 items well and make a good choice from them.

Users can quickly remember the 7 (±2) project, which has a profound meaning in web design. If you provide users with a set of links, should they be limited to 5 ~ 9? This is best done if you want the user to make a good choice. For example, if you randomly give users more than 10 options, you will find it difficult for users to choose from them. Users tend to choose some extreme options. Some of the site's authors have seen this happen. A big music site (I'm one of its advisers) has a list of bands that have a problem with a name that starts with a letter A or Z with a much higher download rate than the other names. The reality is that users lack knowledge about the bands, so they browse the list and, unless something special gets their attention, they tend to choose the initial and final options to see what happens. In the process, they really can't remember these interesting band names, because it's too much. If you want users to choose the same important thing from a table, limit the options to 5 ~ 9.

Recommendation: Limit similar options to 5 ~ 9.

However, do not pursue 5 ~ 9 options too much. Some designers may be misled by this rule, and think a Web page can only have 5 ~ 9 links. When content is plentiful, this is a big limitation. Users can gradually focus on options. For example, provide 5 ~ 9 different Web pages on a Web page. Each cluster has a mark and color, and the user can select it after viewing it. In each cluster, you can have 5 ~ 9 links. In this sense, on a screen, we can have as many as 8 1 links and users can still easily use them. For a well-designed web page with lots of links (less than 1 0 0), you'll notice how it's used to avoid memorizing, such as alphabetical order.

Rules of thumb about memory can also be applied to clicks. The user can remember three consecutive pages. There will be omissions in more memory. For example, after a user has visited more than 10 pages, they will remember some, but generally not in order. Pages that are easy to remember may be visually unique and can inspire memory. In the 5th chapter, we will discuss the Web page as a signpost in the website. However, if you want users to remember the path, they can usually only remember three (or less, if each page looks like it). Because of this, you should not want users to be able to remember paths with more than three entries. Recommendation: Only hope that the user can remember three consecutive items.

This is not a complete discussion of memory, but it can be used to remind web designers that we need to limit the number of memory items for the convenience of web sites. The less effort the user spends on memory, the better.

3.5 Response and Response time

If you look at a user browsing the site, you will find that some people are obviously faster than others. Some people will be able to read the content of the page faster, make a choice faster, and be dissatisfied with the slightest download delay. Some people have to work hard to keep up with, and be patient with web loading. However, over time, you will find that people's patience with the loading of the web will fade away, especially when the frequency of users is increasing. For example, consider how long it would be annoying for a user to wait in front of an automated teller machine. When the ATM first appeared, it was acceptable to wait 30 seconds to one minute compared to a long line at the bank.

Skills are more patient than they are unfamiliar or novel.

This idea is always visible on the web. It takes a lot of downloading time to access websites such as movie promotion sites or designer folders. These sites are called one-off visits because users are unlikely to come back. "Fly out of the Web", a lot of animation and long download time for users who have not seen these are not very annoying, and for those who visit the user, patience will slowly fade. Successful, frequently used websites, such as E-commerce sites, are fast. The needs and desires of users who first visit the site (who can be considered a novice to the site) are different from those who visit the site frequently. However, users do not have unlimited patience. When they get to know the site, they become more and more impatient. Generally the following rules are established.

Rule: The time a user is willing to wait is proportional to the reward he can get.

The more you return, the more willing you are to wait. People who get free items or are ready to download some code or music that they need seem willing to wait indefinitely. Consider those users who use modems to download music illegally from I n T e R n e T. They spend hours downloading music, but they can go out and find a job with the lowest pay and work the same amount of time to earn enough money to buy the whole C D. Of course, this imbalance will change with the increase in bandwidth, which is bad for music industry. The previous rule and this example show that if you want users to wait, it's best to have something useful to them.

The exact time that the user is willing to wait varies depending on personality and possible benefits. However, there are some general rules for response and response time. Some usability experts (Jakob nielsen,www. U S e i t. C o m studies of response time have reported similar results. The common user response and response time is summarized in table 3-1.

For the web, there are few quick responses. Many times, even a quick download link can take a few seconds. However, be careful with downloads like Java applets and F L-H files. If the user's processor is faster than yours, these programs may run faster than expected on their systems, and users may not be able to keep up. Sometimes you may notice that a scrolling marquee with J A V A in some pages scrolls in a speed that only Superman can keep up with. Note that the object's excessive response time is carefully downloaded.

In most cases, the speed of a Web site is unlikely to keep users out of the picture; in fact, it may be too slow. Because the user may become impatient, you should give them some hints to tell them how the task is performing. In the process of task execution, the browser itself gives a lot of feedback information. When you load a Web page, the browser typically converts the cursor to a waiting flag such as an hourglass, a runner, or a regular-beating identity (typically in the upper-right corner of the screen). Provides a process bar toward the bottom of the screen and displays a message about the object being loaded in the status bar at the bottom of the screen. Web designers can design their web pages to provide more feedback. For example, the designer can have their pages load the page first or one at a time. Typically, a user divides a picture into chunks, and he can see a bit each time it loads. Similarly, designers often use progressively loaded images, never clear to clear. This allows the user to get a blurry overall impression at first and, if necessary, observe the loading process. Figure 3-2 shows all of these process hints.

For those pages that only need 1 0 ~ 2 0 s to load, the incremental loading and feedback provided by the browser is enough to make the user understand what is going on. However, if the load takes longer, you should give the user more information. For example, many Web sites use binary technology such as F L s H to provide a special Web page display process with a status bar. These process bars can also be implemented through such techniques as J a V a S C R I p T. However, process bars or other forms of feedback are required only when the load time reaches 3 0 s or more.

If you are building a static website, there are some simple tricks to tell the user about the long load time of an object. Consider downloading a very large picture. In addition to interlaced and progressively displaying pictures, as discussed in Chapter 11th, l O W S R C properties can also be used. For example, you can load a low-resolution version of a picture first, or even a picture of a message that describes the load, such as:

Alternatively, you may be displaying a message. Some designers even use the image's a Lt property to display the size of the file or to load messages, such as:

Of course, it may be best to keep a LT text for its main purpose-providing users with an alternative method of not having an image. Another technique that can be used to tell a user for a long download of H-M L or C-C is to display the downloaded message on the background image, as shown in Figure 3-3, which will eventually be overwritten by the downloaded content.

Rule: Time is more important to the user than the number of bytes downloaded.

Because time is very important to users, you should make full use of every second. Considering the general process of browsing the web, they quickly browse the Web, find the right link, click, and then wait for the page to appear. Once the pages are loaded, they browse the web for the next link and spend time browsing the content. It is noteworthy that the time is divided into user thinking time and download time. For most users, the thinking time for browsing the web is short relative to the wait time. However, for content pages, users may spend a lot of time reading Web pages. One way to improve the response is to download the information that will be used in the user's thinking time. This can be called preload or pre-caching. Suppose you can download most or all of the content you want to read in a user's thinking time, and the next page download time will be significantly reduced. Just like the magician's prepared techniques, downloading in idle time can have magical time effects.

Recommendation: Pre-loading in the user's thinking time can improve the response time of Web pages.

A number of tools have been developed to speed up the browser by preloading the linked content of existing Web pages. The only problem with this approach is that many pages have very many links, so it's difficult for browsers to predict which pages the user will load next time. The best way to increase the cache's hit probability is by observing the log file to determine the general path of the user to the site and placing some code in the path to prefetch the page. However, this will only increase the probability of a hit. Preload ensures that the only way to improve the response is when a user accesses a Web page with a linear structure.

Recommendation: Use preload when accessing a Web page with a linear structure.

To view the preload of a linear structure of a Web page, browse the H t T P://w W. Web d e S i g N r E F. C o m/c h a P t e r 3/p r e L o a D d e m o. H T M. The response time of the Web site is the key to the user evaluation of the site usability. In addition to the Web page loading, even if the page has been loaded, time is also important to the user. For example, a Web page is loaded quickly, but users cannot understand the content of the page in a minute, and they will be frustrated as long as they wait to download the page. Consider the so-called "one-minute Web page" concept. The so-called "One Minute Web page" refers to the user can get the main points of the page in a minute, and determine whether they need to read the content more seriously. Tips for users to determine the content of the page in a minute and the intent of the download.