• Enabling Extremely Rapid Navigation in Your Web or Document - Quite long rant but with some valid arguments.

• Practical design of outlines and site maps

-- ArthurClemens - 10 Sep 2003

-- ArthurClemens - 25 Nov 2003

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

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.

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. 

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.

Example from L.L. Bean: 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 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: 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 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: 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 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: www.frogdesign.com (15 Mar 2003). The site map page is illustrated with pieces of branding.

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: aimrpubs.org/site_guide.html (10 Sep 2003). This page is mentioned in [3] (design by d/D, Dynamic Diagrams, the authors' company).

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).

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.

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.

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

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. 

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. 

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. -- ArthurClemens - 10 Sep 2003

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

• Sitemaps and Site Indexes: What They Are and Why You Should Have Them - Boxes and Arrows, September 8, 2003 Shallow article, summary of do's and don'ts.

• Sitemaps and Site Indexes: What They Are and Why You Should Have Them - Boxes and Arrows, September 8, 2003

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.

• Site Map Usability
  

• [5] Site Map Usability
  

I noticed that CNN has removed its site map from the site. What could be the reason? -- ArthurClemens - 10 Sep 2003

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. -- ArthurClemens - 10 Sep 2003

Example from Queensland Department of Main Roads, 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 L.L. Bean: 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 Pink Roccade, 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 Queensland Department of Main Roads: 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 Frog Design, www.frogdesign.com (15 Mar 2003). The site map page is illustrated with pieces of branding.

Example from Pink Roccade: 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 aimrpubs.org (10 Sep 2003). This page is mentioned in [3] (design by d/D, Dynamic Diagrams, the authors' company).

Example from Frog Design: 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: aimrpubs.org/site_guide.html (10 Sep 2003). This page is mentioned in [3] (design by d/D, Dynamic Diagrams, the authors' company).

%META:FILEATTACHMENT{name="Sitemap_LLBean_20030910.png" attr="h" comment="" date="1063220477" path="Sitemap_LLBean_20030910.png" size="287944" user="ArthurClemens" version="1.1"}%

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

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

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?

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]

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.

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.

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

Solution

Diagram

Use when

Implementation

Types of site map, page length

A usability research [1] (1999) looked at 3 kinds of site map: Alphabetized Index sitemap (an index, so not really a site map), Full categorical sitemap, and Restricted categorical sitemap (where the user needs to click a topic category to see the links).

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).

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. 

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. Is says that users preferred a longer page that included more links, to a page with less links (with hidden link levels).

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

Another research [2] (2002) investigated the trends in current web site design. By looking at all Fortune 500 web sites, the researchers found that the extended categorical site map (lists of topics 3 or more levels deep) was used most, and that graphical site maps had almost completely disappeared.

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.

Solution

Spatial metaphores

Diagram

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

Use when

Implementation

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.

I noticed that CNN has removed its site map from the site. What could be the reason? -- ArthurClemens - 10 Sep 2003

put image here
Example from xxx.

Example from Queensland Department of Main Roads, 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, 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, www.frogdesign.com (15 Mar 2003). The site map page is illustrated with pieces of branding.

