Chapter 16
Content Organization
Content Organization
After ensuring that content is useful, well-written, and in a format that is suitable for the Web, it is important to ensure that the information is clearly organized. In some cases, the content on a site can be organized in multiple ways to accommodate multiple audiences.
Organizing content includes putting critical information near the top of the site, grouping related elements, and ensuring that all necessary information is available without slowing the user with unneeded information. Content should be formatted to facilitate scanning, and to enable quick understanding.
Research-Based Web Design & Usability Guidelines
16:1 Organize Information Clearly
170
Relative Importance:
Guideline: Organize information at each level of the Web site so that it shows a clear and logical structure to typical users.
Comments: Designers should present information in a structure that reflects user needs and the site’s goals. Information should be well-organized at the Web site level, page level, and paragraph or list level.
Good Web site and page design enables users to understand the nature of the site’s organizational relationships and will support users in locating information efficiently. A clear, logical structure will reduce the chances of users becoming bored, disinterested, or frustrated
Sources: Benson, 1985; Clark and Haviland, 1975; Detweiler and Omanson, 1996; Dixon, 1987; Evans, 1998; Farkas and Farkas, 2000; Keyes, 1993; Keyes, Sykes and Lewis, 1988; Lynch and Horton, 2002; Nielsen and Tahir, 2002; Redish, 1993; Redish, Felker and Rose, 1981; Schroeder, 1999; Spyridakis, 2000; Tiller and Green, 1999; Wright, 1987; Zimmerman and Akerelrea, 2002; Zimmerman, et al., 2002.
Example:
Strength of Evidence:
This design clearly illustrates to the user the logical structure of the Web site. The structure is built on the user’s needs—namely, completing a form in ten steps.
16:2 Facilitate Scanning
Relative Importance:
Guideline: Structure each content page to facilitate scanning: use clear, well-located headings; short phrases and sentences; and small readable paragraphs.
Comments: Web sites that are optimized for scanning can help users find desired information. Users that scan generally read headings, but do not read full text prose–this results in users missing information when a page contains dense text.
Studies report that about eighty percent of users scan any new page. Only sixteen percent read each word. Users spend about twelve percent of their time trying to locate desired information on a page.
To facilitate the finding of information, place important headings high in the center section of a page. Users tend to scan until they find something interesting and then they read. Designers should help users ignore large chunks of the page in a single glance. Keep in mind that older users (70 and over) will tend to scan much more slowly through a web page than will younger users (ages 39 and younger).
Sources: Bailey, Koyani and Nall, 2000; Byrne, et al., 1999; Evans, 1998; Koyani and Bailey, 2005; Koyani, et al., 2002; Morkes and Nielsen, 1997; Morkes and Nielsen, 1998; Nielsen, 1997e; Nielsen, 2000; Schriver, 1997; Spool, et al., 1997; Spyridakis, 2000; Sticht, 1985; Sullivan and Flower, 1986; Toms, 2000; Zimmerman, et al., 1996.
Example:
Strength of Evidence:
This page facilitates scanning.
16:3 Ensure that Necessary Information is Displayed
172
Guideline: Ensure that all needed information is available and displayed on the page where and when it is needed.
Comments: Users should not have to remember data from one page to the next or when scrolling from one screenful to the next. Heading information should be retained when users scroll data tables, or repeated often enough so that header information can be seen on each screenful.
Sources: Engel and Granda, 1975; Smith and Mosier, 1986; Spyridakis, 2000; Stewart, 1980; Tullis, 1983.
Example:
Relative Importance:
Strength of Evidence:
This header row disappears as users scroll down the table. This can negatively effect users’ performance on the site by exceeding their ‘working memory’ capacity.
16:4 Group Related Elements
Relative Importance:
Guideline: Group all related information and functions in order to decrease time spent searching or scanning.
Comments: All information related to one topic should be grouped together. This minimizes the need for users to search or scan the site for related information. Users will consider items that are placed in close spatial proximity to belong together conceptually. Text items that share the same background color typically will be seen as being related to each other.
Sources: Ahlstrom and Longo, 2001; Cakir, Hart and Stewart, 1980; Faraday, 2000; Gerhardt-Powals, 1996; Kahn, Tan and Beaton, 1990; Kim and Yoo, 2000; Nall, Koyani and Lafond, 2001; Niemela and Saarinen, 2000; Nygren and Allard, 1996; Spyridakis, 2000.
Example:
Strength of Evidence:
This site organizes information well by grouping core navigation elements and key topic areas. These features allow users to search and scan for information faster.
16:5 Minimize the Number of Clicks or Pages
Guideline: To allow users to efficiently find what they want, design so that the most common tasks can be successfully completed in the fewest number of clicks.
Comments: Critical information should be provided as close to the homepage as possible. This reduces the need for users to click deep into the site and make additional decisions on intervening pages. The more steps (or clicks) users must take to find the desired information, the greater the likelihood they will make an incorrect choice. Important information should be available within two or three clicks of the homepage.
One study found that the time to complete a task was closely related to the number of clicks made by users. It appears that users will keep clicking as long as they feel like they are getting closer to their goal. Another study showed that when users were trying to find a target, they were no more likely to quit after three clicks than after 12 clicks.
Sources: Evans, 1998; Levine, 1996; Nall, Koyani and Lafond, 2001;
Nielsen and Tahir, 2002; Porter, 2003; Spyridakis, 2000; Zimmerman, et al., 2002; Zimmerman, et al., 1996.
Example:
Relative Importance:
Strength of Evidence:
A topic such as Lung Cancer, one of the most common cancer types, is one click off of the homepage of this cancer site.
16:6 Design Quantitative Content for Quick Understanding
Guideline: Design quantitative information to reduce the time required to understand it.
Comments: Make appropriate use of tables, graphics, and visualization techniques to hasten the understanding of information. Presenting quantitative information in a table (rather than a graph) generally elicits the best performance; however, there are situations where visualizations will elicit even better performance. Usability testing can help to determine when users will benefit from using tabular data, graphics, tables, or visualizations.
Sources: Chen and Yu, 2000; Galitz, 2002; Gerhardt-Powals, 1996; Kosslyn, 1994; Meyer, 1997; Meyer, Shamo and Gopher, 1999; Meyer, Shinar and Leiser, 1997; Tufte, 1983.
Example:
Relative Importance:
Strength of Evidence:
This is a case where displaying information using graphs and bars allows users to discern the importance of data much more quickly than when it is presented in a table format.
Presenting numerical data as bar charts may speed up the user’s understanding of data.
16:7 Display Only Necessary Information
176
Guideline: Limit page information only to that which is needed by users while on that page.
Comments: Do not overload pages or interactions with extraneous information. Displaying too much information may confuse users and hinder assimilation of needed information. Allow users to remain focused on the desired task by excluding information that task analysis and usability testing indicates is not relevant to their current task. When user information requirements cannot be precisely anticipated by the designer, allow users to tailor displays online.
Sources: Ahlstrom and Longo, 2001; Engel and Granda, 1975; Gerhardt-Powals, 1996; Mayhew, 1992; Morkes and Nielsen, 1998; Powers, et al., 1961; Smith and Mosier, 1986; Spyridakis, 2000; Stewart, 1980; Tullis, 1981; Tullis, 2001; Zhang and Seo, 2001.
Example:
Relative Importance:
Content Organization
Headings, Titles, and Labels
Strength of Evidence:
An example of extraneous information. In this case, the user is looking for a weather forecast for Manchester, United Kingdom. The site provides this information, but also indicates tonight’s vacation weather for Prague—this information is extraneous to the user’s original task.
16:8 Format Information for Multiple Audiences
Guideline: Provide information in multiple formats if the Web site has distinct audiences who will be interested in the same information.
Comments: Information can be provided in varying formats and at different levels of detail on the same site. For example, information about cancer can be presented in differing ways for physicians and patients.
When segmenting content for two or more distinct groups of users, allow users from each audience to easily access information intended for other audiences. One study showed that users want to see information that is intended for a health professional audience, as well as for a patient or consumer audience. Users want access to all versions of the information without first having to declare themselves as a health professional, a patient, a caregiver, etc. To accommodate these users, audiences were not segmented until they reached a page where links to multiple versions of a document (i.e., technical, non-technical) were provided.
Sources: Evans, 1998; Gerhardt-Powals, 1996; Nall, Koyani and Lafond, 2001; Williams, 2000; Zimmerman and Prickett, 2000; Zimmerman, et al., 2002.
Example:
Relative Importance:
Strength of Evidence:
These are examples of ways to provide different audiences access
to information.
See page xxii for detailed descriptions of the rating scales
16:9 Use Color for Grouping
178
Relative Importance:
Guideline: Use color to help users understand what does and does not go together.
Comments: Color coding permits users to rapidly scan and quickly perceive patterns and relationships among items. Items that share the same color will be considered as being related to each other, while items with prominent color differences will seem to be different.
People can distinguish up to ten different colors that are assigned to different categories, but it may be safer to use no more than five different colors for category coding. If more than ten different colors are used, the effects of any particular relationship will be lost.
Do not use color alone to convey information.
Sources: Carter, 1982; Christ, 1975; Engel and Granda, 1975; Haubner and Neumann, 1986; Murch, 1985; Nygren and Allard, 1996; Smith, 1962; Smith, 1963; Smith, Farquhar and Thomas, 1965.
Example:
Strength of Evidence:
Links
Headings, Titles, and Labels
Content Organization
Headings, Titles, and Labels
See page xxii for detailed descriptions of the rating scales
Research-Based Web Design & Usability Guidelines
