Chapter 12

Lists

Lists are commonly found on Web sites.

These may be lists of, for example, people, drugs, theaters, or restaurants. Each list should be clearly introduced and have a descriptive title. A list should be formatted so that it can be easily scanned. The order of items in the list should be done to maximize user performance, which usually means that the most important items are placed toward the top of the list. If a numbered list is used, start the numbering at ‘one,’ not ‘zero.’ Generally only the first letter of the first word is capitalized, unless a word that is usually capitalized is shown in the list.

Research-Based Web Design & Usability Guidelines

12:1 Order Elements to Maximize User Performance

112

Guideline: Arrange lists and tasks in an order that best facilitates efficient and successful user performance.

Comments: Designers should determine if there is an order for items that will facilitate use of the Web site. If there is, ensure that the site is formatted to support that order, and that all pages follow the same order. For example, ensure that lists of items, sets of links, and a series of tabs are in a meaningful order.

Where no obvious order applies, organize lists alphabetically or numerically. Keep in mind that it is the user’s logic that should prevail rather than the designer’s logic.

Sources: Bransford and Johnson, 1972; Detweiler and Omanson, 1996; Engel and Granda, 1975; Evans, 1998; Flower, Hayes and Swarts, 1983; Halgren and Cooke, 1993; Morkes and Nielsen, 1998; Nygren and Allard, 1996; Ozok and Salvendy, 2000; Redish, Felker and Rose, 1981; Smith and Mosier, 1986; Spyridakis, 2000.

Example:

Relative Importance:

Lists

Strength of Evidence:

Ordering list by region and then alphabetically by country allows users to rapidly find desired information.

If most of your users will be looking for the same item, then place it at the top of your list.

This list should be ordered to read down columns, not across rows.

Research-Based Web Design & Usability Guidelines

12:2 Place Important Items at Top of the List

113

Guideline: Place a list’s most important items at the top.

Comments: Experienced users usually look first at the top item in a menu or list, and almost always look at one of the top three items before looking at those farther down the list. Research indicates that users tend to stop scanning a list as soon as they see something relevant, thus illustrating the reason to place important items at the beginning of lists.

Sources: Byrne, et al., 1999; Carroll, 1990; Evans, 1998; Faraday, 2001; Isakson and Spyridakis, 1999; Lewenstein, et al., 2000; Nielsen, 1996a; Nielsen, 1999b; Nielsen, 1999c; Spyridakis, 2000.

Example:

Lists

Relative Importance:

Strength of Evidence:

This listing assists users by breaking out the top ten requests in a separate link. The entire collection is then listed next. This tactic can save users time when searching for popular items or topics.

This extensive list of titles contains the most commonly used titles at the top of the list and also in their alphabetically-correct position further down the list. This avoids the need for users to scroll through titles such as ‘His Highness.’

See page xxii for detailed descriptions of the rating scales

Research-Based Web Design & Usability Guidelines

12:3 Format Lists to Ease Scanning

114

Relative Importance:

Guideline: Make lists easy to scan and understand.

Comments: The use of meaningful labels, effective background colors, borders, and white space allow users to identify a set of items as a discrete list.

Sources: Chaparro and Bernard, 2001; Detweiler and Omanson, 1996; Levine, 1996; Nielsen and Tahir, 2002; Nygren and Allard, 1996; Spyridakis, 2000; Treisman, 1982.

Example:

Strength of Evidence:

Lists

These Web sites use background colors and thin white lines between information groups to make these lists easy to scan.

Research-Based Web Design & Usability Guidelines

12:4 Display Related Items in Lists

115

Relative Importance:

Guideline: Display a series of related items in a vertical list rather than as continuous text.

Comments: A well-organized list format tends to facilitate rapid and accurate scanning. One study indicated that users scan vertical lists more rapidly than horizontal lists. Scanning a horizontal list takes users twenty percent longer than scanning a vertical list.

