Design Guidelines

11.4 Design Guidelines

Though this chapter focuses on the methods of Web usability engineering, knowingly leaving out a full listing of specific design guidelines (which would go beyond the scope of this book; see National Cancer Institute 2003, Lynch and Horton 2002 instead), we want to illustrate the above discussion by selecting a few important and generally accepted design guidelines.

11.4.1 Response Times To prevent users of an interactive application from losing a feel for the interactivity and active

flow control, the system’s response times in all interaction steps have to be below certain thresholds associated with the mechanisms of human information processing: a system response time of 0.1 second is felt as a direct response; waiting times of up to 3 seconds are tolerated without disturbing the train of thought; longer waiting times are perceived consciously (and normally unpleasantly). After 8 to 10 seconds, users generally begin to busy themselves with something else. For Web applications, it can be assumed that response times of up to 3 seconds are considered normal, and everything above and within the one-digit seconds range will just about be tolerated, provided there are hints that waiting may be rewarding.

For Web applications, observing such threshold values is a major challenge in view of the incalculable technical circumstances of Internet connections. For this reason, it is recommended to design “slim” pages. To this end, we should limit the number of images and other high-volume media elements per page, and use compression methods or reduce their format, resolution, or color depth to minimize the size of images. If high-volume images are unavoidable, then it is recom- mended to first show thumbnails and load the images themselves only at the explicit user request. As a rough rule of thumb, the entire volume of a single page should not exceed approx. 50 Kbytes. 4

Another method to accelerate the loading of a Web site specifies the dimensions of images in the HTML text to allow the browser to represent a page before the images are fully loaded. To give users an early chance to orient themselves and to enhance accessibility, alternative text should be used (using the ALT attribute in HTML).

If the content to be represented as a result of an interaction step is very large, then care should

be taken to maintain a suitable pagination (such as, for example, in most search engines). This reduces the data volume (and the waiting times for users) in each interaction step to that of a single page, so that the above response time thresholds can be kept more easily.

In general, users’ tolerance to delays is greatly increased if there are hints that the waiting time may be rewarding, the waiting time is plausible, and the user is informed about the waiting time in advance.

11.4.2 Interaction Efficiency Apart from a system’s response time, the time users have to spend for navigation and input is

also important for a system’s overall efficiency. Web applications normally have point-and-click

4 Rough calculation: slow Internet connections via a modem have a maximum transfer rate of 56 Kbits/s; 1 Kbyte corresponds to 8 Kbits. To be able to keep within the 8-second rule mentioned in Chapter 12, a page should not exceed the following size (under optimal conditions, excluding loss of resources due to bi-directional data flow, etc.):

8 seconds × (56 Kbits/8) = 56 Kbytes.

226 Usability of Web Applications interfaces, with mouse activities playing a dominating role. Efficient interfaces of this sort

minimize the distances to clickable elements. At the same time, the size of elements should not

be below a certain minimum to ensure that (especially motoricaly or visually handicapped) users can accurately hit them. If Web applications require user input on a keyboard (e.g. to fill in forms), we should try to avoid frequent changes between mouse and keyboard, since these changes translate to considerable time delays.

Finally, we should also ensure that interesting items should be reachable in as few interaction steps as possible. As a rule of thumb, it is recommended to carefully check a Web application as to whether getting to certain items or services takes more than four mouse clicks.

11.4.3 Colors

A fundamental guideline consists in the warning not to make excessive use of colors. As a rule of thumb, roughly five colors are believed to represent the upper limit. Extreme hues, such as flashy or highly saturated colors, should be avoided.

Colors should not be used as an exclusive criterion to highlight different areas in a Web site. We should also use other factors, such as positioning, layout, etc., to highlight areas for several reasons. First, we cannot be certain that the selected color combinations will be represented the way they look on the developer’s computer due to device-dependent color depth. In fact, developers should get used to the fact that there are many alternatives to CRT monitors (e.g., LCD screens and video beamers), and that colors look entirely different on each device type, so that colors can convey an entirely different mood than originally intended. Moreover, we have to consider the fact that people with limited color vision should also be able to recognize the differences (see Figure 11-2).

Figure 11-2 Effects of limited color vision. 5

