Site Structure
The most important factor in effective navigation through a site is a clear and explicit structure. The explicit structure enables a visitor to rapidly construct a mental model of the site. Furthermore, the location cues and navigational devices provided on each page must match the visitor's mental model, or the visitor will become disoriented.
There are two key structures. The first is a series of pages viewed (hypothetically) in sequence, or a trail. Trails may branch, which is the classic conception of hypertext (but one that is damaging to successful navigation). The second is a hierarchy, or tree, containing progressively more detailed information.
The two key questions that a visitor to a site will be always asking (consciously or not) are "Where is it?" and "Where am I?" The first question assumes that the visitor is there to find some piece of information or, more generally, to achieve some task. The question needs to be easily answered at every step during the visit.
The second question is more subtle and more neglected. It answers the visitor's need to remain oriented within the site, in order that he or she can continue to be able to ask and answer the first question. Jakob Neilson uses the term "lost in hyperspace" to describe the state of a visitor who experiences continual failures to answer the second question. Although it is probably unavoidable while surfing the whole Web, it is not a necessary experience within any one site.
This latter point is related to the oft-repeated advice against "orphan" pages: a visitor who jumps into the middle of a site should be able to get up to higher levels of the site. But that is not enough: such a visitor must also be able to rapidly figure out where in the site they have landed.
The trail and tree structures are not mutually exclusive, but intertwined. At certain levels of a tree, there will be a path through pages within that level; by the same token, pages along a path themselves are the root of a sub-tree of pages. The critical issue is providing the access paths through the tree and along the trails.
Lynch and Horton'sWeb Style Guide identifies an additional structure, the grid. I don't think I have seen any sites like this. They also point out that the "Web" structure of a site is in fact (and ironically) a very poor one, because it fails to provide the visitor with an explicit structure.
Examples
- Satisfying Interaction Design, Art, and Ideas
- This site is structured essentially as a path through a series of pages that are designed to be thought-provoking and entertaining. The presence of a maze on the second page indicates quite clearly that you are in for an "experience," but the site still fails to provide it. If you just follow the large Next images, you exit the site fairly rapidly, and wonder why. But it turns out that the real trail you are supposed to be following is accessed through the little red dots: as soon as you click one of these, you go to a parallel trail, but now, the large Next image and the little red dots both follow this secondary trail. It took me several minutes of experimentation to figure out what the structure of the site is, and even then, I got confused the next time I visited the site (to write this paragraph.)
- Adobe Systems
- The Adobe site has a clearly-visible hierarchical structure,
more-or less. Each top-level item in the navigation bar takes you to a
second-level hierarchy. Depending on the section, you may go down one
or two more layer of the hierarchy. The hierarchy is really a graph,
because the page for, say, Illustrator can be reached either from
Products or through a longer path down through the Solutions section.
Adobe have been careful to make intermediate pages fit on a 640x480 screen, which has the drawback that intermediate pages in the hierarchy contain no information. A second problem, which is shared by many large sites, is that once I am on the third level, I cannot go to sibling pages without first going back up to the second level.
- amazon.com
- The amazon.com site is also hierarchical, but in a much looser way
than the Adobe site. Second-level pages, such as Bestsellers, include both useful content (the
latest bestsellers), and links to third-level pages of best-sellers by
category.
Some of the third-level pages, such as Search and Reviewed in the Media allow crossing to sibling pages by using the left margin of the page as an index of all third-level pages. This is a navigational aid that is worth emulating, in my opinion.
