Ideas for Organization and Navigation

At this point, you should have a good idea of what you want to talk about as well as a list of topics. The next step is to actually start structuring the information you have into a set of web pages. Before you do that, however, consider some standard structures that have been used in other help systems and online tools. This section describes some of these structures, their various features, and some important considerations, including the following:

• The kinds of information that work well for each structure

• How visitors find their way through the content of each structure type to find what they need

• How to make sure that visitors can figure out where they are within your documents (context) and find their way back to a known position

As you read this section, think about how your information might fit into one of these structures or how you could combine these structures to create a new structure for your website.

Hierarchies

Probably the easiest and most logical way to structure your web documents is in a hierarchical or menu fashion, as illustrated in Figure 2.3. Hierarchies and menus lend themselves especially well to online and hypertext documents. Most online help systems, for example, are hierarchical. You start with a list or menu of major topics; selecting one leads you to a list of subtopics, which then leads you to a discussion about a particular topic. Different help systems have different levels, of course, but most follow this simple structure.

Figure 2.3. Hierarchical organization.

In a hierarchical organization, visitors can easily see their position in the structure. Their choices are to move up for more general information or down for more specific information. If you provide a link back to the top level, your visitors can get back to some known position quickly and easily.

In hierarchies, the home page provides the most general overview to the content below it. The home page also defines the main links for the pages farther down in the hierarchy. For example, a website about gardening might have a home page with the topics shown in Figure 2.4.

Figure 2.4. A Gardening home page with a hierarchical structure.

If you select Fruits, you then follow a link "down" to a page about fruits (see Figure 2.5). From there, you can go back to the home page, or you can select another link and go farther down into more specific information about particular fruits.

Figure 2.5. Your hierarchy takes you to the Fruits page.

Selecting Soft Fruits takes you to yet another menu-like page, where you have still more categories from which to choose (see Figure 2.6). From there, you can go up to Fruits, back to the home page, or down to one of the choices in this menu.

Figure 2.6. From the Fruits page, you can find the Soft Fruits page.

Note that each level has a consistent interface (up, down, back to index), and that each level has a limited set of choices for basic navigation. Hierarchies are structured enough that the chance of getting lost is minimal. This especially is true if you provide clues about where up is; for example, an Up to Soft Fruits link as opposed to just Up.

Additionally, if you organize each level of the hierarchy and avoid overlap between topics (and the content you have lends itself to a hierarchical organization), using hierarchies can be an easy way to find particular bits of information. If that use is one of your goals for your visitors, using a hierarchy might work particularly well.

Avoid including too many levels and too many choices, however, because you can easily annoy your visitors. Having too many menu pages results in "voice-mail syndrome." After having to choose from too many menus, visitors might forget what they originally wanted, and they're too annoyed to care. Try to keep your hierarchy two to three levels deep, combining information on the pages at the lowest levels (or endpoints) of the hierarchy if necessary.

Linear

Another way to organize your documents is to use a linear or sequential organization, similar to how printed documents are organized. In a linear structure, as illustrated in Figure 2.7, the home page is the title or introduction, and each page follows sequentially from that structure. In a strict linear structure, links move from one page to another, typically forward and back. You also might want to include a link to Home that takes the user quickly back to the first page.

Figure 2.7. Linear organization.

Context generally is easy to figure out in a linear structure simply because there are so few places to go.

A linear organization is very rigid and limits your visitors' freedom to explore and your freedom to present information. Linear structures are good for putting material online when the information also has a very linear structure offline (such as short stories, step-by-step instructions, or computer-based training), or when you explicitly want to prevent your visitors from skipping around.

For example, consider teaching someone how to make cheese by using the Web. Cheese making is a complex process involving several steps that must be followed in a specific order.

Describing this process using web pages lends itself to a linear structure rather well. When navigating a set of web pages on this subject, you'd start with the home page, which might have a summary or an overview of the steps to follow. Then, by using the link for going forward, move on to the first step, Choosing the Right Milk; to the next step, Setting and Curdling the Milk; all the way through to the last step, Curing and Ripening the Cheese. If you need to review at any time, you could use the link for moving backward. Because the process is so linear, you would have little need for links that branch off from the main stem or links that join together different steps in the process.

Linear with Alternatives

You can soften the rigidity of a linear structure by enabling the visitors to deviate from the main path. You could, for example, have a linear structure with alternatives that branch out from a single point (see Figure 2.8). The offshoots can then rejoin the main branch at some point farther down, or they can continue down their separate tracks until they each come to an end.

