Site Map

07 Nov 2010 by Arthur Clemens in User Experience Design pattern, user experience design, wayfinding

Pattern: Site Map. Also known as: Sitemap, Table of Contents, Contents, Site guide, Site directory.

Upper part (out of 3 screen heights) of Apple's site map: http://www.apple.com/find/sitemap.html (11 Nov 2002), showing 3 levels of information.

Problem

Motivation

1. Provide a conceptual overview of the site's content
2. Provide quick access to pages

Provide conceptual overview is related to the function of a book's table of contents: the reader can quickly learn what kind of book he is holding by skimming over the chapter titles. Is it an overview, a textbook, a monograph, a scholarly study, or a novel? What subject does the book cover? Is the subject within my knowledge domain? [4]

Similarly, a site map shows the site's scope and depth: the visitor learns what the site is about and how of the subject it covers.

Provide quick access is a means of navigating the site. The visitor can skip the site navigation and click directly on one of the deeper links.

A site map can only be successful if it fulfills both functions.

Solution

Use when

Only the smallest or the biggest sites can do without a site map. If there are more pages than the main navigation shows at the homepage (not counting dropdown menus), you will need a site map.

Amazon does not have a site map - but it does have a Site Directory.

Ecommerce as well as informational sites can benefit from a site map.

Implementation

Types of site map, page length

A usability research [1] (1999) looked at 3 kinds of site map: Alphabetized Index sitemap (actually a site index), Full categorical sitemap (normal site map), and Restricted categorical sitemap (where the user needs to click a topic category to see the links; this principle is also called progressive disclosure).

Not surprisingly, the Alphabetized Index sitemap proved less useful (regarding the task the users where asked to perform).

The participants also stated that they favored the categorical sitemap designs (Full & Restricted) because the information was organized into specific categories. Moreover, the Full sitemap design was considered superior to the Restricted sitemap because it was, according to the participants, easier to compare information between the categories. This was said to be more important to the participants than reducing the number of presented hyperlinks to a more manageable number.

This last line is significant too: the users preferred a longer page that included all links to a page with less links (with hidden link levels).

Expandability

Somewhere at the beginning of the Web, around 1996, site maps where often a designer's showcase. You could find the most diverse metaphorical imagery and novel information design displays that were used as vehicles for ideas about navigating the Web in general and that one site in particular. See Kahn [3] for a collection of site maps from this period.

Early sites were not designed for change and site maps reflected this brochure approach. Of course, when sites did grow, the static site map quickly wore out and was replaced by a textual version. By 2002 the graphical site maps had almost completely disappeared [2].

Textual site maps are easier to change and can be generated automatically from the Content Management System or database.

Spatial metaphores

Kahn [3] distinguishes 4 types of site map: lists, progressive disclosure, circles and metaphor. He writes about circle site maps:

The same information that can be presented as a hierarchical list or indented outline can also be presented as a series of layers around a central point. Circular organization carries with it an implied meaning. In terms of the visual impact of the map, the starting point (usually the Home Page) is at the center of the focus, rather than at the top left of a long list of items. A circular organization can be a very efficient way to present information. (p. 86)

Kahn is rather positive about circular displays, calling them "graphically appealing, inviting exploration and interaction".

Their problem lies in the implied meaning. What does it imply that the homepage is at the center? A spatial arrangement is a misplaced metaphor in this case, because web pages are not geographically ordered. It does not give me more insight to know that Customers is to the east of the homepage.

Conceptual grouping is effectively to visualize using traditional markup means such as indenting, use of color and size relations.

A site map's main goal is not exploration and esthetic pleasure. It should give insight in a site's content and be quick to navigate.

Discussion

I noticed that CNN has removed its site map from the site. What could be the reason? Martijn van Welie writes Don't use sitemaps for really large sites unless it is a catalog. Well, Amazon doesn't have one either. -- Main.ArthurClemens - 10 Sep 2003

Examples

Example from L.L. Bean: http://www.llbean.com/siteMap/?feat=ln (10 Sep 2003). This site map uses a column layout for efficient usage of screen estate. Only three levels are shown although the site has more pages.

Example from Queensland Department of Main Roads: http://www.mainroads.qld.gov.au (12 Nov 2002). The dots before each link show the depth of the link. The amount of possible levels is virtually unlimited.

Example from Pink Roccade: http://www.pinkroccade.co.uk (10 Sep 2003) (design by Lost Boys). I copied the principle of Queensland, and added a page contents at the top for faster navigation. The dots (and inbetween spaces) are also part of the link, so you only have to move the mouse vertically to highlight the links.

Example from Frog Design: http://www.frogdesign.com (15 Mar 2003). The site map page is illustrated with pieces of branding.

Example from the Association for Investment Management and Research: http://aimrpubs.org/site_guide.html (10 Sep 2003). This page is mentioned in [3] (design by d/D, Dynamic Diagrams, the authors' company).

Literature

• [1] Sitemap Design: Alphabetical or Categorical? - Usability News 1.2 (1999)
• [2] Fortune 500 Revisited: Current Trends in Sitemap Design - Usability News 4.2 (2002)
• [3] Mapping web sites by Paul Kahn and Krzysztof Lenk (2001)
• [4] Critically Analyzing Information Sources, Cornell University. Revised 18 September 2001. Particularly this paragraph: Having made an initial appraisal, you should now examine the body of the source. Read the preface to determine the author's intentions for the book. Scan the table of contents and the index to get a broad overview of the material it covers. Note whether bibliographies are included. Read the chapters that specifically address your topic. Scanning the table of contents of a journal or magazine issue is also useful. As with books, the presence and quality of a bibliography at the end of the article may reflect the care with which the authors have prepared their work.
• [5] Site Map Usability
  Jakob Nielsen's Alertbox, January 6, 2002 (cached page)
• Nielsen Norman Group report
  Site Map Usability: 28 design guidelines based on usability studies with people using site maps
  (commercial report)
• Sitemaps and Site Indexes: What They Are and Why You Should Have Them - Boxes and Arrows, September 8, 2003
• Practical design of outlines and site maps

Comments (edit)

Main.WikiGuest - 26 Feb 2011:

Has the sitemap become less important these days?

Leave your comment