Example from aimrpubs.org (10 Sep 2003). This page is mentioned in [3] (design by d/D, Dynamic Diagrams, the authors' company).

• Enabling Extremely Rapid Navigation in Your Web or Document
• Critically Analyzing Information Sources, Cornell University. Revised 18 September 2001
• Mapping web sites by Paul Kahn and Krzysztof Lenk (2001)

• [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.

• Sitemaps and Site Indexes: What They Are and Why You Should Have Them - Boxes and Arrows, September 8, 2003 Shallow article, summary of do's and don'ts.
• Enabling Extremely Rapid Navigation in Your Web or Document - Quite long rant but with some valid arguments.

-- ArthurClemens - 12 Aug 2003

-- ArthurClemens - 10 Sep 2003

%META:FILEATTACHMENT{name="Sitemap_FrogDesign_20030315.png" attr="h" comment="" date="1063204135" path="Sitemap_FrogDesign_20030315.png" size="124696" user="ArthurClemens" version="1.1"}% %META:FILEATTACHMENT{name="Sitemap_Queensland_20021112.png" attr="h" comment="" date="1063204643" path="Sitemap_Queensland_20021112.png" size="61237" user="ArthurClemens" version="1.1"}% %META:FILEATTACHMENT{name="Sitemap_PinkRoccade_uk_20030910.png" attr="h" comment="" date="1063207797" path="Sitemap_PinkRoccade_uk_20030910.png" size="56470" user="ArthurClemens" version="1.1"}% %META:FILEATTACHMENT{name="Sitemap_aimrpubs.org.png" attr="h" comment="" date="1063208104" path="Sitemap_aimrpubs.org.png" size="168181" user="ArthurClemens" version="1.1"}%

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

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. Skimming over the chapter titles, the reader can quickly learn what kind of book he is holding (an overview, a textbook, a monograph, a scholarly study, a novel, etc.), and what material the book covers.

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?

Similarly, a site map shows the site's scope and depth in a glance.

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.

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 usability research [1] (1999) looked at 3 kinds of site map: Alphabetized Index sitemap (an index, not really a site map), Full categorical sitemap, and Restricted categorical sitemap (where the user needs to click a topic category to see the links).

A usability research [1] (1999) looked at 3 kinds of site map: Alphabetized Index sitemap (an index, so not really a site map), Full categorical sitemap, and Restricted categorical sitemap (where the user needs to click a topic category to see the links).

Our results found that the Full and Restricted categorical sitemaps had significantly higher numbers of successful searches (fewer failed attempts) than the Alphabetized sitemap. In addition, users had significantly higher perceptions of ease-of-use for Full and Restricted sitemaps over the Alphabetized sitemap (see Figure 4). They were also significantly more satisfied and found the searches to be easier with the Full and Restricted sitemaps than with the Alphabetized sitemap.  In the ranking of the three sitemap designs, the Full sitemap was most preferred.

Another research [2] (2002) investigated the trends in current web site design. It found that the extended categorical site map (lists of topics 3 or more levels deep) was used most:

Another research [2] (2002) investigated the trends in current web site design. By looking at all Fortune 500 web sites, the researchers found that the extended categorical site map (lists of topics 3 or more levels deep) was used most, and that graphical site maps had almost completely disappeared.

-- ArthurClemens - 29 Jul 2003

-- ArthurClemens - 12 Aug 2003

A site map has 2 basic uses:

A site map has 2 basic functions:

Provide conceptual overview is related to the function of a book's table of contents. The table of contents gives a broad overview of the material the book covers. And skimming over the chapter titles, the reader can quickly learn what kind of book he is holding: an overview, a textbook, a monograph, a scholarly study, a novel.

Provide conceptual overview is related to the function of a book's table of contents. Skimming over the chapter titles, the reader can quickly learn what kind of book he is holding (an overview, a textbook, a monograph, a scholarly study, a novel, etc.), and what material the book covers.

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

A usability research [1] (1999) looked at 3 kinds of site map: Alphabetized Index sitemap (an index, not really a site map), Full categorical sitemap, and Restricted categorical sitemap (where the user needs to click a topic category to see the links).

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

This last line is significant. Is says that users preferred a longer page that included more links, to a page with less links (with hidden link levels).

Another research [2] (2002) investigated the trends in current web site design. It found that the extended categorical site map (lists of topics 3 or more levels deep) was used most:

Principle

• Sitemap Design: Alphabetical or Categorical?

• [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)

Also known as: Sitemap, Contents

Also known as: Sitemap, Table of Contents, Contents, Site guide

put image here
Example from xxx.

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

What is the problem that this pattern solves?

Site maps come in all sorts of forms. However, only a few actually work.

A site map has 2 basic uses:

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

Provide conceptual overview is related to the function of a book's table of contents. The table of contents gives a broad overview of the material the book covers. And skimming over the chapter titles, the reader can quickly learn what kind of book he is holding: an overview, a textbook, a monograph, a scholarly study, a novel.

Similarly, a site map shows the site's scope and depth in a glance.

Provide quick access is a means of navigating the site.

• Sitemap Design: Alphabetical or Categorical?
• Enabling Extremely Rapid Navigation in Your Web or Document
• Critically Analyzing Information Sources, Cornell University. Revised 18 September 2001
• Mapping web sites by Paul Kahn and Krzysztof Lenk (2001)

-- ArthurClemens - 26 Jul 2003

-- ArthurClemens - 29 Jul 2003

%META:TOPICMOVED{by="guest" date="1037314694" from="Patterns.TableOfContents" to="Patterns.Table_of_contents"}%

%META:FILEATTACHMENT{name="appl1.png" attr="h" comment="" date="1059340838" path="appl1.png" size="96907" user="ArthurClemens" version="1.1"}% %META:TOPICMOVED{by="ArthurClemens" date="1059331004" from="Patterns.Table_of_contents" to="Patterns.Site_map"}%

! Abstract pattern

Also known as: Sitemap, Contents

Also known as: Site map.

Concrete implementations of this pattern:

• Table of contents (Listing)?
• Table of contents (Graphical map)?

Related information:

Problem

Motivation

Solution

Diagram

Principle

Use when

Implementation

Discussion

Examples

Connections

Literature

Discussion

-- ArthurClemens - 03 Jul 2003

-- ArthurClemens - 26 Jul 2003

%META:FIELD{name="Subtitle" title="Subtitle" value="Abstract pattern"}%

%META:FIELD{name="Subtitle" title="Subtitle" value=""}%

Material: Table of contents material

! Abstract pattern

Also known as: site map

Also known as: Site map.

Discussion

-- ArthurClemens - 11 Feb 2003

%META:FIELD{name="Title" title="Title" value="Table of contents"}%

%META:FIELD{name="Title" title="Title" value=""}%

Site map

Material: Table of contents material

Material: Table of contents material

2 Concrete implementations of this pattern:

Concrete implementations of this pattern:

Jakob Nielsen's Alertbox, January 6, 2002
cached page

Jakob Nielsen's Alertbox, January 6, 2002 (cached page)

I renamed "Site map" to "Table of contents" because "map" refers too much to real world graphical maps. For the latter I would use "Table of contents (Graphical map)". In a menu it could also be called Contents.

I have renamed "Site map" to "Table of contents" because the term "map" refers too much to real world graphical maps. So my idea is you have 2 kinds of Tables of contents: a graphical map and a listing (Listing could be called "Contents" in a menu).

Still, I would prefer to introduce names that do not evoke wrong mappings, to speak with Donald Norman.

Still, I would prefer to introduce names that do not evoke a wrong mapping, to speak with Donald Norman.

-- ArthurClemens - 11 Feb 2003

-- ArthurClemens - 31 Jan 2003

%META:FORM{name="Title_form"}% %META:FIELD{name="Title" title="Title" value="Table of contents"}% %META:FIELD{name="Subtitle" title="Subtitle" value="Abstract pattern"}%

Abstract pattern

Material: Table of contents material

Material: Table of contents material

Abstract pattern.

Concrete implementations of this pattern:

2 Concrete implementations of this pattern:

Used literature

Reference literature

Related information:

(available at my desk -- ArthurClemens)

-- ArthurClemens - 29 Jan 2003

-- ArthurClemens - 31 Jan 2003

Table of contents

Site map

Concrete implementations of this pattern:

• Table of contents (Listing)?
• Table of contents (Graphical map)?

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
  

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
  

(available at my desk -- ArthurClemens)

Concrete implementations of this pattern

• Table of contents (Listing)?
• Table of contents (Graphical map)?

-- ArthurClemens - 29 Jan 2003

Material: Table of contents material

Also known as: Sitemap

Also known as: site map

%META:TOPICPARENT{name="NavigationPattern"}%

%META:TOPICPARENT{name="Navigation_"}%

• Table of contents (Listing)?
• Table of contents (Graphical map)?

• Table of contents (Listing)?
• Table of contents (Graphical map)?

%META:TOPICMOVED{by="guest" date="1037314694" from="Patterns.TableOfContents" to="Patterns.Table_of_contents"}%

Also known as: Sitemap

Also known as: Sitemap

Concrete implementations

Concrete implementations of this pattern

%META:FORM{name="ClassificationForm"}% %META:FIELD{name="KindOfDocument" title="KindOfDocument" value="Pattern description"}% %META:FIELD{name="UsageIndicator" title="UsageIndicator" value=""}% %META:FIELD{name="DocumentStatus" title="DocumentStatus" value="New topic"}%

Literature

Used literature

Reference literature

Also known as: Sitemap

See for concrete implementation:

Literature

• 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)

Concrete implementations

• Table of contents (Listing)?
• Table of contents (Graphical map)?

%META:FORM{name="WebForm"}%

%META:FORM{name="ClassificationForm"}%

See for concrete implementation:

%META:TOPICINFO{author="guest" date="1037057100" format="1.0" version="1.1"}% %META:TOPICPARENT{name="NavigationPattern"}%

Table of contents

Abstract pattern.

%META:FORM{name="WebForm"}% %META:FIELD{name="KindOfDocument" title="KindOfDocument" value="Pattern description"}% %META:FIELD{name="UsageIndicator" title="UsageIndicator" value=""}% %META:FIELD{name="DocumentStatus" title="DocumentStatus" value="New topic"}%