Constructing User-Centered Websites: Design Implications for Content Organization
The last issue of Usability News, discussed the need to make websites intuitive and predictable by structuring them according to users' mental model of how it should be logically organized - which can be done by examining how representative users arrange the nodes in a prospective site according to their belongingness to different categories, hierarchy, etc. (see Bernard, 2000).
Once this is done, the designer can construct and place the contents on the website with a good degree of confidence that it will reflect the mental model of the representative user. The placement of the content on the website, however, is critical to a site's eventual success. For this reason, this article is intended to address some of the more important human factors issues in the design of the content within a website.
First, it is advisable to initially concentrate on two types of constructions - wireframe and greeked - in order to equally focus on all of the major content elements of a site. The wireframe construction is a preliminary or prototype site that includes the text, web page structure, and the nodes, but not the graphics. This is intended to allow designers (and evaluators) to concentrate on the text and framework of the site while not being influenced by the graphics. That is, if there is no separation between the text, structure, and the graphics, the graphics tend to control the direction of the design. As with any prototype, the wireframe construction should be simple to produce and change through successive iterations.
The greeked construction is intended to show the graphics without the text, which should enable the graphic designer to be less encumbered by the mechanics of the site, and thus allow the designer to initially focus entirely on the graphics and graphic placement within the site. In place of where the text would normally be, nonsense or "greeked" text is provided.
For the purpose of this discussion, this article will concentrate on the placement and organization of information within a wireframe construction (see Fuccilla & Pizzolato,1998 for a more extended discussion of wireframe and greeked constructions). An in-depth discussion that emphasizes graphic design methodology is addressed by researchers such as Sano (1996). (See Nielsen, 1998 for an example of a greeked construction).
Organization of the Information
An important step in organizing the content of a website is to place the information on the website according to how individuals typically view information. For example, a study by the Poynter Institute found that users characteristically look first at the headlines, then the article summaries, and then captions (Poynter, 2000). They also found that users were twice as likely to fixate on the text rather than on the images in their initial visit to a site. This, of course, conflicts with the common practice of using images to convey important information in lieu of text. Consequently, the best way to insure that a user will grasp the content and meaning of a web page is to have well formulated titles and headers that are placed around the images.
Moreover, users often choose to ignore an area within a web page because it is in a low information-priority area, such as the bottom of a page (Nielsen, 1999a) or they believe the information is typically of no real interest to them. This is especially true for banners or items that look like advertisements. For example, the Poynter Institute found that only 22% of ads and promotional icons were viewed, 45% of the banner ads were viewed, and 64% of photos were viewed (Poynter, 2000).
In addition, users often forget or are unwilling to scroll in a particular direction (especially horizontally), and thus do not see the information that is located outside of the primary viewing area. To reduce this problem, it is recommended that website information always fit within the horizontal viewing area of the screen. To do this, the rule is still to design for lower resolution settings. According to the most recent GVU survey (1998), around 11% of users set their resolution at 640x480. However, the actual usable size to avoid any scrolling in this resolution is 590x325 pixels. Most users (over 32%), though, have a resolution of 800x600. To avoid scrolling, the usable size is actually 750x425 pixels. A compromise would be to place all of the most important information within the lower resolution visible areas and place less important information in the higher resolution visible areas.
In organizing the content, it has repeatedly been found that people find information faster and make fewer mistakes if the hierarchical structure of the site is broader rather than deeper. That is, if users have to follow more than two or three hyperlinks paths to get the information they want, then the chance that they will find this information will be reduced considerably. Similarly, 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. For instance 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 produces reliably faster searches for information and less confusion than a three-level site with 8 sequential links at all three levels. The reasoning here is that the deeper the levels, the more a user has to rely on short-term memory and is thus more prone to errors. (For a good discussion of the breadth versus depth issue with websites see Larson & Czerwinski,1998).
In addition, search time is found to be significantly faster when link information is grouped as link headings by columns rather than by rows (Nygren, 1996). Moreover, at SURL we found that users find specific information faster and are more satisfied with the structure of the site when the information is presented in columns according to their respective categories than when the information is presented according to an alphabetized listing of these links (Bernard & Chaparro, 2000). This is believed to occur because users have a difficult time trying to guess the link names in order to know where it would be placed alphabetically within the alphabetized column listing.
The style of writing within each web page is also vital to its overall usefulness. In fact, a study by Morkes and Nielsen (1997) found that a sample website "scored 58% higher in measured usability when it was written concisely, 47% higher when the text was scannable, and 27% higher when it was written in an objective style instead of the promotional style used in the control condition and many current web pages" (p. 1). That is, viewers tend not to spend too much time on a particular page. Instead they scan the page looking only for information that is of direct interest to them. It is therefore recommended that sites highlight keywords, have bulleted lists, and have only one key idea per paragraph when possible (Morkes & Nielsen, 1997).
Making the Structure More Navigable
Obviously, the issue of navigation is vital to a site's usability. Unfortunately, navigational problems are a common occurrence within websites. For example, one study found that 58% of users will make two or more navigational errors while searching for information (Forsythe, et al., 1997) 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).
There are many reasons for this occurrence. However, three major factors have been attributed to cause most of the navigational problems. They are, user disorientation, embedded digression, and the "art museum" phenomena (Foss, 1989).
User disorientation or "lost-in-hypertext" problems arises from unfamiliarity with the structure or conceptual organization of the site. Here, users have difficulty deciding which node to view next. This decision first involves understanding one’s current location within the site and then selecting the proper route. However, users often may not even know where their current location is within a site. A proper way to reduce this problem is to organize the site according to the typical users' mental model of how the site should be organized - as discussed above and in the last issue of Usability News (Bernard, Winter/2000). Also, the use of the "bread crumb" navigation technique seems to work well in reducing disorientation problems (see Nielsen, 2000 for a discussion of this).
The embedded digression problem occurs when users pursue digressive paths and lose their place or forget to return to their previous place in a site. This can be lessoned by reducing the number of imbedded links (links within the body of the text) by placing them instead at the end of the document or in a specific link area. Users will then be less tempted to exit the web page before they have read all the information.
The "art museum" problem refers to the lack of memory for the details of the previously viewed information because of a sites' sheer vastness of options and information. For example, as when viewers while visiting a museum cannot hope to remember all the paintings they have seen because of their great numbers, a large number and variations of navigational information may consequently overwhelm the user to a degree that they can remember only a small percentage of this information.
This problem can be reduced by omitting unnecessary navigational information and properly organizing the navigational structure of the site. For example, comparing three types of structures: pure hierarchical (web pages that can only access other web pages directly above or below them), nonlinear (web pages with links that could be connected to any number of other web pages throughout the site), and mixed design (hierarchical structure with cross referential links to key nodes), McDonald and Stevenson found that participants remembered the content of the site the most with the mixed design. The pure hierarchical structure was found to be too restrictive, while the nonlinear structure presented too much information at one time (McDonald & Stevenson, 1998). Thus, it is generally recommended that sites present only links that are necessary for navigation (any more than that this can confuse and disorient users) and that the navigational structure should be of a mixed designed. 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 an appropriate one.
Other aids that are beneficial are the use of sitemaps, which are designed to visually show the navigational structure of a site. This is discussed in previous issues of Usability News (Bernard, Winter/1999; Bernard, Summer/1999; Bernard & Chaparro, 2000)).
Of course, the placement of information should follow the general Web conventions and guidelines that are set by usability experts. This, is sometimes difficult to do because of the lack of set standards. Also unfortunately, some of the conventions that are now becoming standard were created only to aid in the aesthetics of a particular design, not because they aid in a website's usability (see Nielsen, 1999b for a good discussion of this). Probably the most popular, and one of the better design guides, is the Yale Style Manual by Patrick Lynch and Sarah Horton (URL address found in reference below). Other fine guidelines include the AmeritechTM usability guidelines by Detweiler and Omanson (http://www.ameritech.com/corporate/testtown/library/standard/web_guidelines/index.html) and the MicrosoftTM usability guidelines, compiled by Kevin Keeker (http://msdn.microsoft.com/msdn-online/workshop/management/planning/improvingsiteusa.asp).
Bernard, M. (1999). Preliminary findings on the use of sitemaps . Usability News 1.1 [Online] ../usabilitynews/1W/Sitemaps.asp
Bernard, M & Chaparro, B (2000). Searching within websites: A comparison of three types of sitemap menu structures. Human Factors and Ergonomics Society 44th Annual Meeting in San Diego, California.
Bernard, M. (1999). Sitemap design: Alphabetical or categorical? Usability News 1.2 [Online] ../usabilitynews/1S/sitemap.asp
Bernard, M. (2000). Finding Information on the Web: Does the Amount of
Whitespace Really Matter? Usability News 2.1 [Online] ../usabilitynews/21/whitespace.asp
Bernard, M. (2000). Constructing user-centered websites: The early design phases of Small to medium Sites. Usability News 2.1 [Online] ../usabilitynews/21/webdesign.asp
Detweiler, M. C. & Omanson, R. C. Ameritech web page user interface standards and design guidelines. [Online] http://www.ameritech.com/corporate/testtown/library/standard/web_guidelines/index.html
Forsythe, C., Ring, L., Grose, E., Bederson, B., Hollan, J., Perlin, K., & Meyer, J. (1996). Human Factors Research and Development for the Internal Web at Sandia National Laboratories: A Review and Update (conference proceedings).
Foss, C. L. (1989). Tools for reading and browsing hypertext, Information Processing Management, 25, 407-418.
Fuccilla, J. & Pizzolato, J. (June/1998). Creating web site designs based on user expectations and feedback. Internetworking [Online] http://www.sandia.gov/itg/newsletter/june98/web_design.html
Georgia Tech Research Corporation. GVU's WWW User Survey [On-line] http://www.gvu.gatech.edu/user_surveys/
Keeker, K. (1997). Improving web site usability and appeal. [Online]
Larson, K & Czerwinski, M (1998). Web page design: Implications of memory, structure and scent for information retrieval. [Online] http://www.research.microsoft.com/users/marycz/chi981.htm
Lynch, P. & Horton, S. (1999). Web Style Guide: Basic Design Principles for Creating Web Sites [Online] http://info.med.yale.edu/caim/manual/contents.html
McDonald, S., & Stevenson, R. J. (1998). Effects of text structure and prior knowledge of the learner on navigation in hypertext. Human Factors, 40,18-27.
Morkes, J. & Nielsen J. (1997). Concise, scannable, and objective: How to write for the Web. Alertbox [On-line] http://www.useit.com/papers/webwriting/writing.html
Nielsen J. (1998). Testing whether web page templates are helpful. Alertbox [Online] http://www.useit.com/alertbox/980517.html
Nielsen J. (1999a). Top ten mistakes revisited. Alertbox [Online] http://www.useit.com/alertbox/990502.html
Nielsen J. (1999b). When bad design standards become the standard. Alertbox [Online] http://www.useit.com/alertbox/991114.html
Nielsen J. (2000). Is navigation useful? Alertbox [Online] http://www.useit.com/alertbox/20000109.html
Nygren, E., & Allard, A. (1996). Between the Clicks" Skilled Users Scanning of Pages. Designing for the Web: Empirical Studies. Human Factors and the Web/HTML Conference. Sandia National Laboratories, Albuquerque, NM.
Poynter Institute (2000). Definitely not your father's newspaper and surprise! All eyes on test [Online] http://www.poynter.org/centerpiece/050300.htm
Sano, D. (1996). Designing large-scale web sites: A visual design methodology. NY: John Wiley & Sons, Inc.