Criteria for optimal web design (designing for usability)

By Michael L Bernard

People often become lost within the structure. In fact, 58% of users will make two or more navigational errors while searching for information (Forsythe, et al., 1996) and 66.8% of users have stated that one of the greatest problems about the Web is "not being able to find the information that I am looking for" (GVU, 1998). Generally there are four major reasons for this occurrence (Foss, 1989):

First difficulty is disorientation or "lost-in-hypertext problems, which arises from an unfamiliarity with the structure or conceptual organization of the site.  Here, users have difficulty deciding which node (which is typically one web page) to view next because they are unable to visualize where the information they are looking for could be. The decision concerning which node to view next first involves understanding one’s current location within the site, then selecting the proper route. However, users may not even know their current location within a site.

A proper way to reduce this problem is to organize the site according to the  typical users' mental model of how a site should be organized. This can be done by having representative users sort cards into several categorical piles in which each card represents the information that would be placed on the actual website. Each pile should indicate the information that would be clustered within each category and subcategory. This would give the designer knowledge on how users mentally organize the structure of a particular site -a technique that uses this method is discussed in Usability News (Bernard, 2000).

In addition, the placement of submenu titles may also help reduce disorientation. For example, Gray (1986) found that of the navigation errors made within a hierarchy, 40% of them were in the third and fourth levels with submenu titles. Without submenu titles, 59% of the errors were made in the third and fourth levels. Moreover, according to Bransford and Johnson (1972), participants who have read passages with titles recalled approximately twice as many items from the passages and had higher comprehension than participants who did not have passages with titles.

The use of navigational aids such as color coding and consistent logos and banners should also reduce disorientation (see the Yale Style Manual for a discussion of this) and the use of the "bread crumb" navigation technique (for a discussion, see menu page) may help in reducing the disorientation problem as well.

The second difficulty is the embedded digression problem. This occurs when users pursue digressive paths within websites and lose their place or forget to return to their original document. This can be lessened by reducing the number of links embedded in text by placing them instead at the end or on the side of the document. However, Knoved and Shneiderman (1986) found that users preferred and were more accurate in answering information using embedded links than an explicit grouping of links outside the text. Yet, they also stated that embedded links could be disruptive in that the user "may be inclined to examine a particular subject or subjects in detail without first getting an appreciation of the overall context" (p. 316).

A recent study by Bernard, Hull, & Drake (2001) examined the effects of embedding associative links with a document, as well as placing them at the bottom, at the top-left, and left, at the same height in which they correspond with the document. No significant differences between the four link arrangements were detected in terms of search accuracy, time, or efficiency. However, there were significant subjective differences between the links arrangements favoring the embedded links. That is, participants indicated that they believed that embedding the links within a document made it easier to navigate, more easily recognize key information, promoted comprehension, and was easier to follow the main idea of the passages while searching for specific information. Moreover, participants significantly preferred the embedded link arrangement to the other arrangements. Conversely, placing links at the bottom of a document was perceived as being the least navigable arrangement, and was consequently least preferred. 

Thus, while embedded digression may be a problem for some users, this should be weighed against the subjective perceptions that favor the embedded link arrangement. 

The third difficulty is the "art museum" problem. This refers to the lack of memory for the navigational details of a significant part of the site because the viewer is overwhelmed by the sheer amount of information. For instance, as when a patron visiting a museum cannot hope to remember the details of all the art work because of their great number, a large number and variation of navigational information (such as the various nodes they have visited) may consequently overwhelm the user. This often can have the effect of reducing a person's recall of the pages they have visited.

This can be lessened by reducing the amount of information presented at one time and properly organizing the navigational structure of the site. For example, in a study comparing three types of structures: pure hierarchical (web pages at one level can only access by a web page directly above or below it), nonlinear (links could be connected to any number of other web pages on the site), and mixed design (hierarchical structure with cross referential links) researchers found that participants recalled more information with the mixed design. The pure hierarchical structure was found to be too restrictive, and the nonlinear design presented too much information at one time (McDonald & Stevenson, 1998). Thus, sites should present only the amount of links that are necessary for navigation -superfluous links will increase the probability that the users will be confused and disoriented. Additional support for this conclusion can be derived from the Hick-Hyman law, which generally states that the greater the number of options (in this case navigational options), the longer it takes to find the appropriate one because of greater uncertainty. 

Other aids that are beneficial to navigation are the use of sitemaps. Sitemaps may, if done properly, present the structure of a site in a more cognitively manageable way by showing a site's main structure and the various link to that structure. This is discussed in the previous issues of Usability News (Bernard, 1999).

