A book or magazine has certain visual cues, inherent in the medium, that allow the reader to find his way around. For instance, page and chapter numbers allow one to follow the pages in sequence, and, together with a table of contents, allow a reader to read the information from start to finish, or jump around at will. Instructions can often be found for following the thread of information as a notation that the story continues on a non-consecutive page, or that supplemental information is to be found on a different page or possibly on the same page, as in a sidebar. Visually, each page is complete, one can see each whole page at once.
On the other hand, pages in a Web site are amorphous, they slither around depending on many variables, both as settings in the page and in the browser, such as screen resolution, font size and color, background color and images, and so on. Often, the entire page is not visible to the reader, who may be a newbie to the web and not really expert with his system.
So a logical and consistent way of directing the reader to the information that he desires, or to the information you wish to present, is needed to keep the reader from surfing away from your site in disgust.
Content that naturally flows, such as a narrative, time line, or in logical order is ideal for presentation as a sequence. The actual ordering may be chronological, a series of topics progressing from the general to the specific, or even an alphabetical progression, such as is found in indexes, encyclopedias, and glossaries. Simple sequential organization only works for smaller sites (or structured lists like indexes), as long narrative sequences often become more complex, and thus require more structure to remain understandable.
The most common way of linking pages together sequentially is to provide "Next" and "Previous" buttons or text links at the bottom of each page, in a structure referred to as a navigation panel. A site with pages so large that they cannot be viewed without extensive scrolling up and down also benefits from a navigation panel at the top of the page, or, for the more advanced web designer, the navigation panel can be positioned in a margin using a table to help layout the page, or it may be positioned using frames.
Remember, all a navigation panel really needs to be is a set of links to certain other pages in a site, but graphic elements may be used also, such as buttons or image maps. The important idea here is that navigation aids be presented in a logical and consistent manner.
Web sites that are more complex may still be organized as a sequence, but each page in the main sequence may have one or more pages of digressions, parenthetic information, or links to information in other Web sites.
Manuals, lists, maps, and genealogies may often be organized as a grid. A grid offers a good way to correlate many variables in a number of standard categories. To be successful, the individual units in a grid must share a highly uniform structure of topics and subtopics. The topics often have no particular hierarchy of importance. Unfortunately, grids can be difficult to understand unless the user recognizes the relationships between different categories of information, so they are better used to present information to experienced audiences who already have a basic understanding of the topic and its organization. Graphic maps are very useful in grid-like Web sites as navigation aids.
A hierarchy is one of the best ways to organize a complex body of information. Because Web sites should always be organized as off-shoots of a single home page, hierarchical organization schemes are particularly well-suited to Web sites. Hierarchical diagrams are so familiar in corporate and institutional life, users find it easy to build mental models of the site. Most users find the metaphor easy to understand as a navigational aid. Hierarchies only work well when you have thoroughly organized your material. Navigation in a hierarchy scheme can be as simple as a link on every secondary page back to a home page, table of contents, or site map.
By combining elements of the sequence and the hierarchy, a navigation system can be built that allows a book, magazine, art gallery, etc. to be viewed as a sequence of pages and yet still have the flexibility of navigation that characterizes the print medium.
All that is required is the addition of a link back to a "contents" page in addition to the "next" and "previous" links.
I offer
the site I built for my Father, using his content, as an example.
By judicial use of all the techniques mentioned so far, it is possible to build a site that is hierarchical in structure, has sequential elements, and also the occasional link between specific pages.
As an example, I offer my own personal site. You will see as you scroll down that the home page contains graphic buttons as links to the many pages I offer, and also has a text navigation panel near the bottom of the page. This navigation panel is replicated at the bottom of all my pages.
A site that has a panel on each page linking to all the other pages is more properly thought of as having the organization of a web. A page on a web-linked site may not have links to all the pages in the site on all the pages, but may instead have only links to other pages that are pertinent to the content on that specific page. Even so, a link to the home page, and any other navigation aid page, is usually provided.
This ability to link to other pages in any order is what gives the World Wide Web its great power, but in an individual Web site this lack of logical structure often alienates a reader that is looking for specific information.
However, for casual browsers Web-type structures offer little restriction to the pattern of information use. Webs mimic associative thought and the free flow of ideas, where users may follow their interests in a pattern unique to each person who visits the site. Web sites with very dense links both to other information within the site, and information on other World Wide Web sites, often develop this organizational pattern.
Organizational webs are often the most impractical structure for Web sites, because they are so hard for the user to understand and predict. Webs work best for small sites dominated by lists of links, aimed at highly educated or experienced users looking for further education or enrichment, not for a basic understanding of your topic.
A good example of a site organized as a web is The Free Online Dictionary of Computing. At this site you will see that each page has a button navigation panel at the top leading to commonly visited pages, or a random page, or you may even search for a specific term. Each page contains a definition and possibly an often humorous anecdote about the term defined, and often a list of related terms. There is also a text navigation panel at the bottom leading to other terms nearby in the alphabetical list.
Most Web sites will utilize a combination of the four basic types of site organization: sequence, grid, hierarchy, and web. Except in sites that rigorously enforce a sequence of pages, your users are likely to use any Web site in a free-form "web-like" manner, just as most non-fiction or reference books are used. But the nonlinear usage patterns typical of Web surfers do not absolve you of the need to organize your thinking and present it within a clear, consistent structure that complements your design goals for the site.
Portions of the text and images were derived from the
Yale Style Manual, Lynch & Horton, 1997. Yale University.
http://info.med.yale.edu/caim/manual/. I highly recommend this site to anyone serious about learning to design effective Web pages.
Author's Note:
Hi - Bill the PinWiz here - Well, we had no applicants for the Vienna Award last month, Marg is pretty well occupied with family matters, I'm in the midst of getting my house ready to sell, and everybody seems to be doing other things than surfing through Vienna, so I thought I'd do this little tutorial on site navigation methods, in lieu of site reviews. Hopefully by September, when the next column is due, things will be jumping around here again.
