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

Web Collections as Hypertext

Most design problems are apparent in large collections, or webs, of HTML documents. Web collections are a form of hypermedia, limited of course by the technologies of the Web and the Internet (a web collection is clearly not as dynamic or multimedia-oriented as a Macromedia Director presentation), but at the same time enriched by the ability to interconnect with resources around the world. Most importantly, the Web is inherently nonlinear, since there can be a nearly (and often frustratingly) endless number of ways of getting from one page to another. Figure 4.2 shows a simple figure of a possible Web document collection—as in Figure 4.1, the solid lines indicate the links (in this case, hypertext links) between the pages, with the arrows indicating the directions of the links.

Do you see the problem inherent in Figure 4.2? Suppose you are reading document A, and want to proceed to a topic discussed in document B. How do you get there? The answer is that you have absolutely no idea. If a collection were to have no structure other than the links indicated in Figure 4.2, the reader would be forced to move randomly through the collection until he or she happened, largely by chance, upon the desired page. In the absence of additional navigational cues, the reader does not know where to find the table of contents (or even if there is one), the index, or even the beginning of a section. Even if the links are sequential (the documents connected one after the other, like a book), a reader would not be able to find these places as, with the Web, there is no way to step back, “see” the entire book, and just “turn” to the “front” for the table of contents. Indeed, a reader has absolutely no idea of the size of the collection: There could be one page or a thousand. A book gives you both a local and global feel for its size and for your location in it. The page number tells you where you are and where the next and previous pages are, while the feel of the book tells you approximately where you are with respect to the entire book (e.g., halfway through) and also tell you exactly where to find the table of contents (at the front) or the index (at the back). The reader’s ability to see the whole picture, plus conventions for the location of contents pages and indexes, are part of the technology of books that makes them so easy to use. And, it is the absence of these views that can make hypermedia design so difficult. It is your goal, in designing a Web, to include navigational tools to allow visitors to easily explore and find what they are looking for without becoming lost or frustrated.

Figure 4.2  An illustration of a web of documents—the arrows show the links between documents. The collection is nonlinear, in that there are a number of different routes by which the collection can be explored. It is very easy to get lost in such a web.

Types of Web Collections

Now that we’ve given this introduction, it is time to look at some practical examples of Web collection design and at the issues that a web designer must take into account in managing and maintaining such collections.

We will first look at a linear model for a Web—just because the Web is nonlinear doesn’t mean you have to give up linearity completely! A linear approach is perfectly appropriate when converting a printed document to hypertext, for online documentation, or when you have a particular sequence that you want followed by your readers, such as a sequence of slides.

Of course, most webs are not linear, and later examples look at nonlinear collections, in particular, at the possible organization of collections of documents at a Web site. These sections will include design pointers for larger collections, as well as administrative suggestions for managing large collections developed by groups of authors.

Next, we look at design and planning issues that are independent of the layout of your web. Some examples are: how to plan the web layout, how to organize the documents, and how to incorporate multimedia components.

Finally, we look at tuning a design to make a Web site attractive to visitors to encourage their return. This is an issue both of hypertext design and of public relations/marketing. You must always remember that a Web site is a dynamic place, which encourages interaction with its visitors. You must be aware and take advantage of this character, if you are going to develop a site that attracts and retains visitors.

Marketing and site design are further examined in Chapter 5, where we look at some real-world Web sites and examine the site features that are used to ensure a persistent base of regular visitors.

Linear Document Collections

Figure 4.3 shows a schematic layout for a linear document collection—the solid lines with directional arrows show the critical navigational links. Figures 4.4 and 4.5 show a possible design for a page in this collection; Figures 2.2 and 2.4 are other examples of pages from a linear collection. The structure in Figure 4.3 very much follows the book layout shown in Figure 4.1, except that there are now explicit links to places such as the index and table of contents. Recall that, in a book, the reader could easily find these components because of their physical place in the book. This is not possible with hypertext, so that Web documents must have explicit links to these navigational aids.

It is easiest to start by looking at the structure of a single page, such as the example in Figures 4.4. and 4.5. Here, the important navigational features are in the banner at the top and bottom of the pages. The first feature is the title graphic. This quickly identifies the page as part of a particular collection (the “Information Commons” collection), so that users immediately know, from page to page, where they are. (The text “INFORMATION COMMONS” and “Help with E-Mail” are part of the graphic itself.) Every collection should carry an identifying title graphic such as this or, alternatively, an identifying string of text. It is then possible to use variations of a particular graphic to indicate which section is being examined. For example, the graphic in Figure 4.5 could be varied from section to section—each section would still show the logo and the name “Information Commons,” but might also show a smaller-font string with section names or headings. Some examples of this are shown later in this chapter.