Figure 2.8. Linear with alternatives.

Suppose that you have an installation procedure for a software package that's similar in most ways, regardless of the computer type, except for one step. At that point in the linear installation, you could branch out to cover each system, as shown in Figure 2.9.

Figure 2.9. Different steps for different systems.

After the system-specific part of the installation, you could link back to the original branch and continue with the generic installation.

In addition to branching from a linear structure, you could also provide links that enable visitors to skip forward or backward in the chain if they need to review a particular step or if they already understand some content (see Figure 2.10).

Figure 2.10. Skip ahead or back.

Combination of Linear and Hierarchical

A popular form of document organization on the Web is a combination of a linear structure and a hierarchical one, as shown in Figure 2.11. This structure occurs most often when very structured but linear documents are put online; the popular Frequently Asked Questions (FAQ) files use this structure.

Figure 2.11. Combination of linear and hierarchical organization.

The combination of linear and hierarchical documents works well as long as you have appropriate clues regarding context. Because the visitors can either move up and down or forward and backward, they can easily lose their mental positioning in the hierarchy when crossing hierarchical boundaries by moving forward or backward.

Suppose that you're putting the Shakespeare play Macbeth online as a set of web pages. In addition to the simple linear structure that the play provides, you can create a hierarchical table of contents and summary of each act linked to appropriate places within the text, similar to what is shown in Figure 2.12.

Figure 2.12. Macbeth's hierarchy.

Because this structure is both linear and hierarchical, you provide links to go forward, backward, return to beginning, and up on each page of the script. But what is the context for going up?

If you've just come down into this page from an act summary, the context makes sense: Up means go back to the summary from which you just came.

But suppose that you go down from a summary and then go forward, crossing an act boundary (say from Act 1 to Act 2). Now what does up mean? The fact that you're moving up to a page you might not have seen before is disorienting given the nature of what you expect from a hierarchy. Up and down are supposed to be consistent.

Consider two possible solutions:

• Do not allow forward and back links across hierarchical boundaries. In this case, to read from Act 1 to Act 2 in Macbeth, you have to move up in the hierarchy and then back down into Act 2.

• Provide more context in the link text. Rather than just Up or an icon for the link that moves up in the hierarchy, include a description of where the user is moving to.

Web

A web is a set of documents with little or no actual overall structure; the only thing tying each page together is a link (see Figure 2.13). Visitors drift from document to document, following the links around.

Figure 2.13. A web structure.

For an example of such a site, visit Wikipedia at http://wikipedia.org. Wikipedia is an encyclopedia written and maintained by the public. Anyone can write a new article or edit an existing article, and the site is very loosely organized. Articles that reference topics discussed in other articles link to them, creating a web organization scheme. Wikipedia has no hierarchical organization; you're expected to find the topics you're interested in by following links or using the site's search functionality.

Web structures tend to be free-floating and enable visitors to wander aimlessly through the content. Web structures are excellent for content that's intended to be meandering or unrelated or when you want to encourage browsing. The World Wide Web itself is, of course, a giant web structure.

In the context of a website, the environment is organized so that each page is a specific location (and usually contains a description of that location). From that location, you can move in several different directions, exploring the environment much in the way you would move from room to room in a building in the real world (and getting lost just as easily). The initial home page, for example, might look something like the one shown in Figure 2.14.

Figure 2.14. The home page for a web-based virtual environment.

From that page, you then can explore one of the links, for example, to go into the building, which takes you to the page shown in Figure 2.15.

Figure 2.15. Another page in the web environment.

Each room has a set of links to each adjacent room in the environment. By following the links, you can explore the rooms in the environment.

The problem with web organizations is that you can get lost in them too easilyjust as you might in the world you're exploring in the example. Without any overall structure to the content, figuring out the relationship between where you are, where you're going and, often, where you've been, is difficult. Context is difficult, and often the only way to find your way back out of a web structure is to retrace your steps. Web structures can be extremely disorienting and immensely frustrating if you have a specific goal in mind.

To solve the problem of disorientation, you can use clues on each page. Here are two ideas:

• Provide a way out. Return to Home Page is an excellent link.

• Include a map of the overall structure on each page, with a "you are here" indication somewhere in the map. It doesn't have to be an actual visual map, but providing some sort of context goes a long way toward preventing your visitors from getting lost.