HTML 4.0 Sourcebook
(Publisher: John Wiley & Sons, Inc.)
Author(s): Ian S. Graham
ISBN: 0471257249
Publication Date: 04/01/98

Structured Tree-Like Collections

The next hypertext model is that of a tree or hierarchical document collection. An example is shown in Figure 4.6, which shows a single, extended tree. A real-world example is the Yahoo! collection—a list of Web-accessible resources—found at www.yahoo.com. The Yahoo! documents are organized hierarchically. For example, the Yahoo! page covering aids for people with disabilities, shown in Figure 4.7B, lies under the category “Companies,” listed in Figure 4.7A. This page in turn lies under the category “Disabilities,” which in turn lies under the category “Health.” If you have information that organizes itself in a hierarchical manner, this is your obvious approach. Of course, the hierarchy is useful even for small collections (the Yahoo! site is very large). Another more modest example is presented later in this chapter.

Figure 4.6  An illustration of a hierarchical document web. The documents are organized in a tree-like structure, descending from a single home document.

The navigation tools required within a hierarchy are different from those needed in a linear collection. For example, the linear concepts of next and previous are no longer meaningful, while links to “Up” are usually equivalent to the browser’s “back” button, and are often not necessary. Instead, you want links back to a number of locations such as the root of the tree (the link to “Yahoo” in Figure 4.7—the image is clickable), perhaps to a “Search” or “Index” tool (essentially a searchable index), and also to important informational pages. The document in Figure 4.7 also has links to a feedback utility (“Write Us”) and to general information—here about the Yahoo! hierarchical resource list (“Info”). Finally, the special-purpose link “Add URL” lets a visitor register new URLs for inclusion in the collection. Obviously, each collection will have its own special-purpose utilities and links, depending onthe site’s function and purpose.

Figure 4.7  Example page from the Yahoo! hierarchical catalog of Web sites. (A) is an example of an index page from this collection—you can find this page by accessing the site: www.yahoo.com and selecting the category “Health,” followed by the category “Disabilities.” Note the boldface items, which indicate links that go an additional level down the hierarchical tree—the number afterwards gives the number of items in the linked index page. An “@” indicates that the link is to a document that can be reached from more than one Yahoo! category page—a “leaf” attached to more than one “branch.” (B) shows the document returned by selecting the “Companies (@)” link in the document shown in part (A).

These screen captures are courtesy of Yahoo! Inc.

At Yahoo!, the page layout also contains important information. In all the Yahoo! index pages (e.g., Figure 4.7A), links to additional subcategories are indicated by boldface hypertext anchors, while the bracketed numbers after each such anchor indicate the number of items listed in that subcategory. A trailing “at” (@) character means that the subcategory is actually accessible from more than one place in the hierarchy, implying that the node has multiple parents—the hierarchy is not a simple tree, but contains cross-linked branches. In this case, the top of the page lists the primary route through the hierarchy to the document; in Figure 4.7B, these are “Business and Economics,” followed by “Companies,” followed by “Disabilities.” The label “Disabilities” is not an active anchor, as this is the label for the document being displayed—the others provide links back to the indicated pages. This feature can be confusing, and an inexperienced Yahoo! user, unfamiliar with this nonlinear structure and with the meaning of the character “@”, can sometimes get lost by selecting one of these alternative links upwards.

The Yahoo! design undergoes constant evolution, as better page layout models are developed, and as the collection of references grows—the Yahoo! tree(s) keep growing new document “branches” and “leaves” to account for the ever-increasing list of resources stored in the Yahoo! database. Overall, the design has evolved comfortably (at least as far as a user is concerned!) within the original structure, which is a good indication of the robust nature of the hierarchical approach.

Designing an Effective Hierarchy

The hierarchical approach can be extremely useful, but you must be careful to make it easily navigable. Particularly, you do not want the hierarchy to be too deep (too many levels) or too shallow (too few levels). If the hierarchy is too shallow, then there will be too many categories at each level and it will be difficult for visitors to find what they are looking for. At the same time, if there are too many levels in the hierarchy, it will also be hard for visitors to find what they want. After four or five selections down into the hierarchy they will lose confidence (or patience!) that they are on the right track. You should strive to keep the tree depth as shallow as possible, without making each level too unwieldy. A depth of 3 to 5 is ideal, while anything greater than 6 is likely to cause navigational problems.

Most importantly, your design—the number of levels and the names and labels of your categories—must reflect the material you wish to present and the way you wish to present it: There is no one universally appropriate hierarchical structure. Thus the Yahoo! layout, which works well for Yahoo!, is not where you should start—you should start by looking at your data and determining how you want it to be organized and accessed.