Sources: Mayhew, 1992; Nygren and Allard, 1996; Smith and Mosier, 1986; Tullis, 1984; Wright, 1977.

Example:

Strength of Evidence:

Lists

The Office of Data makes available for download:

• Annual Production Statistics

• Monthly Production Statistics

• Weekly Production Statistics

• Quarterly Consumption Projections

Bulleted lists are easier to scan and understand.

The Office of Data makes available for download Annual Production Statistics, Monthly Production Statistics, Weekly Production Statistics, and Quarterly Consumption Projections.

Horizontal lists are more difficult to scan and understand.

See page xxii for detailed descriptions of the rating scales

Research-Based Web Design & Usability Guidelines

12:5 Introduce Each List

116

Relative Importance:

Guideline: Provide an introductory heading (i.e., word or phrase) at the top of each list.

Comments: Providing a descriptive heading allows users to readily understand the reason for having a list of items, and how the items relate to each other. The heading helps to inform users how items are categorized, or any prevailing principle or theme. Users are able to use lists better when they include headings.

Sources: Bransford and Johnson, 1972; Bransford and Johnson, 1973; Detweiler and Omanson, 1996; Engel and Granda, 1975; Levine, 1996; Redish, 1993; Smith and Goodman, 1984; Smith and Mosier, 1986.

Example:

Strength of Evidence:

Lists

Research-Based Web Design & Usability Guidelines

12:6 Use Static Menus

117

Relative Importance:

Guideline: Use static menus to elicit the fastest possible speed when accessing menu items.

Comments: To elicit the fastest possible human performance, designers should put the most frequently used menus times in the first few positions of a menu. Designers should determine the location of items within a menu based on the frequency of use of each item. Adaptable menus, where users are allowed to change the order of menu items, elicits reasonably fast performance as well. The slowest performance is achieved when an adaptive menu, where the computer automatically changes the position of menu items, is used. One study found that users prefer having static menus, rather than adaptive menus.

Sources: Findlater and McGrenere, 2004; McGrenere, Baecker and Booth, 2002.

Example:

Strength of Evidence:

Lists

Moving “Times” up into the split menu of fonts is one version of an adaptive menu.

12:7 Start Numbered Items at One

Relative Importance:

Guideline: When items are numbered, start the numbering sequence at ‘one’ rather than ‘zero.’

Comments: Do not start the numbering with a ‘zero.’ When counting, people start with ‘one,’ not ‘zero.’

Sources: Engel and Granda, 1975; Smith and Mosier, 1986.

Strength of Evidence:

See page xxii for detailed descriptions of the rating scales

Research-Based Web Design & Usability Guidelines

12:8 Use Appropriate List Style

118

Relative Importance:

Guideline: Use bullet lists to present items of equal status or value, and numbered lists if a particular order to the items is warranted.

Comments: Bullet lists work best when the items do not contain an inherent sequence, order, or rank. Numbered lists assign each item in the list an ascending number, making the numerical order readily apparent. Numbered lists are especially important when giving instructions.

Sources: Coney and Steehouder, 2000; Detweiler and Omanson, 1996; Lorch and Chen, 1986; Narveson, 2001; Spyridakis, 2000.

Example:

Strength of Evidence:

Lists

Use bullets if your list items are of equal value, or if they have no discernable order.

Using numbered lists is appropriate when items are in a proscribed order, such as this list of ‘Top 10’ searches.

Research-Based Web Design & Usability Guidelines

12:9 Capitalize First Letter of First Word in Lists

119

Guideline: Capitalize the first letter of only the first word of a list item, a list box item, check box labels, and radio button labels.

Comments: Only the first letter of the first word should be capitalized unless the item contains another word that would normally be capitalized.

Sources: Bailey, 1996; Fowler, 1998; Marcus, Smilonich and Thompson, 1995; Microsoft, 1992.

Example:

Relative Importance:

Lists

Strength of Evidence:

See page xxii for detailed descriptions of the rating scales

Research-Based Web Design & Usability Guidelines