Interactive comics books
In a hypermedia system, as an alternative to traditional approaches, interactive comic strips with dynamic panel layout would be possible. Such a presen-tation could provide a good overview and thus enhance orientation. Figure 7.1 illustrates this idea.
Figure 7.1: Interactive comics. Panels are displayed continually as the user selects items of interest. In this example the solar system panel was the only one visible at the start. This panel provides a context for the subsequent ones. When the user clicked at Uranus in the first panel, the Uranus panel was displayed. When she clicked on the Discovery button, the panel with the text box was shown. Note the jagged balloons which mark where the user has clicked. Arrows show the sequence in which the panels have been displayed. This makes it easy to achieve an overview. The last panel could be highlighted to further clarify present location. It is also possible to backtrack in which case the panels are closed. This arrangement could be compared to browsers in Smalltalk-80 where menu alternatives on a higher level are always visible (Goldberg & Robson 1983).
A page in a comic book consists of panels. The panels are usually arranged in strips, but more exotic layouts are not unusual. The advantage with panels is that they give a good overview of a sequence of events. Furthermore, balloons add dynamics and provide flow and timing to the story. However, the main advan-tage of the tiled panel layout is that the overview is good. The presentation shows the reading path and thus guides the reader. The sequence of panels also functions as a kind of history list; it is always easy to backtrack in the story. In addition, it becomes possible to get an overview of a dynamic process in a way not possible while viewing a film (Kindborg & Kollerbaur 1987b; Kindborg 1988). In a film, moments of action disappear as quickly as they appear. A comic book provides a series of snap-shots over time, making it easier to com-prehend the story. Comic strips could thus be valuable as a complement to a film or animation.
Furthermore, since no panel overlaps or covers another panel, the risk of getting confused is less than when having overlapping windows. A drawback with the comic book layout is that the tiled arrangement consumes screen space. A large screen is probably necessary for this kind of layout. In addition, panning and other browsing facilities would be necessary. One panning technique is a miniaturized map of a scrollable page with an indicator which shows which part of the page is currently visible (Krona 1990). A similar technique has been used in NoteCards (Halasz et alia 1987).
It can also be difficult to develop a good algorithm for automatic panel layout. Comic pages are normally composed by professional artists who posses artistic talent and experience very difficult to automate. However, some kind of auto-matization is probably necessary, since it would be an overwhelming task to design all possible alternative layouts manually. One solution is to have the user place new panels as they are displayed, but this may cause extra work for the user. This approach is used for window placement in, for instance, NoteCards.
The comic book layout for presenting nodes uses the conventional node-link model. We will now explore other techniques which are based on a different way of structuring information.
Interactive pictures
An interactive picture is a visual presentation which can respond to the user's actions. Different parts of the picture react in different ways when clicked at. This idea was originally suggested nearly twenty years ago by Ted Nelson. He proposed a variety of interactive visual presentations: hypermaps, hypergrams, queryable illustrations, and hypercomics (Nelson 1974). In figures 7.2, 7.3, and 7.4, an example of an interactive picture is shown.
Figure 7.2: An interactive picture - the basic view. This is the basic view of the solar system. The user has just clicked on Uranus. A jagged click balloon gives feedback and shows where the click occurred.
Figure 7.3: An interactive picture - details shown in context. Clicking on the planet results in an animation where the planet grows 'out of the picture', revealing additional information and detail. Small balloons show where it is possible to get additional, textual information. The size of the balloons could be used to indicate how much text is available. Note the difference between this kind of presentation and the card flipping metaphor used in, for instance, HyperCard. Here the context is always visible which helps orientation. Video games often employ this kind of animated views. Many game consoles, like the LYNX by Atari, has specialized hardware which facilitates scalable sprites (see Personal Computer World, August 1990, pages 215 and 216).
Figure 7.4: An interactive picture - presenting text in context. Clicking on a balloon causes it to expand and display it's contents. Since the context is still visible, it is easy to see where one is. Shrinking the balloon could be accomplished by inserting a clickable close symbol in, for instance, the upper left corner of the balloon.
Unlike a HyperCard stack, an interactive picture does not consist of many different cards, but of one dynamic page. In contrast to the interactive comic page, it does not consists of panels, but of interactive objects which make up the presentation. Clicking at such an object would cause the object to expand, go away, alter its shape, or animate itself. Moreover, other objects might appear or reappear, and thus alter the presentation. A typical application would be to expand and zoom in on different parts of a map, drawing or photograph. Since one is interacting with the same basic picture all the time, there is little risk of getting lost.
There is a close relationship between interactive pictures and lexivisual presen-tations. The structure of a lexivisual presentation, for instance a panel in a comic book, is very similar to that of an interactive picture. The lexivisual presentation consists of objects which are explained with zoom-ins and detailed text descrip-tions. The dynamic presentation made possible by computers could enhance the kind of presentations discussed in chapter 4.
The major feature of an interactive picture is that detailed information is shown in its context. There is never a switch to another page or card. The main scene of the picture provides a visualized frame of reference for the entire presentation. This is similar to ever present maps which were described in chapter 5. A problem is that part of the background picture will be covered by the detailed information shown. However, having part of the basic presentation always visible might reduce the risk of getting lost. In addition, interactive visuals can use screen space efficiently. This makes them suitable when screen space is limited. A difficult problem, however, is that it takes considerable skill and experience to design good graphical presentations. What is more, it might be difficult to automatically place information items. There is also a risk that the user gets confused and disoriented due to cluttered presentations.
An additional difficulty with interactive pictures is visualizing how much information is available. When examining an object in the real world, one can directly perceive the volume and the weight of the object. Again, the abstract nature of computer based media makes it more difficult to get an intuitive understanding of an object. Visualizations could be augmented with animation and sound, making the presentation less abstract. As with ordinary hypermedia it would also be a problem to see where to click. One solution is to mark clickable areas as suggested previously.
An additional example of interactive pictures is interactive and animated simulations, where information change over time. Most examples given in this thesis concern reading 'static' information. A simulation would allow the user to actively influence a story, a running process, or an event. Simulations are very useful for learning purposes. Learning by doing, that is to test and explore new concepts and ideas interactively using, for instance, hypermedia based simula-tions can enhance the understanding (Ferm et alia 1987, 1988). Such 'active' representations are also called enactive representations (Bruner 1971). Figure 7.5 gives an example of an animated simulation based on the same principles.
Figure 7.5: An interactive simulation. This animated simulation shows a moon orbiting a planet. It is possible to interact with the process by pointing at the moon and throw it into a new orbit. This example is very similar to how ARK (Artificial Reality Kit) works (Smith 1987). The key element with respect to orientation is that one interacts with the same set of objects all the time. Since it is not possible to switch context, there is little risk of getting disoriented. Also note the map, which gives an overview of the process. The speed lines of the moon amplifies the sense of direction and motion. Such techniques are often employed in animated cartoons (Thomas & Johnston 1981).
Interactive pictures use a model which is based on objects appearing and disappearing in the same presentation space, like actors on a theater stage. This model is also similar to that of some graphical computer games. Actually, many computer games provide the best existing examples of how interactive visuals can be used.
Graphical computer games
A general problem with many hypermedia systems is that the dynamics allowed within a node is limited (van Dam 1988). In, for instance, HyperCard, were nodes are static, it is difficult to implement the kind of dynamic presentations discussed in this chapter. Instead the author is often forced to divide the material into small elements, and spread information across different nodes.
By contrast, graphical adventure games like Uninvited (MindScape 1986) often employ dynamic presentations within a given node. This kind of functionality can be implemented in hypermedia systems that have an object-oriented presen-tation model, like SuperCard (Silicon Beach 1989) or ToolBook (Asymetrix 1990), both HyperCard 'clones'.
An interesting observation is that graphical games like Uninvited employ an obj-ect-oriented data model which is different from the traditional node/link model of hypermedia (Kindborg, Kollerbaur, Larnhed 1988). In addition to links be-tween nodes (that is doors to other rooms) a node (room) can consist of several objects (things). Each node can be thought of as a scene where different actors can appear, disappear, move around, alter their shape, be examined, et cetera.
The interesting point is that the action takes place in the context of the node. One does not switch node/context as frequently as in a pure node-link model. Thus, the presentation becomes less fragmented. I believe that an object-oriented pre-sentation and data model for hypermedia would strongly facilitate the kind of presentations described in this chapter, and hence contribute to reduced disorientation.
Object-oriented hypermedia tools
As mentioned earlier, the tool used to implement a hypermedia system strongly influence the final design of the system. To make it easier to implement the kind of designs discussed in this chapter, an object-oriented data model for hyper-media tools is suggested. The main point of an object-oriented model is that it can make it easier to implement and think about designs like interactive pictures. While one could think of an inter-active picture in terms of nodes and links, the central idea is that instead of dividing informa-tion into small parts, one thinks in terms of a whole in which the parts (objects) fit in. This philosophy can be better supported by an object-oriented approach than by the node-link model.
The model proposed here has the following elements:
Objects: Nodes as well as their contents are represented as objects. Each object can have one or more attributes. Referential links can be implemented as attributes of an object.
Composite objects: An object can be a composite assembled from other objects. That is, an object can be a part of another object. This mechanism supports the displaying and hiding of groups of objects. It also supports the successive display of additional levels of detail. See figures 7.2 to 7.4 for an example. A node or a scene is implemented as a composite object.
Message passing: Objects communicate via message passing. Sending mes-sages displays, hides, or activates objects. An object can function as a button which send messages to other, possibly composite, objects.
This model is heavily influenced by object-oriented programming languages like, for instance, Smalltalk (Goldberg & Robson 1983), Loops (Bobrow & Stefik 1983) and Director (Kahn 1979).
The notion of composite objects could help structuring the system in a less fragmented way. While the node--link model is based on a reference relation, composite objects facili-tate an inclusion relation (Halasz 1988). This allows a collection of objects to be treated as a whole. Instead of viewing the hypermedia database as a complex web, one can design systems which are structured using various abstraction mechanisms, like, for instance, hierarchy and modules. For a detailed discussion of this topic, see Kindborg, Kollerbaur, Larnhed (1988).
In the solar system example each planet would be a composite object which contains additional objects for the detailed description of the planet. The whole solar system would be implemented as a composite object consisting of the Sun and its planets. One possibility would be for an object to appear as a part of different composite objects. Calvin could be such an object which appears in each of the planet descriptions. Modifications to Calvin would then appear in all descriptions. Moreover, an object could present itself differently depending on the situation in which it appears. This idea is similar the that of observer languages, as suggested by Alan Kay (Kay 1978), where an object shifts its appearance dependent on who observes it.
Orientation in future hypermedia structures
Virtual worlds and cyberspace are receiving a growing interest by the human-computer interaction community (Fisher 1990; Rheingold 1990; see also the following newsgroups on the InterNet: alt.cyberspace, alt.cyberpunk, and sci.virtual-worlds). Both virtual worlds and cyberspace are strongly related to hypermedia.
A virtual world, or virtual reality, is a computer simulated model of a real or imagined world. The key idea is to produce real-time animated simulations of rooms and other places, populated with various objects. Essential to virtual worlds is the the illusion of 3 dimensional images. One technology for this is head-mounted 3D displays which can create a vivid illusion of real space. This display technology is often used in conjunction with input devices like data-gloves and body suits. The user can move around in the simulated environment by pointing and gesturing (Brand 1988). Some interactive pictures and inter-active simulations could be characterized as less sophisticated virtual worlds. A video game can also be thought of as a kind of virtual world.
The strong sense of a 3 dimensional space can help orientation, since we can use our experiences with orienting ourselves in the real world. A virtual world is based on an object-oriented model, which among other things facilitate presen-tation of information in a less fragmented way than the node-link model (see discussion above). Even though virtual worlds present objects in their proper context, disorientation is still a potential problem. It might, for instance, be dif-ficult to estimate the size and structure of the world. It can be difficult to know where in the world one is, despite the use of sophisticated output and input technologies. Overall views, ever-present maps, and other navigational tools would, like in the real world, be useful for finding the way around the virtual world.
Cyberspace can be thought of as a very large, distributed, and visualized hyper-media structure. Cyberspace can be conceived as an independent realm, a shared virtual environment whose inhabitants, objects, and spaces are data, but data which is visualized, heard, and perhaps touched. William Gibson describes cyberspace as a computer generated hallucination of a gigantic, world-wide network of databases:
"Cyberspace. A consensual hallucination... A graphic representation of data abstracted from the banks of every computer in the human system. Unthinkable complexity." (Gibson 1984, page 67).
The virtually unlimited size of cyberspace and the heavy use of visualization techniques makes it interesting with respect to orientation. Like in a virtual world, it is important to give the user a feeling for how large the world is, where she is, and where she can go form the current location. Maps could be a helpful tool for navigating cyberspace. The large size of cyber-space would probably make it necessary to make use of techniques like fish eye views, for example in the form of maps that use a dynamic logarithmic scale. A 3D map is also a possibility, but it is not clear how well such a device could be used. Sometimes it is much more difficult to grasp 3D presentations. For example, a 2D bar chart is easier to comprehend than a 3D one (Petterson 1989).
The multi-user nature of cyberspace (many users can populate the world simul-taneously) would make additional techniques for communicating with each other and being able to find each other necessary. Maybe the the presence of others could be indicated on the map, possibly using various filters to focus on, for instance, friends and colleagues.
Clearly, the principles discussed in this thesis should be of help for navigation in virtual worlds and in cyberspace, the hypermedia systems of tomorrow.