Maps visualize the network of nodes and links
The structure of a hypermedia system can be visualized in many different ways. One of the most common orientational devices is a map which visualizes the network of nodes and links (see Conklin 1986, 1987; Halasz et alia 1987; Apple 1989). The browser used in NoteCards (Halasz et alia 1987) is one example of such a map. The basic idea of a map is to give an overall view of the structure of the database. In some systems the present location in the hypermedia structure is also indicated on the map. Figure 5.1 shows a typical map.
Figure 5.1: A map of a hypermedia network. This example is taken from a HyperCard-stack about birds (created by Patrick J. Lynch, Biomedical School of Communications, Yale School of Medicine, 333 Cedar Street, New Haven, CT 06510, 1988). Each node in the graph represents a card or a group of cards in the stack. It is possible to click directly at a node in the graph which brings up the corresponding card.
A potential drawback of the kind of maps show in figure 5.1 is that the graph can become extremely tangled and complex for non-trivial applications (Conklin 1986). In figure 5.2 this problem is illustrated.
Figure 5.2: The problem with tangled maps. This map partially describes the node-link structure of the enhanced version of the experimental hypermedia system described in chapter 7. This kind of view sometimes gets messy and less clear than a pictorial view, like the one given in figure 5.7 (see also discussion on abstract and pictorial views below). One approach to reduce complexity is to filter information. In NoteCards the possibility of having different types of links makes it easy to filter out links, which makes the map less tangled (Halasz et alia 1987).
Furthermore, problems may arise when the map is not visually related to the individual pieces of information it describes. In HyperCard it is common practice to have a map on a separate card (even though this may change with HyperCard 2.0 which allows for multiple overlapping windows). This is contradictory to the lexivisual principle of presenting related information in the same context. Since it is not possible to view the map card and another card simultaneously, dis-orientation may arise due to the cognitive overhead of having to remember the map while viewing other cards. However, maps still provide useful information, even if shown on a separate card.
Having the map present all the time is one solution to the problem of having to remember the map. The use of ever present maps has been suggested by Kaehler (1988). Figure 5.3 gives an example of such a map.
Figure 5.3: An ever present map in HyperCard. This screen is from the help stack in HyperCard. The flaps at the bottom of the book are always shown. They provide a stable point of reference and they give both an overview of available information and an indication of the current location. A practical problem is that it can be difficult to fit both the map and the detailed information on the same display, due to limitations in screen space.
In addition, maps can show information on different levels of abstraction. A problem with many maps and browsers is that they give a very abstract view of the database. Even if you are familiar with the subject, it can be difficult to relate the view provided by the map to the actual contents of the database. A concrete, pictorial view can sometimes be easier to comprehend. As an example consider the graph describing the solar system and the picture of the sun and the planets shown in figure 5.4.
However, it should be noted that different ways of giving an overview are suitable for different purposes. It is not given that a pictorial view always is the best solution. A table of contents in a book, for instance, is a very efficient way for quickly presenting the contents on an overall level. Carey et alia (1990) have designed a prototype of a hypertext system called TableView which is based on tables of contents for giving an overview.
Figure 5.4: Abstract versus pictorial views. The graph does not tell us very much about the actual appearance of the solar system. The picture gives us a more concrete view. Moreover, the picture gives us more information than the graph does. The picture can tell something about the size of the planets and the distance between them. One problem, however, is that not all subjects have a natural pictorial representation, and that pictorial views are difficult to generate automatically. In addition, problems might occur when the amount of informa-tion to be displayed is large. However, this is a problem with abstract views too, as we could see above.
Multiple windows
Displaying nodes in multiple windows is one way to address those disorientation problems which arise from frequent flipping between different screen-sized nodes. Windows may be tiled or overlapped (Bly & Rosenberg 1986). The use of overlapping windows gives access to a virtually larger screen.
Even if the possibility of viewing multiple nodes simultaneously has the potential of reducing disorientation problems, this approach is not without drawbacks. For example, it can be difficult to visually relate windows to each other, and thus to see to which context a node belongs. If a map is presented in a separate window it can be difficult to relate the map to the node windows. Moreover, if the number of windows is large, there is a potential risk that the display gets cluttered, which increases the risk of confusing the user. See figure 5.5 for an illustration. Furthermore, the burden of having to move and resize overlapping windows manually has to be taken into account.
Figure 5.5: Multiple windows can clutter the display. Since windows are not visually connected, it is difficult to see how they are related. Another problem is that a large window might cover a smaller one, and thus make information invisible.
One solution to the problem of relating windows to each other has been propos-ed by Reichmann (1986), who suggests that different shades of color could be used to communicate context. Another suggestion is to use color and/or high-lighting to relate the map and the nodes to each other. Yet another suggestion is to relate the map and the nodes using arrows (Kollerbaur et alia 1988). Arrows can also be used to relate different nodes to each other (Marshall & Iris 1989). In figure 5.6 an example of the use of arrows relating windows to each other is shown.
Figure 5.6: Relating windows using arrows. Here each node is shown in a separate window. The arrows indicates the relationship between different windows. A drawback with this approach is that the screen might be cluttered when the number of nodes and links is large. Screen reproduced from Marshall & Iris (1989).
Fish-eye views
An interesting technique with respect to orientation is fish-eye views (Furnas 1986). Information currently in focus is presented in full detail, while the context is shown in less detail. The advantage of this kind of view is that it shows both detail and context at the same time, and thus provide a kind of world vision.
The concept of fish-eye views could, for instance, be applied to NoteCards-style browsers (Halasz et alia 1987). Moving the center of focus would then cause the browser to alter its appearance so that information close to the focus were displayed in a detailed way, while only top level nodes were shown on the periphery. An algorithm for computing such graphs is presented by Furnas (1986). A similar technique has been employed by Lundberg (1990) in an information organization system.
It should be noted that an optical view of the data is not necessary to take advantage of the fish-eye principle. The kind of presentation shown in figure 5.7 for example, has properties similar to an optical fish-eye view.
Figure 5.7: The fish-eye principle. Even though this view does not provide an optical fish-eye view, it makes use of similar principles. The small map in the upper-left corner gives a high-level view of surrounding information, while the information currently in focus is shown in full detail.
Landmarks
Providing visual cues is one approach to help the user to orient herself. Points of reference can function like landmarks or lighthouses. Landmarks take advantage of the human ability to recognize information (Anderson 1985; Smith et alia 1982). The idea is that one should see where one is by recognizing the land-mark. Thus, landmarks provide a kind of context which ties information together.
Landmarks can be in the form of easily recognizable background pictures, with one distinct background picture for each section of the database (Nielsen 1990). Typographical cueing, like headings, is another example on the use of landmarks (McAleese 1989; Evenson & Rheinfrank 1989).
One problem with this approach is that the meaning of the landmark, for instance a picture, might have to be learned in order to be used effectively. Therefore, it could be difficult for the new or casual user to make efficient use of landmarks. Yet another issue is standardization and consistency. Problems may arise if the same landmark is used to identify different types of information in different systems.
Paths, history lists, guided tours, and snapshots
Labyrinths are well known for people getting lost in them. A common trick introduced in Greek mythology, is to use a thread to mark the way back. Other techniques such as leaving small pieces of bread behind when proceeding through the labyrinth, are also commonly found in the classic literature. However, the possibility of hungry birds present in the labyrinth makes this method unreliable. Such techniques are slightly similar to the use of landmarks as described above in that they both provide points of reference.
Techniques similar to treads and pieces of bread can also be used to aid orientation in hypermedia labyrinths (Larnhed 1989). One such technique is to save the user's individual interaction history (Nielsen 1990). While it is always possible to backtrack and return to the starting node, this technique does not necessarily provide orientational information, at least not if the interaction history is not visually displayed. Thus, the user might be able to find her way back, but she might still not have a good notion of where she is.
Nielsen (1990) also suggests that those nodes which have been read should be marked so that the user will notice when she comes across a node the second time. An indication about the time elapsed since the node was last viewed is also provided. Such techniques can help in answering the question "Have I been here before?".
Guided tours (Marshall & Iris 1989) and scripts (Zellweger 1989) are other techniques for helping the user navigate through a hypermedia network. A guided tour is a predefined path through the hypermedia space. Guided tours provide the user with an easy way to get an overall view of the structure and main contents. A problem with tours is that it is difficult to design a tour which meets the needs of all users. A script is similar to a tour. It is a kind of program defining a sequence for presenting nodes.
The concept of guided tours can be compared to paths in a forest. Such paths are created along frequent routes people wander. It is possible for the wanderer to depart from the path into unknown parts of the forest. As long as it is easy to return to the main route this possibility can encourage exploration. Strictly defined paths, though, where is is not possible to depart from the main track, can withhold creativity and the lust to explore.
Depending on the user's interest and previous experience, tours can sometimes be time-consuming and give inadequate information. A technique similar to tours which in part addresses this problem is the use of agents as described by Laurel et alia (1990). A number of different agents in the form of guides are provided, each giving their perspective on the information contained in the system. The user can choose freely which guide she wants to follow and listen to. It is also possible to switch to another guide at any time.
Yet another technique to help the user find her way around the system is the ability to make snapshots. A snapshot saves the current state, including information shown, interaction history, position of windows, et cetera. A snapshot mechanism called Table Tops has been implemented in NoteCards by Randy Trigg (McAleese 1989).
Orientation in graphical adventure games
Graphical adventure games like, for instance, Uninvited (Mindscape 1986) have several properties which are interesting with respect to orientation. Figure 5.8 shows the main orientational features of such a game.
Figure 5.8: Orientational features of graphical adventure games. The current room is displayed in a window at the center of the screen. A small map gives an overview of the exits from the room. A description of the room is also available. In addition it is possible to look inside objects in the room, and get detailed information about them. The main point here is that detailed information (shown in separate windows) is given in the visual context of the room. Maintaining the overall context gives a good sense of where one is and what is going on. Screen from Uninvited (Mindscape 1986).
Techniques used in computer games are often inspired by film and animated cartoons. One example is The Manhole (Activision 1988), a graphical adventure game implemented in HyperCard. What distinguishes it from other hypermedia software is the animation and cut techniques used.
Animated sequences showing the movement from one place to another give a strong sense of motion. Zoom-ins and outs using animated techniques also helps to give a feeling for the present location. Moreover, carefully planned cuts between scenes provide visual continuity which help orientation significantly.
The Manhole takes place in a fantazy world of houses, rooms, and other physical places. The pictorial nature of this information makes the application of film techniques natural. A problem is that it might be difficult to apply these techniques to applications dealing with more abstract domains.
An interesting observation is that people seldom have problems with knowing where to click on the screen in games like The Manhole, even though there are no explicit buttons. This may be because it is possible to click at almost any object. It is thus likely that something will happen if the player just tries to click somewhere. Another reason is that The Manhole deals with physical objects which people are used to and know how to handle. Grabbing the knob of a door, for instance, opens the door.
Yet another interesting observation with respect to adventure games, is that the player often draws a map of the rooms and the other places in the game on a piece of paper. This map is often a great help for the player. Since it is drawn on paper, and not on the display screen, it is always visible and easy to find. No obscure commands are required to activate it. It is also very easy to make quick notes. Maybe documentation on paper, with empty space to write additional comments, would be helpful in other hypermedia applications than games.
Improving visual orientation techniques
While visual techniques are already in wide use, various aspects concerning visualization of totality and context could be improved. In the next chapter the design and evaluation of an experimental hypermedia system is described. It was developed using lexivisual principles. In chapter 7, additional examples on how orientation in hypermedia systems could be improved are given.