5 Found at ( http://usability.gov/guidelines/accessibility.html ) on September 5th, 2005

11.4 Design Guidelines 227 This is analogous to traffic lights; visually impaired people wouldn’t understand the color

information (red, green) if there were no additional semantic information (red always on top, green always at the bottom). The traffic-light analogy also makes clear that properly used colors can provide valuable support, e.g., red signals danger, green signals that everything is alright. Finally, we should also bear in mind cultural differences in the meaning of colors (see section 11.4.7).

11.4.4 Text Layout Reading text on a screen is significantly less efficient than reading it on paper. For this reason,

text should be carefully laid out, especially in Web applications with a large amount of text. As the example in Figure 11-3 makes clear, fixed text layouts should be avoided to allow the browser to adapt the pagination and layout to different window sizes, and to allow the user to select their favorite font size (and perhaps character set). As a basic setting, sans-serif 7 character

Figure 11-3 Example of bad text layout and color contrast. 6

6 Found at ( http://iteslj.org/Articles/Kelly-MakePage/samples/bad/2coltable.html ) on September 5th, 2005. 7 Serif fonts are better for long text parts, but they tend to blur on the screen, due to anti-aliasing algorithms.

228 Usability of Web Applications sets (e.g., Verdana, a font especially designed for screen representation) in a proper font size (for

visually handicapped users) should be selected. Block letters and small caps should be avoided. Moreover, the background of Web pages should not have a structure or pattern, because this can detrimentally affect the readability of foreground information.

Since reading text on the screen is more tiring, users normally tend to read text diagonally, i.e., they “scan” for certain catchwords. In view of this behavior, text should generally be concise, laid out in short paragraphs, and fitted with the expected catchwords (Nielsen et al. 1998). In addition, we should speak the “user’s language”, use meaningful names and terms, and ideally have text in users’ national languages.

11.4.5 Page Structure To ensure easy orientation within a page, we should avoid the need for horizontal scrolling,

because line-by-line reading means that users have to permanently move the window contents back and forth. In contrast, vertical scrolling is considered a “pardonable sin”. However, care should be taken that the use of any scrolling does not impair the effectiveness and efficiency of browsing through a page. Moreover, under no circumstances should important interaction elements, such as menus, become invisible as a result of scrolling; these elements may have to

be placed redundantly. Surveys have shown that a column-oriented layout similar to the usual format in daily newspapers accelerates the visual screening of a page, where the general search scheme is “from top to bottom and from left to right” (in this sequence) in the Western culture. This does not apply to the layout of continuous text as discussed in section 11.4.3 but it means that important items, such as menus and navigation elements, are best arranged on the left and upper page margins. In general, pages should not be overloaded. Also, the way that users skim through pages is greatly influenced by short-term memory capacity, particularly if it is a matter of finding the best correspondence to a searched element rather than an exact match, because the preliminarily best correspondences have to be memorized. Figure 11-4 shows an example of too much information and bad page structure.

The page structure should also allow users to print pages. If printing is not possible or difficult due to complex table or frame structures, then a separate print option or print pane should be offered.

11.4.6 Navigation Structure Navigation within a Web site or Web application represents a particularly important key criterion

for a site’s or application’s usability. The “getting lost in hyperspace syndrome” (see section 1.3.1) due to non-linear navigation has to be avoided at any cost. To this end, it is necessary to convey

a mental model of the navigation structure as quickly as possible, allowing users to “memorize the sitemap”. A clear and logical basic structure, supported by a sitemap, constant feedback on the current position within the structure (“Where am I?”), clear information about the content on the current page (“What can I do or find here?”), and the items reachable in the next interaction step (“Where can I go?”) are the most important ingredients of a well-designed dialog and navigation system. However, we should always bear in mind that browsers offer additional context-independent navigation elements (“Back”, “Bookmark”, etc.), which may impair the intended navigation structure or make it ineffective.

11.4 Design Guidelines 229

Figure 11-4 Effects of too much information and bad page structure. 8

Too much imagination in the development of a navigation system’s basic structure is generally detrimental to its usability. Most users are familiar with many well-known systems, so that these systems are easily understood. A good overview is found in the literature, e.g., in van Welie’s Navigation Patterns (van Welie 2005).

Further problems with regard to usability are heterogeneous navigation elements. Hetero- geneous navigation elements are mixed forms of spatial orientation, e.g., a combination of horizontal and vertical menus on the same hierarchical level, or variations in the technical implementation, e.g., a combination of static menus that fold open (tree views) and dynamic popup or pulldown menus. At first sight, the latter have the benefit that we don’t have to reserve a defined place. Unfortunately, this benefit usually turns out to be pointless, because we often have to build in an additional orientation aid (“Where am I?”). In contrast, such an aid is implicitly present in most static menus (highlighting the selected option).

Other elements that should be used sparingly are popup windows. Popup windows virtually represent “pinpricks” in a conceptual model of a hypertext-oriented navigation structure. Among

8 Webpage ( http://arngren.net/ ) found at ( http://www.webpagesthatsuck.com ) on September 5th, 2005.

230 Usability of Web Applications other things, they can cause users to get lost. A typical scenario is when a popup window covers

the main window. The user thinks he or she is still in the main window and decides to navigate back, which fails from within the current window.

The layout of associative hyperlinks (embedded in text) should ideally comply with the accepted and well-known conventions. In other words, we should have well-founded reasons if we want to turn away from standard representations. It is recommended to use special highlighting (e.g., small pictograms) for links that leave the current Web site.

The general rule is that simplicity and consistency represent long-lived quality criteria, while coolness and technical trumpery are fashionable things with very doubtful benefits.

11.4.7 Multiculturality The Web’s global availability translates to additional usability requirements resulting from the

cultural heterogeneity of users (see section 1.3.2). Even Web applications designed mostly for local use should not ignore these aspects, but think of people from other regions living in the application’s territory to prevent a loss of potential customers or hurting users’ feelings. Though it appears impossible to offer generally valid solutions, the identification of a “smallest common cultural denominator” enables us to avoid bad mistakes. The following are a few examples:

• Colors: Colors have different meanings in different cultures. This means that we should

avoid characteristics that are based excessively on the expressive power of colors. • Symbols: When a well-known sports shoe manufacturer started using a logo that was supposed to symbolize a flame on their products, the entire Arabic world felt offended, because the silhouette of the symbol was very similar to the Arabic letter for Allah.

• Language: Oscar Wilde’s saying “England and America – two countries divided by one common language” illustrates problematic language issues humorously. It is extremely important to speak the language of your customers on the Web.

• Representation of information: Users from other countries have special needs related to entry fields for names and addresses, measurements and dates, and information about regional product standards (Nielsen 2005). Interpretative guesswork should be avoided. Classic examples would be date formats: 11/03/2003 would be March 11 in Europe, but November 3 in the USA. A simple correction to 11/Mar/2003 can prevent this problem.

To explain how inconsiderate design decisions affect usability, look at Figure 11-5. First of all, foreign people have no chance to book in their native language or use English as a compromise. Second, firstname and lastname are presented in the wrong order, so foreign users cannot rely on common input patterns. Third, the additional text “. . . des Reisenden” is redundant.

Learning experiences can be a valuable help in developing applications that consider multicul- turality. Since the Web has conquered the world on more or less comparable levels, experiences resulting from the use of the Internet can be compared on an international level. For example, let’s look at how links are normally designed: Text parts in a specific color (e.g. blue) are interpreted as unvisited links and others in a different color (e.g. violet) are seen as visited links. The situation is similar for more complex elements. An input field followed by a button of any sort is identified as a simple search in appropriate contexts, and the perception of shapes

11.4 Design Guidelines 231

Client Data of Traveller

Salutation /Title Traveller's Lastname Traveller's Firstname

Payment Data

Creditcard valid through

Figure 11-5 Example of a German travel reservation form with three usability problems (translations on the left are added for this book).

mentioned above makes people recognize the combination of several elements as one single unit. Good examples are the Yahoo pages of Japan, Singapore, or Korea.

11.4.8 Confidence-generating Measures There is a noticeable phenomenon in commercial Web applications that doesn’t normally happen

for conventional software: users orient themselves in a vendor’s online presence, find a product, and eventually do not place an order or make a reservation.

While this is not a behavior operators of Web applications like to see, it can mostly be attributed to frequent Web usability problems (see section 11.3). In many cases, however, it is due to a lack of confidence in the virtual vendor, which deters users from important or risky transactions. The literature suggests several more or less simple measures that might help to strengthen users’ confidence in a vendor’s trustworthiness, including:

• The presentation of an “About Us” page, introducing the company and its e-commerce procedures (business terms and conditions), perhaps stating impressive figures, such as number of employees, number of “physical” outlets, etc.;

• Contact information, such as real-world postal address, e-mail address, and (ideally toll-free) phone number; • Mechanisms to assist customers and set up communities, such as chat rooms, (ideally synchronous) message boards, FAQ lists, and references of satisfied customers; • Activities (and their explanations) to secure data privacy and confidentiality; • Policies like customer-friendly warranty or money-back guarantee, etc.; • Treatment of customers (confirmation mails, etc.) after they place their initial order to

increase subsequent orders (Nielsen 2004); and many more – see, for example, Nysveen and Lexhagen (2002), Kaluscha and Grabner-

Kr¨auter (2003). Some of these items are already required by law in the EU.

232 Usability of Web Applications

11.4.9 Other Design Criteria Animations should be avoided, unless they have specific semantics, such as simulations of

physical processes, since they attract the attention of users, distracting them from important information on a Web page.

If properly used, icons support users in recognizing information or system functions associated to them. However, there is a risk of confusing users when icons are not clearly designed or used for improper metaphors. Icons should be subject to user tests, and they should always have redundant text information, for example, mouse-over popup options.

Finally, we should mention a very important “meta-design” criterion. Every design aspect (color scheme, layout, character set, navigation aid, etc.) has to be used consistently across the entire Web application to keep the learning effort to a minimum. Ideally, consistency is not limited to a particular application. It also refers to comparable other applications, or to the Web as a whole (see also our discussion of the link design).

In closing this topic, we should point out that the literature describes these criteria extensively, and a full discussion would go beyond the purpose and scope of this book. In addition, observing even the most complete list of guidelines does not necessarily lead to usable applications, unless the development process integrates the usability-oriented activities discussed in the following.