Conceptually, hypertext is a very elegant concept. When the user
wants additional information about particular topic, he or she need
only to click on or in some other way select the text that refers to
that topic. More information about that item is then displayed.
However, a simple concept often has complex problems that aren't
immediately obvious. Such is the case with hypertext.
10.2.1. Lost in Hyperspace
When users interact with any interface, they tend to form a mental
model of the process being controlled. A good interface will help the
user build a fairly accurate model of the system. Certain
aspects may be abstracted somewhat because they are not meaningful to
the user, but the basic concepts of the model should be fairly
faithful to reality. If they are not, then the user may try to
manipulate the interface in ways that make sense given their mental
model but which make no sense in the real system. Even worse, the
actions they take may have radically different effects than what they
intended because of the model mismatch. At best, this will cause
the user significant frustration. At worst, it could cause data loss
or even more catastrophic results.
The same thing happens when a user begins navigating in an information space. Whether that space is in a book, a card catalog, or a hypertext system is irrelevant; the user tends to develop a structure for the information in his or her mind. Ideally, this helps relate pieces of information to each other and helps guide searches to an appropriate location in the information space. However, while a book is a highly linear space with a fairly straightforward model, a hypertext document is often highly nonlinear. Information flow can branch outward from many locations within the text. By following a link, the user may be taken to a completely different part of the document, and it may not be entirely clear how the new found information relates to the document as a whole. It may not even be clear how to get back to the location in the document that contained the link to this page.
When a user gets so deep into a hypertext system that he or she can no longer figure out where the current information fits into the grand scheme of things or how the current information was found in the first place, that user is said to be "Lost in Hyperspace." (Edwards and Hardman, 1989) Typically, this situation arises because the mental model that the user formed of the information system is chaotic -- a jumbled mess of pages and links that have no real structure beyond the linkages themselves. If this is a faulty model, that's bad enough. Too often, however, this is the only model that applies to a great many hypertext systems.
This problem is only exacerbated on the World Wide Web. In a stand-alone hypertext system, the author has control over the entire document. If he or she has a coherent view of the document structure, then there's a good chance of conferring this model to the user. On the web, however, a hypertext link can lead to anywhere, including a completely different site on a completely different server with a completely different structural model that is completely out of the original author's control.
Beginning to see the problem?
10.2.2. Guiding the User
The situation is not hopeless, of course. There are many things that
can be done to design web pages so that they aid the user in forming
an accurate and organized model of the information available on the
site. The
Yale C/AIM Style Manual
(Lynch, 1996)
discusses many of these techniques.
Perhaps the first important point to stress is the need for consistency. In most interface designs, this is a desirable thing. In web design, it is one of the most important concepts to learn. Moreover, consistency can and should be applied at many different levels of the design, from consistency between pages to consistency in layout and in imagery.
To begin with, inter-page consistency within a site is a must. If all the pages in a site have a common visual thread running through them, then a reader will quickly know when a link has been followed to an external site because the look will change.
Creating this kind of consistency can be quite simple. One effective technique is to use a single banner at the top of all pages, as is done in this book. Such a banner provides a strong visual identity to the site. The banner does not even have to be exactly the same on all pages; simple variations in color and/or imagery can help indicate different high level topics within the site. Just be sure that all the variations remain similar enough that there's no doubt they're from the same site.
Another type of inter-page consistency involves buttons, or images used as links. If a button on one page performs a similar function to a button used on a different page (e.g., go to next page), it will help the reader if both buttons use the same image. This way, when the user learns the meaning of that particular image, he or she will be able to use that knowledge whenever that image reappears.
Consistency within a page is important too. For example, when a page is divided into multiple sections and each section is introduced by a header, the format of that header should be consistent throughout the page (and perhaps throughout the site). If an image is included as part of that header, which is often a good way to visually separate sections, all the images should be the same size and should occupy the same position horizontally on the page (i.e., you should not have some on the left edge while others are centered). This avoids the "clown's pants" phenomenon where images and text are scattered haphazardly around the page, leading to a general sense of disorder and confusion. Again, the Yale C/AIM Style Manual (Lynch, 1996) provides an excellent example of this.
The web designer also needs to keep in mind that on the World Wide Web, other people can link to any page within your site. Therefore, you cannot count on the reader having been to your top level page or any other pages within your site. You have to assume that the reader could enter the system anywhere. Here, you can help the user by providing a consistent set of navigational links on every page. These are usually placed at the top or bottom of the page, or sometimes in both places. At the very least, a link should be provided to return the user to some top level page in your document space. If your document is arranged in a roughly hierarchical form, a link to the current page's parent is also useful. And if there is a linear flow to the information on your site, as there is with the sections of this book, then links to the previous and next pages can be quite handy. By giving the user these links on every page, you not only help them navigate through the site, you also help them form their mental model based on the structure these links create.
Yahoo (Filo and Yang, 1994) is an excellent example of consistent visual look and navigational links, though the links are slightly different than those described above. At the top of each and every page is an image map that contains links to several of the most important pages in the site. This banner serves the dual purpose of establishing a visual identify for the site and aiding in site navigation. More importantly, however, the header on each page lists every step in the categorizational hierarchy above the current page. In this way, a user who enters the site at one of the inner nodes can quickly and easily see how the page relates to other available information and can also get to this other information via a single click.
There are other techniques beyond simple consistency to help users form a good mental model. One simple step is to make the text within links as meaningful as possible. Too often, one sees a link saying only "Click here" for information. The user will be whisked off somewhere, but who knows where? It takes very little effort to make link text meaningful. It also helps the reader because as he or she quickly scans through a document looking for highlighted links, they'll be able to quickly discern what each link is about. Well chosen link text conveys the relationship between the document with the link and the document being linked to. It also helps some web indexes catagorize the content of the linked page. Moreover, some browsers for those with disabilities may present a list of links to the user so that they can chose which ones to follow. In this situation, "Click here" does not provide adequate information.
Another way to help the user build relationships in an information space is to keep file sizes small. Generally, hypertext links are created so that users can find out more about a particular topic being mentioned in the current document. If particular concepts can be isolated on their own short pages, then the user can quickly fill in the gaps in their knowledge without having to spend a great deal of time searching for the relevant information. Moreover, the user will be able to see directly how the new information relates to the original document. If the second page contains lots of extraneous information or information on several different subjects, this relationship will be obscured.
One soon realizes that choosing the right amount of information for a page is always a balancing act. Enough information must be provided to successfully explain the concept. Too much information will overwhelm the user. There is no one guideline to determine what size is right. It's dependent on the information itself and on the prior knowledge of the target audience. Sometimes, you'll just have to try something and then see if people like it or not. After a while, you may begin to just get a feel for the right size. Experience is still a great teacher!
Copyright © 1996 Joseph W. Reiss, All Rights Reserved
Joe Reiss
<jreiss@vt.edu>
Last modified: Sat Dec 7 12:42:58 1996