The fourth difficulty may be the structure itself. That is, it is generally found that people make fewer mistakes if the hierarchical structure of the site is broader rather than deeper. In fact, research has generally found that ideally all information should be placed within three hierarchical levels from the initial homepage of the site. Specifically, the more levels users have to take in order to get the information they want, the less chance they will find this information. For instance, in placing hyperlinks on a web page, Larson and Czerwinski (1998) point out that a moderate level of breadth is optimal if it is preceded by a well-organized layout. In their study, they reported that a two-level site beginning with 16 sequential links on the first level, then 32 links on the other produced reliably faster searches for information and produced less confusion than a three-level site with eight sequential links in all three levels. The reasoning here is that the deeper the levels, the more a user has to rely on short-term memory. Deeper level sites also have more general (and consequently more vague) link descriptions at the top level, which makes it more difficult for users to figure out and remember the correct paths to a target (For a good discussion of the breadth versus depth issue see Larson & Czerwinski,1998). 

However for sites that must have deeper structures (4 or more levels), Norman and Chin (1998) found in their study of different menu tree structures that users browsing for specific information will find this information faster if the structure is concave (breadth of 8 x 2 x 2 x 8 pages). That is, it should be broad at the top level and at the lowest or 'base' level, while the interior of the web structure should have a narrower level of breadth (see Figure 1 below). They argue that a broad top level gives the user enough specific information to formulate an idea as to the correct path to take, while concentrating much of the information (and the choices) at the base level will help the user find that specific item. A narrower breadth interior will, in turn, reduce the likelihood of getting lost within the site because the user will have fewer choices, and consequently less chance of being disoriented.

Figure 1.  Concave (8 x 2 x 2 x 8) menu tree

 
As discussed by Bernard (2002), depth alone may not be the sole, or even the greatest determinate in predicting search performance. In fact, as was shown, the shape of a hypertext structure had at least as much to do with search efficiency than its depth. Indeed, a (4 x 4 x 4 x 4) structure was found to be not only less efficient than hypertext shapes of the same depth (i.e., a (6 x 2 x 2 x 12) structure), but structures that were deeper, such as a (3 x 2 x 2 x 2 x 12) structure. As discussed, much has been said about hypertext depth, in that the greater the depth, the less informationally efficient the structure should be (e.g., Jacko & Salvendy, 1996; Snowberry, et al., 1983). However, what seems to be occurring is that the search efficiency is at least in part, determined by the properties related to the overall shape of the hypertext structure. These properties, then, act to either help facilitate or impede hypertext efficiency by altering the general complexity of the structure. Accordingly, having an inefficient shape will decrease a hypertext’s search efficiency.

Consequently, the goal should always be to reduce the complexity of the site as much as possible. Thus as shown in Figure 2, the ideal structure of a website would have much of the site's information accessible at the first level (shown as the horizontal bar). Structures that have multiple levels should concentrate the information at the first level when possible, and at the level closest to the terminal nodes (at the bottom of the pyramid). 

Figure 2.  The ideal web structure with multiple levels

 
The arrangement of links can have a marked effect on search time and satisfaction. For example, it has been found that search time is significantly faster when links are grouped in columns rather than by rows (Nygren, 1996). However, as mentioned above, expandable link columns have been shown to decrease performance in terms of search time, errors, and number of clicks compared to bread crumbs, or simple link-column navigation (Maldonado & Resnick, 2002).

Moreover, as discussed in Usability News (Bernard, 1999), experienced and novice users found specific links faster and were more satisfied with the structure of the site when the information is presented in columns according to their respective categories rather than when the links are presented in columns according to an alphabetical listing of links. This is believed to occur because users have a difficult time trying to guess the appropriate link name in order to know where to initially look within the alphabetized column listing.

In the same study, users preferred to have all the menu links presented on one web page instead of initially showing only the link categories, which would then show the sub-category menus on mouse-over. We felt that the latter option of initially placing only the link categories would reduce "link crowding" on the screen to a more manageable number -thus improving accuracy and satisfaction by making it easier to acquire the proper link. However, no significant differences between the former and the latter category options were found. Interestingly, a large portion of users stated that they would prefer the latter option if they were more familiar with the menu structure and the menu terms. Thus, one may want to have a full categorical link organization, but also have an option to initially show only the link categories, which would show the sub-menus on mouse-over for frequent users of the site (Bernard, 1999).

In the specific placement of links within the website structure, Kim and Yoo (2000) found in a study of Internet shopping mall sites that the combination of neighborhood links (links which move horizontally within the site), top links (links which move the user upward to a predetermined destination, such as the homepage), and index links (links which go to the lowest level regardless of the the current position, such as information on a specific product) significantly produce the greatest perception of navigation ease as well as general satisfaction. They also found that links which only moves up one level from its current position and down one level in a site causes a significantly lower perception of ease of navigation, as well as generally lowering the level of satisfaction with the site.

References

Optimal web Home |Usability News | WSU HCI Lab | WSU Human Factors | WSU Psychology