Site map |  |  |
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
Site maps come in all sorts of forms. However, only a few actually work.Motivation
A site map has 2 basic functions:- Provide a conceptual overview of the site's content
- Provide quick access to pages
Solution
Use a textual listing similar to a book's table of contents. Show all levels of information, not only the first 1 or 2. Do not use progressive disclosure to save space - don't be afraid to get a site map of several window heights long. Group elements by means of indenting, color and size relations. Put the link to the site map on every page and make it clearly visible, not just as secondary link at the bottom of the page. Put links to the site map in Help and Search results.Diagram
A drawingUse 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 Directory of All Stores
.
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. -- 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).
Connections
Relations to higher and lower patternsLiterature
- [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
-- ArthurClemens - 25 Nov 2003