Why study traditional media?
One major element of this thesis is the application of communication techniques used in traditional media to hypermedia. Why are we stressing this point? Professional com-municators, like designers, artists, film makers, writers and illusionists, have accumulated experience of how to communicate during hundreds, even thousands of years. The art of communication has evolved ever since man started to tell each other hunting stories during the stone age.
By contrast, computer science does not have this long communica-tion tradition. It is just recently that human-computer com-munication has received wide-spread attention. Unfortunately, there has been little research on how to apply experience gained in various areas of non-computer based communication to human-computer interaction. However, it has been pointed out that such an approach could improve human-computer communication significantly (Heckel 1984; Kindborg & Kollerbaur 1987a).
In this study I have chosen to focus on a presentation technique called lexi-visual presentation (Lidman & Lund 1972). While many other communica-tion forms are of interest, like film and drama, lexivisual presenta-tion has several properties which are of special interest to orientation in hyper-media. As we will see soon, there are many similarities between lexivisual pre-sentation and hypermedia. Many lexivisual design principles can be directly applied to design of hyper-media systems.
Lexivisual presentation
Lexivisual presentation is a set of principles and techniques for communicating information with text and pictures. As with all com-munication, focus on what to present and to whom is essential. Here we will, however, emphasize those aspects which are concerned with how information is presented.
Lexivisual presentation is based on the idea that associated information should be visually and spatially related, so that the reader does not have to switch back and forth between different pieces of information. This reduces the risk of loosing track of what one is reading.
These are the basic principles/rules of lexivisual presentation:
Examples of lexivisual presentation can be found in magazines, newspapers, instruction manuals, and modern encyclopedias. Comics with their characteristic integration of voice balloons and pictures are excellent examples of lexivisual presentation.
Orientation techniques used in lexivisual presentation
In lexivisual presentation several graphical techniques are employed for communicating information in a way that gives an overview and relates detailed information to its context. Commonly employed techniques include: miniaturized maps, blow-ups, cut-away drawings, zoom arrows and voice balloons. Figure 4.1 gives an example in which some of these techniques are used.
Figure 4.1: Presenting information in news graphics. This is an example of news graphics describing the Zeebrügge ferry accident. The maps show where the accident occured. Detailed information is presented in text balloons related to the picture using pointers. Since related information is integrated on the same presentation space the reader does not risk to get lost. Note the similarity between this kind of presentation and hypermedia structures.
The visual language of comics
One of the best examples on the use of lexivisual presentation is to be found in comics. In comics, text and pictures are related using voice balloons.
Figure 4.2 illustrates some of the orientational features of the visual language used in comics. Note that disorientation problems in hypermedia caused by presenting nodes out of context are closely related to the problems of the distorted comic strip presented in figures 4.3 and 4.4, where the reader is disoriented because textual information is presented out of its context.
Figure 4.2: Orientation in comics. Comics present information in a sequence of frames, making it easy to follow the story. Orientation is easy since it is always possible to go back to earlier frames. Moreover, information is pres-ented in its context using voice balloons and graphical symbols, like the small stars which indicates pain. The balloons make it easy to see which character is speaking. Since the reader does not have to switch back and forth between different pages, there is little risk of getting disoriented. Strip from Walt Disney's Comics and Stories, No. 523, 1987.
Figure 4.3: The absurd comic strip. In this distorted comic strip the texts have been replaced by numerical references. The texts themselves are shown in figure 4.4, totally out of context, which makes it considerably more difficult to read the comic. While this is obviously absurd, it is similar to presenting nodes out of context in hypermedia.
Figure 4.4: The texts from figure 4.3. Remark: this thesis is not written using lexivisual techniques. The figures and the texts describing their contents are not integrated very tightly. Instead figures are referred to in an indirect, non-visual manner using numbers. I have chosen this style due to conventions for report writing and the amount of work and skill required for creating lexivisual presentations.
Voice balloons and graphical markers orient the reader
Comics employ a variety of techniques for communicating different kinds of information to the reader. One of the most important techniques is voice balloons which was illustrated in figure 4.2. Balloons add dynamics and motion to the comic and guide the reader through the presentation. Balloons can also be aug-mented with various graphical attributes. Some examples are given in figure 4.5.
Figure 4.5: Various voice balloons. Graphical conventions like these onomatopoeic markers could be used for standardizing different kinds of information, and thus help orientation by providing different graphical looks for different types of information. For instance, landmarks and other orientational information could be given a special look to distinguish it from other information and making it easier to find and identify.
In addition to different types of voice balloons, graphical symbols, called markers, are used to communicate motion and dynamics, power, and feelings, like anger, happiness and pain. These markers make it easier to recognize different types of information. Examples of the some characteristic graphical symbols and their use are show in figure 4.6.
Figure 4.6: An example of graphical markers used in comics. This example illustrates the use of speed lines, power rays which indicate force, and onomatopoeic symbols for sounds, like "BTAMMM!" and "FPOK!". Like voice balloons, graphical markers could be employed for communicating different types of information. For example, clickable areas, present location, points of reference in a map, et cetera. Strip from Marvel Tales(TM) Starring Spider Man(R), Vol. 1, No. 186, 1986.
Interestingly, the visual language of comics is highly standardized. This is rather unique since pictures in many cases give rise to a broad variety of interpretations (Petterson 1989). Since comics readers are an increasingly large part of the modern society, it might be a good idea to use the pictorial language of comics as a basis for standardizing graphical user interfaces! (Kindborg & Kollerbaur 1987a).
Layout and cut techniques in comics
Besides the use of graphical markers like those illustrated above, comics make use of several other techniques which are interesting with respect to orientation. One distinct feature of comics is the way frames are laid out on a page. Since a full spread page is used the overview is extremely good. Authors of comics also spend considerable effort on grouping related elements of the story on each double spread page. Similar techniques could be used in hypermedia systems which use large display screens.
In addition to providing a very good overview of the action, comics employ several techniques also used in film and animation. One example is how different cut techniques are used. For example, it is common to set up the context of a scene in one frame, and present a series of close-ups in the successive frames. Figure 4.7 gives an example of this technique.
Figure 4.7: Overview and close-up. The first frame establishes an overall view of the scene. Successive frames display close-ups. Without the first frame it would be difficult to understand that the conversation is going on in Professor Artifacts office, and that Goofy is present in the room. Techniques like this one, which are seldom used in hypermedia systems, could be employed to establish a context for detailed information, thus making orientation easier. Strip from Walt Disney's Comics and Stories, No. 523, 1987.
In chapter 7, we further discuss how visual techniques illustrated in this chapter can be applied to hypermedia.