OVE.OVER.1
Explorations in Hypermedia Design: Learning to Construct Shared Information Spaces
meg harmsen / harmsen@eden.rutgers.edu notes from meg
Note: You will get more out of this presentation if you choose the Auto-Load Images option from the Options menu!
The successful use of hypermedia for communication will depend, in part, on how well-crafted the information presentations are and how easy it is to access and navigate the information structures. Well-constructed hypermedia will facilitate mutual understanding and reinforce learning among its authors, users, and reusers. Poorly designed hypermedia will exacerbate information overload.
Humans process a tremendous amount of information visually, a lot of which is undifferentiated and unstructured. The visual perception process filters out a great deal of information without us being conscious of it. We are only conscious of some 5% of what we visually perceive (W. Cowan, personal communication, October 7, 1993). Therefore, it seems reasonable to expect that one way of reducing cognitive demand for information processing tasks is through visual filtering. Hypermedia presentations that have good visual filters should communicate information better.
Because the primary interface to electronic information today is a computer screen, one way to enhance access to and comprehension of information is through effective online visual design. Visual design coupled with a predictable, understandable information structure can greatly enhance the communication process by reducing cognitive demand. (To go to the Visual Design Concepts section, click here.)
The design of this project included a graphical browser that a user could access from any frame. A graphical browser should be a map of the information in the hypermedia system that can be used to find and go to other frames. Links to other frames is accomplished by clicking on links embedded in the graphical map. The graphical map of this project is contained herein, but the "hypergraphic" embedded links cannot be implemented at this time due to technical limitations on the home MacHTTP server.
The concept of information chunking is about breaking down information into small, manageable topics or units. Each unit of information directly corresponds to one idea. An information chunk is an "idea" chunk.
Using information chunking for online design builds on what we know about short- and long-term memory. Research indicates that humans can store only 5 - 9 chunks of information at a time in short-term memory and that the storage is very transitory. This is often referred to as the "seven plus or minus two" principle.
While a user is scanning, searching, or navigating through online information, the user is often only processing bits and pieces of information into short-term memory. Therefore, you can help users by presenting information as discrete idea chunks, labeling the chunks or otherwise identifying them as separate units, and grouping no more than nine chunks in a single category.
The following illustration shows an abstract representation of dividing information into chunks.
Figure VDC.INCH.1.1 Example of information chunked
The following illustration shows an abstract representation of information that is not chunked.
Figure VDC.INCH.1.2 Example of information that is not chunked
For a user/reader to remember information, i.e., store it in long-term memory, the information must meet the following criteria:
Therefore, if you want to construct an information space that encourages learning and the development of shared meaning, then you should design online information that helps users process it from short-term memory into long-term memory. Using information chunking is important for assisting short-term memory processing.
Repetition of visual patterns and using consistent frame layouts will facilitate long-term memory -- especially important for learning the navigating the online information structure. (See also Pattern Goodness and Frame Layout Consistency .)
For more information about the principles behind information chunking and the relationship to short- and long-term memory, see Horn (1989) and Ahituv and Neumann (1986).
The layout of visual elements in a grid is a way to organize information in a systematic manner. With the space of the surface divided into clear and consistent fields, the focus can turn to content. On the other hand, when the organization of the space is chaotic with images of different sizes placed with little attention to space or other visual elements, the user must work harder to understand the information structure and content.
Dividing two-dimensional space into a grid with fields to serve as "containers" of information can help a hypermedia designer plan the frame-by-frame layout of an online presentation. It is very useful during production of media components to know ahead of time, for example, that you want all online images to fit into a 4" X 3" frame or all movies to play in a 2" X 2" viewing area.
The following illustration shows a plan of a grid layout.
Figure VDC.GRLA.1.1 Example of a grid layout
The following illustration shows a design for text and illustrations using a
grid layout.
Figure VDC.GRLA.1.2 Example of a grid design for text and illustrations
Textual areas that have the same dimensions as graphic or image areas build symmetry and balance in the layout. If the areas, or grid fields, are in proportion, it works similarly. Regardless, there is always the underlying systematic, orderly grid. Using the grid can help you consistently separate out structural elements, such as headings, and position navigational buttons in predictable places.
For more information about grid systems, see Muller-Brockmann (1981). In this project, see also Typography and Space, Frame Layout Consistency, and Pattern Goodness for related information.
(Note: An author of a Mosaic document has little control over the grid layout of information. There is some minimal control over image positions, but certain text layout is difficult. The primary control of text is in the vertical, scrolling dimension.)
You can use typography and space to cue users about an online information structure as well as the kinds of information presented. Good use of typography can visually show information structure and any hierarchy in that structure. For example, large type might indicate a major heading, medium size type might indicate a subheading, and small size type might indicate regular text.
Likewise, you can lay out similar kinds of information with a consistent typographical and spatial presentation so that the information can be identified again and again. For example, you might always present instructions on how to do something, i.e., procedures, as a list of numbered steps. Numbered steps become a visual cue that the information displayed is an instruction. See Textual Information Types for some examples.
Spatial variation helps to group and separate information. Users tend to group information that is placed close together as related and information separated by space and distance as unrelated. The use of space between headings can also provide a scanning area to help users quickly see and identify information structure.
There is no definitive research about what type styles to use online -- whether a serif or sans serif font is more readable for regular text, or how big or bold a heading should be. Serif fonts are often used for print publications because the serif fonts are usually easier to read. A rule of thumb approach for online would be to make regular text at least 8 points or more and to use a sans serif font when the point size is less than 12 points. Because of the low resolution of computer video screens, the round shapes and tails of serif fonts are distorted until the point size starts reaching 12 or more.
There is also the question about whether the video screen requires guidelines different from those of paper. Light is projected from a video screen but is reflected from a paper surface. Some think that online computer displays should be more like television displays, which commonly show dark backgrounds with light type. The current reality is that many computer applications and interfaces mirror the paper-based tradition of dark type on a light background.
For more discussion on typography and space, see Keyes (1993), Hartley (1978), Horton (1991), and White (1988).
The following illustration shows typography used to delineate information structure and space used to group and separate information.
Figure VDC.TYSP.1.1 Example of typography and spatial layout
The following illustration points out how typographical size variations can indicate a hierarchical information structure and how vertical and horizontal spacing group and separate information.
Figure VDC.TYSP.1.2 Spatial and typographical elements identified
The online design of textual information is extremely important. The actual layout of textual information can help users with reading and comprehension tasks, scanning and browsing, and navigational processes.
Prose often is displayed as undifferentiated text. By analyzing the type of information presented, an author can often break down prose into constituent parts that may be presented in a more diagrammatic or graphical manner. It may be as simple as providing a title or "label" for the idea presented in a paragraph. Certain kinds of information lend themselves to representation in lists or charts, which visually group the textual information into a picture.
The point is that for most adults it is easier to learn and to find information presented graphically. Therefore, it is important to envision ways to present textual information online in a graphical manner. (Note: The hypertext markup language, HTML, in which this Mosaic document is authored, provides tags for unordered lists and descriptive lists. Tags for charts and tables that require vertical and horizontal dimensions are not available.)
The following illustration shows a representation of undifferentiated prose, which is a less usable textual presentation online.
Figure VDC.TEIT.1.1 Textual information in prose style
The following illustration shows a representation of the same prose information in an unordered list and chart.
Figure VDC.TEIT.1.2 Textual information using a graphical layout
Most guidelines on the use of color suggest that it be used sparingly. Using more than two or three different colors can be distracting to a user's information processing activity. Also, having a large area or large shape in a color pulls the eye's attention. The properties of color -- hue (the basic colors), saturation (brightness), and value (the amount of white or black) -- as well as the amount and shape of the color displayed can all play a role in the perception and cognition of information. [For more information, see especially Keyes (1993) and Horton (1990 and 1991).]
Part of the reason that color is so powerful is that it produces a layering effect that cues a user as to the kinds of information presented. The eye tends to group information presented in the same color and to separate information in dissimilar colors. The eye also tends to group together hues of similar saturation values. For example, bright green and blue dots will be grouped together in contrast to a pale green, yellow, and purple background.
The layering principle is effectively used in most maps, where, for example, all waterways are presented in blue or state highways in red. In this presentation, blue borders are used to signal the beginning of a topic. Blue is also used in headings to cue users into the information structure. (Note: Mosaic users have control over the font color of headings, so the current view of this information may vary.)
The following illustration shows color used to signal information structure in a textual layout.
Figure VDC.COLO.1.1 Color used to signal information structure
The following illustration shows the layering effect of color in a map, where blue represents various waterways.
Figure VDC.COLO.1.2 Color used to identify information types build in layers
Online design that leverages the power of visual perception can accelerate visual understanding. By understanding how the eye scans a frame of online information, you can make better decisions about the placement of key information, changeable information, and even less important, tangential information.
The way human beings visually perceive information is a physical and psychological experience of light passing through the eyes. We experience light as tones and experience form as shapes that are in or out of balance. Because there is such a tremendous amount of information that we visually filter during perception - - which is before any recognition or understanding of the incoming information -- it is extremely helpful to understand what the eye does during this process.
Donis Dondis describes a primary scanning pattern where the eye responds to vertical and horizontal pulls. First, there is a top-bottom and then a left-right pull. There is also a secondary scanning pattern that responds to a pull to the lower left. Because of this perceptual pull to the lower left, it is probably a good location for placing important or changeable information.
The following illustration shows the primary vertical (top- bottom) and horizontal (left-right) scanning pattern.
Figure VDC.SCFR.1.1 Primary scanning pattern
The following illustration shows the secondary scanning pattern where the eye pulls to the lower left.
Figure VDC.SCFR.1.2 Secondary scanning pattern
Click below to see an animation of how the human eye performs the primary and secondary scans.
Pattern goodness is a way to express humans' preference for redundancy and predictability in a small subset of patterns. Wendell Garner's research indicates that humans are able to discriminate, recognize, and reproduce information better when there is pattern goodness.
What this means for online design is that you should use predictable visual patterns to give users cues for how to navigate and locate information. When the visual layout of online frames is consistent, whether due to a repetitive layout or the techniques of reversal or rotation from frame to frame, users' can gain confidence in knowing how to maneuver through the information. The cognitive demand required to understand navigational tasks and information structure can shift towards other information processing tasks, such as interpreting the meaning of the information presented.
The following illustration shows two examples of pattern goodness. The first example is a set of patterns that are the reverse of each other. The second example is a set of patterns that are in a rotational pattern.
Figure VDC.PAGO.1.1. Examples of pattern goodness
The following illustration shows examples of patterns that do not exhibit pattern goodness. The patterns look random and do not seem to belong together. The set of patterns that these would fit into would be very large.
Figure VDC.PAGO.1.2. Examples of patterns that do not show pattern goodness
A consistent frame layout builds navigational predictability for users. Users quickly learn where "home" or "escape" buttons are and can identify their location by frame titles or other structural identifiers. Frame layout consistency for navigational purposes helps new users wend their way through a hypermedia project and assists return users in finding previously visited locations.
Consistency can also help online designers prevent information chaos, ambiguity, and instability. Having a consistent frame layout helps users to see what is new, different, or changed from other frames. They do not have to scan through everything to determine whether it is important at that moment.
Providing a consistent frame layout also gives new authors, or those who want to append information to a hypermedia project, a template for the addition. The template can build on user/author conventions, thereby, integrating the addition to the existing information access structures and navigational components. See Akscyn et al. (1988) for a discussion of frame layout conventions.
When frame layouts change, or elements are missing or reconfigured, the user perceives the information as complex and cognitively taxing. This approach works against users and contributes to information overload. See Keyes and Krull (1992) and Horton (1991) for more information.
The following illustration shows a model of a frame layout plan. Key navigational components are the frame title, frame ID, and navigational buttons.
Figure VDC.FRLC.1.1 Example of a frame layout plan
The following illustration shows a representation of a frame layout plan used over multiple frames.
Figure VDC.FRLC.1.2 Example of a consistent frame layout over multiple frames
(Note: A Mosaic document works as a scrollable, linked document rather than as a series of discrete frames. Because of the hypertext markup language used, an author does not have complete control over the placement of hypermedia components. However, you can build frame-like structures to group and separate information using a variety of techniques, such as graphical borders, locator IDs, and consistent placement of common links.)
Start with the "native" medium for the information and then explore how the information might be represented in other media.
Text
Graphic
Image - N.A.
Sound (196K)
Animation (204K)
Movie (748K)
To go to graphic and sound together - click here
The traditional way to learn how to tie a bowline is to remember the "rabbit." The rabbit comes out of the hole (put free end through loop), runs under the log (under the standing part of the line), and then back down the hole (put free end through loop again). The point is to get the line out and back through the loop the same way.
Another textual way to show this is in steps.
Sound (452K)
Animation - N.A.
Movie - N.A.
To go to graphic and sound together - click here
This is a class diagram, which is used in object-oriented analysis to show classes and their relationships. The class is in the shape of a "cloud," which some people call a "blob." This diagram shows inheritance relationships. The arrows pointing to the class watercraft mean that each subclass pointing to it has all the attributes and functions of the class. You would read this as a motorboat is a watercraft, a rowboat is a watercraft, and a wind-powered boat is a watercraft. Furthermore, a sloop is a wind-powered boat.
Sound (196K)
Animation - N.A.
Movie (1,204K)
Asan is a trade and religious center located at an intersection of streets in Kathmandu, Nepal. Asan is where you go to get fruits, vegetables, rice, and spices. You find other goods, such as rugs or beads or meat, in other street markets of Kathmandu.
Asan is teeming with people, bicycles, horns, bells, birds, baskets, Hindu shrines, electric lines, and Buddhist prayer flags. It is a rich, colorful, and fascinating place.
Asan is south of the tourist hotels and the Royal Palace and on a northeast diagonal from Darbar Square. Back
Sound (260K)
Animation - N.A.
Movie
(284K)
To hear the music and see the score together, click
here.
Sound (376K)
Animation (464K)
Movie (332K)
To see the waltz dance with the text instructions, click here .
The waltz is danced to three beats. The key characteristic of the waltz is a scooping movement into the forward and backward steps. The sequence is as follows:
Down on one. Up on two. Together three.
Sound - N.A.
Animation - N.A.
Movie (864K)
To see the Phakding movie in the context of the movie script,
click here.
ACT 1 - Trekking to Mt. Everest, Day 1
Scene 3 - Sherpas Crossing the Phakding Bridge
Setting - At the end of the first day, all trekkers must cross the Dudh Kosi river to reach a small hamlet called Phakding, where they spend the night. All traffic to Phakding crosses a foot bridge suspended over the Dudh Kosi. Because the bridge is narrow and bouncy, traffic crosses from one direction at a time.
ACT 1 - Trekking to Mt. Everest, Day 1
Scene 3 - Sherpas Crossing the Phakding Bridge
Setting - At the end of the first day, all trekkers must cross the Dudh Kosi river to reach a small hamlet called Phakding, where they spend the night. All traffic to Phakding crosses a foot bridge suspended over the Dudh Kosi. Because the bridge is narrow and bouncy, traffic crosses from one direction at a time.
Movie (864K)
Experimental research into reading indicates that human beings keep chunks of information in short-term memory, but tend to build a hierarchical semantic structure of the information as a way to understand it (McKnight, 1991). Even with hypertext and hypermedia information it is found that hierarchical structures permit more efficient navigation and information retrieval than other information access structures, e.g., index, typographical cues. [See McKnight (1991) for a discussion of the research.]
It may be prudent, therefore, for any hypermedia project to provide a description of the superordinate and subordinate relations of information where appropriate. In this project, for example, topics are grouped under three basic nodes -- visual design concepts, multiple media representations, and information access structures. Even though there is overlap and links among the nodes and topics, there is a basic subordinate relationship of the topics to the nodes.
The following is a representation of the nodes and topics of this project expressed in a hierarchy.
Explorations in Hypermedia Design
You can select another node of information by clicking on the appropriate link below the map.
Meg Harmsen
Stuff to share...
I grew up on the Eastern Shore of Maryland USA and now live in New Jersey (now go find the Chesapeake Bay in this project!). I really like hypermedia. I really do! Even late at night when my deadline is closing in...
In this project, I have tried to share some of my thoughts about the importance of good online visual design and the potential impact of hypermedia for computer-mediated communication. Along the way I have had the opportunity to piece together information artifacts from my life -- sailing, music, trekking in Nepal, and, yes, object-oriented design. I hope you enjoy them as much as I enjoyed producing them for this project.
My day job is at ADP, Inc. where I'm an Information Analyst for online pc-based software documentation. I have been working in the technical communication field for about 14 years. This project fulfills my academic requirements for an MCIS degree, so it may be tough to contact me at Rutgers. However, if you have questions or comments about this project, please contact me through the Rutgers University - SCILS/MCIS program or SCILS Multimedia Lab.
Special thanks to Dr. Kathy Burnett for encouraging me to do this project; to Jan Lilly for fun, support, and perseverance with clarinet music; and to Michael Wong for building my techie self-esteem.
A very special thanks to Judy Glassgold for always being there with love and encouragement and great dinners!
Ahituv, N. and Neumann, S. (1986). Principles of information systems management. Dubuque, Iowa: Wm. C. Brown.
Akscyn, R. M., McCracken, D. L. & Yoder, E. (1988). KMS: a distributed hypermedia system for managing knowledge in organizations. Communications of the ACM, 31, 820-835.
Colgate, S. (1973). Colgate's basic sailing theory. New York: Van Nostrand.
Dondis, D. A. (1973). A primer of visual literacy. Cambridge: MIT.
Garner, W. (1974). The processing of information and structure. New York: Wiley.
Hartley, J. (1978). Designing instructional text. London: Kogan Page.
Horn, R. E. (1989). Mapping hypertext. Lexington, MA: The Lexington Institute.
Horton, W. K. (1990). Designing & writing online documentation - help files to hypertext. New York: Wiley.
Horton, W. K. (1991). Illustrating computer documentation - the art of presenting information graphically on paper and online. New York: Wiley.
Keyes, E. & Krull R. (1992). User information processing strategies and online visual structure. SIGDOC'92 Proceedings. Tenth Annual International Conference. Toronto 121-128.
Keyes, E. (1993). Typography, color, and information structure. Technical Communication, 40, (4), 638-653.
McKnight, C., Dillon, A., & Richardson, J. (1991). Hypertext in context. New York: Cambridge University Press.
Muller-Brockmann, J. (1981). Grid systems. Niederteufen, Switzerland: Arthur Niggli Ltd.
White, J. (1988). Graphic design for the electronic age. New York: Watson-Guptill Publications.
For more information on how to create a Mosaic document using the hypertext markup language, HTML, see the NCSA's HTML Primer.
All material in this project is an original production of Meg Harmsen (1994) unless otherwise cited below. Any omissions or errors are unintended.
