Chapter 9

Headings, Titles, and Labels

Most users spend a considerable amount of time scanning rather than reading information on Web sites. Well-designed headings help to facilitate both scanning and reading written material. Designers should strive to use unique and descriptive headings, and to use as many headings as necessary to enable users to find what they are looking for—it is usually better to use more rather than fewer headings. Headings should be used in their appropriate HTML order, and it is generally a good idea not to skip heading levels.

Designers should ensure that each page has a unique and descriptive page title. When tables are used, designers should make sure that descriptive row and column headings are included that enable users to clearly understand the information in the table. It is occasionally important to highlight certain critical information.

Research-Based Web Design & Usability Guidelines

9:1 Use Clear Category Labels

Relative Importance:

Guideline: Ensure that category labels, including links, clearly reflect the information and items contained within the category.

Comments: Category titles must be understood by typical users. Users will likely have difficulty understanding vague, generalized link labels, but will find specific, detailed links, and descriptors easier to use.

Sources: Evans, 1998; Landesman and Schroeder, 2000; Mahajan and Shneiderman, 1997; Marshall, Drapeau and DiSciullo, 2001; Nall, Koyani, and Lafond, 2001; Spyridakis, 2000; Zimmerman, et al., 2002.

Example:

Strength of Evidence:

These labels are clear and distinct, allowing users to distinguish paths quickly.

9:2 Provide Descriptive Page Titles

78

Relative Importance:

Guideline: Put a descriptive, unique, concise, and meaningfully different title on each Web page.

Comments: Title refers to the text that is in the browser title bar (this is the bar found at the very top of the browser screen). Titles are used by search engines to identify pages. If two or more pages have the same title, they cannot be differentiated by users or the Favorites capability of the browser. If users bookmark a page, they should not have to edit the title to meet the characteristics mentioned above.

Remember that some search engines only list the titles in their search results page. Using concise and meaningful titles on all pages can help orient users as they browse a page or scan hot lists and history lists for particular URLs. They can also help others as they compile links to your pages.

To avoid confusing users, make the title that appears in the heading of the browser consistent with the title in the content area of the pages.

Sources: Evans, 1998; Levine, 1996; Nielsen and Tahir, 2002; Spyridakis, 2000; Williams, 2000.

Example:

Strength of Evidence:

Headings, Titles, and Labels

These titles are unique, concise, and consistent with the titles in the content area.

Research-Based Web Design & Usability Guidelines

9:3 Use Descriptive Headings Liberally

79

Guideline: Use descriptive headings liberally throughout a Web site.

Comments: Well-written headings are an important tool for helping users scan quickly. Headings should conceptually relate to the information or functions that follow them.

Headings should provide strong cues that orient users and inform them about page organization and structure. Headings also help classify information on a page. Each heading should be helpful in finding the desired target.

The ability to scan quickly is particularly important for older adults because they tend to stop scanning and start reading more frequently. If headings are not descriptive or plentiful enough, the user may start reading in places that do not offer the information they are seeking, thereby slowing them down unnecessarily.

Sources: Bailey, Koyani and Nall, 2000; Evans, 1998; Flower, Hayes and Swarts, 1983; Gerhardt-Powals, 1996; Hartley and Trueman, 1983; Ivory and Hearst, 2002; Ivory, Sinha and Hearst, 2000; Lorch and Lorch, 1995; Mayer, Dyck and Cook, 1984; Meyer, 1984; Morkes and Nielsen, 1998; Morrell, et al., 2002; Murphy and Mitchell, 1986; Nielsen, 1999c; Nielsen, 1999d; Schultz and Spyridakis, 2002; Spyridakis, 1989; Spyridakis, 2000; Zimmerman and Prickett, 2000.

Example:

Relative Importance:

Headings, Titles, and Labels

Strength of Evidence:

Spending time during the design process to ensure that the site contains many carefully written headings and sub-headings will save users time as they rapidly locate the information for which they are searching.

