Pattern 12: Site map ***
AKA: Hierarchical site map, Workflow overview

You are at the beginning of designing the site and have adopted the philosophy of GRADUAL STIFFENING (5) and ESTABLISHed THE USE CASES (3). You have probably already used the latter to design a scheme of CONTEXT-SENSITIVE HELP (17). You now start to consider what the site will contain and how users will navigate around it and discover the content that they are looking for. You therefore first need to establish the outline structure of the site and the key elements of its content.

You need a convenient way to describe and think about the site’s structure.

But it’s not only you who need to understand the topology of the site. Users get lost easily. They may know the location of the content they want to go to, but not how to get there. The user usually needs a contextual overview of (a) the site and its content and (b) the actions involved in any workflow that she may engage in.

Therefore

Create a graphic representing the structure of the site (usually a hierarchy). Use it to discuss the site with the team. Make it available to the site users as well. Always provide a single page that gives a visual and textual representation or overview of the entire site. Allow users to navigate directly from this representation. Icons should pop-up a preview of the content to be visited using the RHETORIC OF ARRIVAL AND DEPARTURE (20).

For workflow sites, provide an overview of the workflows based on the use cases. Consider enhancing the site map by providing an index as well (www.adobe.com provides a paradigm for this).

You will also need to provide a SEARCH BOX (14) and CONTEXT-SENSITIVE HELP (17) to make the site more usable, and provide a SENSE OF LOCATION (15) using BREADCRUMBS (23), a NAVIGATION BAR (25), the RHETORIC OF ARRIVAL AND DEPARTURE (20), STRUCTURED MENUS (19). A USER-CENTRED SITE STRUCTURE (13) will provide a far better experience.

Contributors and sources
Paul Dyson, Dave Sissons, Veen (2001)

A map is a useful and familiar way for people to find their way around unknown territory. Using a map people can repair procedures that fail due to obstructions that have appeared since the procedure was created.

When we come to the detailed patterns concerning navigation we will need a site map to organize our thoughts and solutions around.

One of the ways you might present the site map is to include a topic path in the navigation bar. This presents the current location in the hierarchical structure but fails to show cross-links or alternative paths. In the example below you cannot tell that it is possible to reach the same destination from Sportswear.

Home>Men’s fashion>Underwear>Jock straps

Where the site is hierarchical, the topic path can become the page’s headline.
Usually, spatially organized maps are better than textually oriented ones because of transfer effects: people are used to using charts for navigation about the real world.

The site map should show all the site, not just what is linked to the home page, so that the visitor can get at all the content. If it is large then segment it, as we have done with the wu site: represented in this book by the four diagrams at the start of each section of this chapter.

Veen (2001) identifies four ways in which the site map may be accessed via a navigation scheme: as a matrix, as a tree or strict hierarchy, as a set of segmented trees with cross references, or by using a combination of these approaches.
The matrix approach, which you can see at portal sites such as yahoo.com, classifies every page according to two or more sets of keywords, the later being fixed in advance. For example, if there are to be only two sets – called services and content – we might end up with an organization like this:

Figure 12.1 Matrix organization [refer to book]

Where the headings intersect there may be a page classified accordingly; e.g. a page concerning radios for sale might be classified as Shop/Brown goods. This organization permits many ways of navigating. For example, if we have a third dimension defined by the set {dirt cheap, average, outrageously priced} then we might offer a selection of pages based on radio buttons or pull down menus (combo boxes). For a discussion of this see CONTEXT DEPENDENT SEARCH CATEGORIES (63). Matrix organization can also be mapped directly onto a THREE-REGION LAYOUT (26).

This example already shows a weakness of matrix organization: why did we not classify our radios under Browse? You have to be very careful in defining the headings to avoid this problem.

Most portals use an approach that combines this organization with hierarchical views. A pure hierarchical view is nearly always too restrictive; e.g. snap.com.

We think that the organization should follow the structure of the content and the use cases as far as possible. The most general organization is also the most powerful: a network. However, a completely general network can be very hard to understand. The wu site started off as a network but we soon realized that an hierarchical organization would make it far easier to use. Doing this proved to be the hardest bit in writing this book – and we had to compromise but some of the knowledge is just not hierarchical; thus the pseudo hierarchical organization that we have adopted seems to be the right organization for this material and its intended use.

This pattern is related to Tidwell’s NAVIGABLE SPACES.

Browse the language	What is Wu?	Look at an example pattern sequence	Structure of the patterns
Comment on Wu	Contributors	Return to TriReme home page	Links to related sites