See page xxii for detailed descriptions of the rating scales

Research-Based Web Design & Usability Guidelines

9:4 Use Unique and Descriptive Headings

80

Guideline: Use headings that are unique from one another and conceptually related to the content they describe.

Comments: Using poor headings (mismatches between what users were expecting and what they find) is a common problem with Web sites. Ensure that headings are descriptive and relate to the content they introduce.

If headings are too similar to one another, users may have to hesitate and re-read to decipher the difference. Identifying the best headings may require extensive usability testing and other methods.

Sources: Bailey, Koyani and Nall, 2000; Gerhardt-Powals, 1996; Morkes and Nielsen, 1998; Williams, 2000.

Example:

Relative Importance:

Headings, Titles, and Labels

Strength of Evidence:

These headings are well-designed—they are unique from one another and descriptive of the information to which they link.

See page xxii for detailed descriptions of the rating scales

Research-Based Web Design & Usability Guidelines

9:5 Highlight Critical Data

81

Relative Importance:

Guideline: Visually distinguish (i.e., highlight) important page items that require user attention, particularly when those items are displayed infrequently.

Comments: Items to highlight might include recently changed data, data exceeding acceptable limits, or data failing to meet some other defined criteria. Highlight is used here in its general sense, meaning to emphasize or make prominent. Highlighting is most effective when used sparingly, i.e., highlighting just a few items on a page that is otherwise relatively uniform in appearance.

Sources: Ahlstrom and Longo, 2001; Engel and Granda, 1975; Levine, 1996; Myers, 1985.

Example:

Strength of Evidence:

Headings, Titles, and Labels

Formatting this text in underline, bold, and red draws attention to the most pressing deadline and instructions.

Research-Based Web Design & Usability Guidelines

9:6 Use Descriptive Row and Column Headings

82

Guideline: Ensure that data tables have clear, concise, and accurate row and column headings.

Comments: Use row and column headings to indicate unique cell contents. Users require clear and concise table headings in order to make efficient and effective use of table information. Row and column headings will indicate to screen readers how data points should be labeled or identified, so the user can understand the significance of the cell in the overall scheme of the table.

Sources: Bransford and Johnson, 1972; Chisholm, Vanderheiden and Jacobs, 1999d; Detweiler and Omanson, 1996; Lynch and Horton, 2002; United States Government, 1998; Wright, 1980.

Example:

Relative Importance:

Headings, Titles, and Labels

Strength of Evidence:

An example of good table heading design. The non-expert user will have no problem understanding these descriptive row and column headers.

An example of poor table heading design. The non-expert user will have little idea what is meant by ‘R’, ‘J.’, and ‘Pt.’ Unless space constraints dictate otherwise, always use row and column headers that are descriptive enough to be understood by non-expert users.

Research-Based Web Design & Usability Guidelines

9:7 Use Headings in the Appropriate HTML Order

Guideline: Use headings in the appropriate HTML order.

Comments: Using the appropriate HTML heading order helps users get a sense of the hierarchy of information on the page. The appropriate use of H1-H3 heading tags also allows users of assistive technologies to understand the hierarchy of information.

Sources: Detweiler and Omanson, 1996; Spool, et al., 1997.

Example:

Relative Importance:

Strength of Evidence:

H1

H2

See page xxii for detailed descriptions of the rating scales

9:8 Provide Users with Good Ways to Reduce Options

84

Guideline: Provide users with good ways to reduce their available options as efficiently as possible.

Comments: Users seem willing to reduce their options quickly. Provide all options clearly so that users can focus first on selecting what they consider to be the most important option.

Sources: Bailey, Koyani, and Nall, 2000.

Example:

Relative Importance:

Headings, Titles, and Labels

Strength of Evidence:

By providing three different options for selecting desired information, users can select the one most important to them.

See page xxii for detailed descriptions of the rating scales

Research-Based Web Design & Usability Guidelines