4.3.1 Familiarity

People learning and using computers already possess a good deal of relevant knowledge. For example, we all know one or more natural languages. This means that labeling a user interface button as Find or Search can take advantage of the meanings people already know for these words. The terms do not convey precisely what the button will do, but they do suggest the function in a generic way that people can recognize and remember, and that is good enough for most circumstances.

In contrast, consider a command button labeled grep (this is a search command in the UNIX operating system). This particular command returns all lines of a set of files that match a specified regular expression; grep is an acronym for “global regular expression print.” But knowing the rationale for the name does not help much; people tend to learn names like grep by brute-force association (Norman 1981b).

One might conclude from this that designers should use familiar terms and symbols as much as possible, but making design decisions about familiarity is not always simple. Familiar terms often have multiple meanings. For example, “view” and “update” can be either nouns or verbs. Even if a system vocabulary uses “view” only as a noun, there are many possible interpretations—a data presentation, a partial view of a virtual space, one of several problem analyses, and so on. “Enter” is a common user interface term, but depending on the context it may mean either “submit these data” or “come into this space.” (Try interpreting this message: “Select and enter data file.” See “GUI Bloopers” sidebar.)

Another problem in choosing familiar terms is a variant of the concern discussed earlier in designing for satisfaction—what is familiar to one user may not be familiar to another. Not all users are native speakers of English. A user interface developed in one country or culture cannot simply be translated to achieve the same level of familiarity in another. One outcome of requirements analysis should be an understanding of the user populations who will use the system, so that the information designers can focus on the languages and symbols most likely to be familiar.

A common belief among designers is that graphical elements will produce a more universal interpretation because we all live in the same physical (visual) world. This is true to some extent. Red traffic lights mean stop all over the world. A schematic human figure without a skirt means a man, and with a skirt means a woman. In user interface displays, a question mark means a help command; an icon of a folder means a container for data files. Many of these elements are low level and have become so familiar that it is easy to forget that they are part of a nearly universal user interface language.

However, symbols and icons do not always address the concern of “familiar to whom?” A traditional rural American mailbox (a cylinder with a hinged door, mounted on a pole) is often used to represent email services. But few Americans have ever used such a mailbox, and many have never even seen one. Their familiarity with this design comes from books or pictures. In other countries mailboxes have an entirely different look; mailboxes—and mailbox icons—are often square rather than cylindrical. In fact, the mailbox icon common in Italy is similar to the trashcan icon in American user interfaces. An American mailbox icon would be unfamiliar for Italian users; an Italian mailbox icon could actually mislead American users.

4.3.2 Realism and Refinement

Abstract imagery is often effective in visual design. Road signs are a good example. The figure in a “pedestrian crossing” sign does not mean that a human oriented and sized in exactly this way is just ahead (Figure 4.4). Drivers know that the sign is simply indicating there is a right-of-way for pedestrians coming up. People perceive and classify the simple shapes in road signs very rapidly, even when the shapes are only briefly glimpsed. These images are good examples of visual refinement, because they include only the most critical visual features (Mullet & Sano 1995).

Figure 4.4 Road signs are highly refined visual images, because they include only the most critical visual features.

At the same time, psychologists have demonstrated remarkable capabilities for people to recognize images that are realistic. In a classic experiment, people were shown thousands of photographs just once; several weeks later they were asked to recognize these photographs from a mix of thousands of similar images they had never seen. Recognition accuracy was above 95% (Shepard 1967). How can user interface designers decide when to use realistic images and when to develop more refined shapes?

It is important to consider not just the accuracy with which a user can recognize an item, but also the process of recognition. A photograph or realistic drawing is usually more complex than an abstract symbol (Tradeoff 4.4). This means that even though people may recognize what a realistic item portrays, the perception and interpretation process may take longer. Learning to recognize the meaning of a simpler and more abstract image will lead to better performance in the long term. Realistic images also tend to suggest instances of a concept (e.g., the printer down the hall) rather than the abstract concept often intended (e.g., printing).

Mullet and Sano (1995) emphasize that the best level of abstraction for an image depends on the user’s task and on the display technology available. However, they suggest that in most cases, developing relatively refined images will improve a visual design. They advise removing all but the most distinctive and characteristic features. For instance, an effective icon for a calculator might include only the squares for the number keys, with larger rectangles at the lower right and top to show the calculate key and the display. Numbers and labels on the keys could be eliminated, producing a simpler and more immediate interpretation of the image as a calculator.

The interpretation of abstract images is enhanced when an entire set or family of icons is refined together. A good example is the four text alignment controls on the Formatting Toolbar of Microsoft Word (Figure 4.5). These buttons show an abstract representation of the task goal—lines aligned left, centered, aligned right, or justified—but as a group are a very effective indicator of text alignment functionality.

Figure 4.5 The text alignment controls from the Microsoft Word Formatting toolbar.

4.3.3 Recognizing Affordances

One result of interpreting a user interface element is knowing what you can do with it. This is sometimes called recognizing the element’s affordances. An affordance is an aspect of an object that makes it obvious how the object is to be used. In user interface displays, the features that create affordances are usually visual, but user interface designers have explored auditory and tactile features as well (Gaver 1986, 1989; Gaver, Smith, & O’Shea 1991).

Recognizing an affordance is an immediate consequence of perception. A button affords pushing; a check box affords checking; an input field affords entering text. The affordances of current display elements serve as input to the planning process in which users decide what to do next (Chapter 5). For example, the “type here” affordance of a blinking cursor may be used as input to a plan for how to insert a word in a text field.

A common-sense way to think about affordances is that they are features of a display element that suggest things to do. The title bar at the top of a window looks like a bar that you can grab and drag around, a notebook tab looks like a section separator that can be pressed, and the lever on a gauge invites you to drag it to a new position.

In interactive systems, affordances are sometimes tightly coupled with actions. For example, the hyperlinks in a Web page are typically underlined and colored blue, but as the pointer passes over a link, the pointer may also change shape (e.g., into a hand). The new pointer image emphasizes that this text affords highlighting. In this case, the user interface offers both persistent display information (the blue underline) and dynamic, use-sensitive information to communicate the affordance of a link. Similarly, the “handles” provided for moving or sizing windows may appear only when the pointer is in position.

Affordances must be visible to aid interpretation (Tradeoff 4.5). This means more competition for screen space and more complexity. Scroll bars, guides and rulers, handles, or other format controls are visible and ready for interpretation during editing tasks. Fortunately, people are practiced at focusing or narrowing their attention; a person focused on a task is usually able to ignore irrelevant affordances. But a visual element that is part of the area in focus may be distracting, particularly if it is visually distinctive.

One solution is to make the affordances dynamic. For example, some windowing systems show scrollbars only when the pointer moves to the side of the relevant window. In graphic editors, the handles for resizing objects appear only when an object is selected. This leads to a less cluttered display, but means that users must know that the controls are available and must learn the procedures for activating them.

4.4.1 Consistency

One thing that helps people make sense of information displays is consistency. If similar elements are presented in similar ways across different displays, users are better able to integrate across screens and make the necessary connections. A visual design program is a set of visual design features that are used to create consistent displays. These features may be of many sorts—some may be decorative or artistic, such as a logo or a subtle color scheme. More obvious features are the elements defining the visual vocabulary, the shapes and sizes of controls, font types and sizes, and the character of the icons used. Information layout is also part of the design program—for instance, always positioning the ok button at the lower right of a dialog box.

Consistency in design lets people create and benefit from expectations. When things look and act as expected, it is easier to make sense of what is happening. But as is true for any general advice, focusing on consistency will not lead to the best overall design (Tradeoff 4.6). There are often other task-specific factors that outweigh the benefits of consistency (Grudin 1989). An oft-cited example is the positioning of standard command buttons (e.g., Cancel, ok) in dialog boxes. These usually appear in the bottom right corner of a dialog box. Users expect them to be there, and know what to do with them when they see them. But for some dialog boxes, there may be additional buttons in the grouping, or other aspects of the visual design may be compromised by insisting on a bottom row of buttons.

Terminology should also be used consistently. “Move backward,” “Backward,” and “Reverse” are all possible terms for a command that moves an object backward. But in the context of a second “Move forward” command, only one is consistent; only one expresses a coherent design program. A user who knows the command syntax <action> <specifier> as well as the specific command “Move forward” can infer the command “Move backward,” along with several other similar commands. The ability to make inferences of this sort shows transfer of learning: What is learned once can be transferred to a new case. Command language consistency has significant effects on the ease of learning and using sets of command (Carroll 1985).

Consistent use of language and visual characteristics within an application is called internal consistency. Designers also must worry about external consistency, which refers to the use of design programs across different systems or applications. The similar user interface styles found in Macintosh or PC-Windows applications are examples of external consistency. Like internal consistency, this commonality supports transfer of learning, in this case from one application to another.

4.4.2 Visual Metaphors

The scope of consistency can be extended one step further: An information display can be consistent with objects and actions in the real world. When a visual element looks like an object in the real world, people will often use the visual metaphor implied by the similarity as an aid in making sense of the information.

In Chapter 3 we discussed how conceptual metaphors (a store or a library) can be useful in understanding how new concepts and services work. A concrete technique for evoking metaphoric thinking is with visual or auditory displays. For example, Minard’s representation of Napoleon’s Russian campaign (Figure 4.6) evokes the metaphor of a European map. The diagram is not literally a map; an authentic map would have provided a poorer design base for his overall purposes, and no real map incorporates graphical elements such as the representation of Napoleon’s army. But the viewer’s familiarity with maps and with Eastern European geography are critical in making this an effective information design.

Visual metaphors are pervasive in user interface design. The “messy desktop” is often cited as an example; it captures the notion that tools and task objects can be scattered, grouped, and piled on a surface, and are available for interaction by pointing, grabbing, and dragging. Spreadsheet programs exploit a “ledger” metaphor. Word processing applications present documents as sheets of “electronic paper.” Electronic mail builds from metaphors of mailboxes, address lists, signatures, and other elements of postal services. Information systems often use the metaphor of “digital libraries.” Immersive virtual environments use the entire physical world as a metaphor.

The most useful design metaphors are a balance of consistency and familiarity with inconsistency and innovation. Metaphors provide overall organizing concepts, but should not be taken too literally (Tradeoff 4.7). The intent of technology is to enhance the physical world, so by definition consistency with the world must break down at some point. The messy-desktop metaphor must not be taken too literally or the design will replicate the familiar problems of real desks and offices: incoherent piles of documents, time wasted searching for tools and data, valuable documents accidentally thrown away, and so forth. Instead, most desktop systems have tools that address these problems; some simply stretch the metaphor (e.g., Arrange, Clean Up, Find), and others are plainly inconsistent (e.g., Alias, View-as-list).

Figure 4.7 shows a good metaphor that was applied without enough thought. The desktop calculator is clearly a useful appliance, and typically it is presented with a strong physical metaphor. Extending the calculator to have scientific functions is ambitious, with strong implications for complexity. The example has a one-line output display, widely spaced “buttons,” and shifted functions. These constraints are necessary for physical calculators, but can be addressed in virtual appliances in various ways: a toggle could be used to change labels and functions on keys, and the keys could be positioned more closely, reducing unnecessary pointer travel and allowing space for more keys. A multi-line (scrollable) output display could be provided. The space constraints for the online calculator are just not that compelling; the designers were captured by their visual metaphor (Mullet and Sano 1995, 33).

Figure 4.7 Overly literal user of a metaphor (from Mullet & Sano 1995).

4.4.3 Information Models

A great challenge in contemporary user interface design is the richness of the information presented to users. As computing power increases and becomes more accessible, interactive systems incorporate ever more data and functions. People navigate vast spaces of information, analyzing and interacting with it at varying levels of detail. It is common to hear of people who “got lost” in these spaces—and not only new users. An information model is a set of concepts, relationships, and representations that are developed to help users make sense of large data sets and complex functionality.

The most common information model is the hierarchy, where every node (except the root) has a unique parent node, but any parent node may have multiple child nodes. Hierarchies are simple and efficient. They map well to information that can be organized by levels of abstraction: Intermediate nodes are used to represent categories at increasing levels of detail. A hierarchy decomposes and organizes navigation through a complex space (with an average of n branches at each nonterminal node, the space is reduced by a factor of n at each step).

Not surprisingly, hierarchies are a pervasive information model. Conventional menu interfaces are hierarchies. The Dewey decimal system and other standard library classification systems are hierarchies. Many Web sites rely on large information hierarchies; it is relatively easy to convert a hierarchy into a site map that provides an overview of a complex set of pages. Clearly, though, the success of a hierarchy depends on how well it decomposes the information space it presents (Tradeoff 4.8).

A hierarchy that uses unfamiliar concepts as intermediate nodes will confuse users rather than help them in making sense of the information space. Imagine an online shopping system that uses item part numbers as a basis for a browsing hierarchy. The part numbers may mean something to the employees of the company but are likely to be seen as arbitrary, unhelpful, and confusing to users. Another common problem is when a lower-level concept is grouped under an inappropriate parent node.

A related concern is the tradeoff between breadth and depth in a hierarchy. Offering many choices at each level (high breadth) reduces the number of levels that the user must navigate and integrate. However, perceiving, interpreting, and making sense of many choices at each level (high depth) is difficult. This issue has been studied extensively for menu hierarchies. In most cases, user interface designers have found that broad and shallow menu systems lead to better performance and greater user satisfaction than ones that are narrow and deep (Shneiderman 1998, 249).

A strict use of hierarchical decomposition can lead to inflexible designs. Complex information spaces are sometimes more appropriately modeled by general networks. For example, a Web page is often referenced by more than one other Web page; users may want to access a generic service such as email from multiple points in a menu system. Relations among items may be bidirectional, as when two Web pages refer to each other. Particularly with the advent of the World Wide Web, these more general network models are becoming more common (see “Web Design” sidebar on pages 136–137).

When an information model is complex, it is often desirable to visualize the underlying data model in a single display (Andrews 1995; Hendley, et al. 1995). Information visualization is a user interface technique in which visual features are used to code different attributes of the data. For example, a set of interconnected Web pages can be visualized as a network of nodes and arcs, where the arcs are used to show connections to other units.

Many of these projects combine related sets of information in two- or three-dimensional spatial displays—for example, long-distance telephone traffic that is shown overlaying a map of the calling area. Color often plays a key role in information visualization, as shown in Figure 4.8, where color is used to show cancer statistics as a function of geographic area. As in Minard’s visualization of Napoleon’s campaign, the map provides an organizing scheme for the information model, while taking advantage of viewers’ familiarity with spatial representations of this sort.

Figure 4.8 Visualizing U.S. cancer statistics as a function of state (screen shot available from ftp://ftp.cs.umd.edu/pub/hcil/Screen-dumps/DQcancerstats/cervix.gif).

4.4.4 Dynamic Displays

A major advantage that user interface displays have over traditional displays such as maps is the possibility for dynamic redisplay or animation. Computer-based displays can be dynamically restructured, changed in size, filtered, and animated. People are good at making sense of motion and depth variations, so including dynamic features such as these can provide powerful cues to the overall structure of an information model.

A popular example of a dynamic display is the fish-eye view (Furnas 1986). This technique combines a large overview of an information model with local expansion of the portion of the model currently in focus. In order to fit more information into the overview, the more peripheral information may be “squeezed” or distorted in some way, just as one might see when looking through an optical fish-eye lens.

The fish-eye technique has been generalized and explored in a number of focus+context visualizations by Stuart Card and colleagues at Xerox PARC (Card, Robertson, & Mackinlay 1991). In the simplest examples, the overview of the information model might be in outline form, perhaps a program listing. Each module might then be selectable for in-line expansion. But the concept can also be applied to more complex situations, such as a viewer that provides a three-dimensional view of a hierarchical file structure (Robertson, Card, & Mackinlay 1991).

Figure 4.9 shows a hierarchy visualization that uses a hyperbolic transformation to condense the information in the periphery (Lamping, Rao, & Pirolli 1995). The visualization updates when users click on a node, using a smooth animation to shift the focus to the new node. Because of the degree of distortion in the periphery (e.g., see the subtrees at the lower right), this particular visualization allows a very large amount of data to be presented at once.

Figure 4.9 A hyperbolic browser (Inxight Tree Studio) used to visualize Web pages from Barnes & Noble (http://www.inxight.com).

Displaying an overview of large information structures provides an orienting context, but competes for screen space. Visualizations of large data sets may also be so complex that the underlying structure is hard to detect (Tradeoff 4.9). An alternative is to reduce the amount of information displayed at any one time, and let the user request more information as needed. In the Pad++ system, users zoom in and out of a hierarchical structure; at any given point, the context includes only what is in the neighborhood at the current level. Users “pull back” to get a broader view (Bederson & Hollan 1994).

This technique is interesting because it provides no persistent overview; the overall structure is understood by integrating across screens. The argument is that if users can move rapidly and continuously among views with more or less detail, then perhaps there is less need for a persistent high-level view. Figure 4.10 shows how the MOOsburg map uses this technique; users orient to major roads, and then zoom in to find specific streets or buildings.

Figure 4.10 Three views of the map used to access locations in MOOsburg. On the left, the map is zoomed out to the coarsest level of detail. In the middle, an intermediate view is provided, and on the right the user has zoomed in close enough to see building outlines. This tool leverages community residents’ familiarity with the streets and buildings in the town. When the mouse is moved to a street or defined site (a dot), its name will appear in a status area.

Another approach to balancing information needs with screen space is semantic filtering. In this technique, the semantic attributes of each data point determine its visual representation—whether it is visible, what its coordinates are, its shape and color, and so on. Williamson and Shneiderman (1992) demonstrate this with HomeFinder, a map-based example. HomeFinder displays a schematic map of Washington, D.C., with a dot representing every home currently for sale. Sliders for price range, number of bedrooms, cost, and distance, and check boxes for features such as garage and fireplace are set as a filter on the query. The display is updated in real time; as the user moves a slider, houses appear or disappear from the map, conveying very precisely how each parameter affects the information in the display.

Multiple coordinated views of an information structure can also help in grasping the underlying model. For example, the View Matcher—a tool for learning to program in Smalltalk (Carroll, Singer, et al. 1990)—presents five complementary views of an example application (Figure 4.11). The application view itself is linked to the Smalltalk source code, the execution stack, an object inspector, and software documentation. As a programmer interacts with the application, each of the five views is updated. In Figure 4.11, the Blackjack game provides an overview, while the other four views provide detailed information about what is happening in the overview. This general technique is common on the Web, with one frame presenting an overview or index, and details presented in other frames (see “Web Design” sidebar).

Figure 4.11 The View Matcher for learning Smalltalk coordinates five different views of an example application: the application view (upper right), the code view (lower right), the explanation view (lower left), the object inspector view (middle left), and the message stack view (upper left).

Techniques for dynamic display are emerging very rapidly, but it is important to keep in mind that the ultimate success of any information visualization will depend on its ability to support sense-making with respect to task goals. As Plaisant et al. (1996) emphasize, different techniques are appropriate for different tasks. Open-ended exploration has very different needs than data monitoring or diagnostic activities. The computing resources, screen space, and perceptual processing entailed by sophisticated graphical techniques can be quite large, and it is important to weigh these against users’ actual information needs. This general dependency on task goals is a key motivation for a design process that is founded on specific use situations.

4.5.1 Exploring the Information Design Space

Earlier we looked for new ideas about virtual science-fair activities by thinking about real-world activities, and about the general tools and services available in MOOsburg. During information design, we also carry out this sort of brainstorming, but the emphasis is on the ideas a metaphor or technology suggests about information presentation.

Our understanding of physical science fairs again provides an overarching visual metaphor. For example, we can envision that when Alicia and Delia visit the fair, they walk into a high school gym and see poster boards positioned in groups on the floor; the exhibits look like pages tacked up on bulletin boards; student authors are standing next to their exhibits; groups of visitors cluster around exhibits; and judges can be recognized by their badges. This is a powerful and useful metaphor, but we do not want to constrain ourselves to this or apply it too literally (Tradeoff 4.7).

In Table 4.2, we have reused the metaphors presented earlier to brainstorm about science fair activities, but focus on implications for information design. In most cases, the design ideas are visual in character, although some metaphors point to a role for auditory information (e.g., oral commentary as part of a documentary, or a “buzz” of conversation at a cocktail party). Although it is quite natural to consider new metaphors at this point, for the sake of simplicity we have restricted ourselves to this familiar set. As always, there are no right or wrong answers. The goal of metaphor brainstorming is to expand the understanding of design possibilities.

Table 4.2 Metaphors for a virtual science fair, with emphasis on information design.

The metaphors for central science fair objects such as the exhibit space and the exhibits serve an important orienting function in brainstorming. For example, the physical science fair metaphor emphasizes spatial relations and containment structures; the cocktail party metaphor suggests that we visualize people and their communication; and the lecture metaphor suggests the presentation of slide shows or other multimedia materials. Again, we are not looking for the “right” metaphor, but for a range of ideas.

A high-level metaphor may also evoke ideas for how to present specific task objects. For example, the physical science-fair metaphor suggests a display of tables, poster boards, and so on. Under this metaphor, an exhibit looks like a set of documents arrayed in a two-dimensional space (i.e., the poster board). In contrast, the cocktail party metaphor suggests a display that is filled with visitors; in this metaphor, the exhibits might be in the background (e.g., on the “walls”) or they might be objects that people pull out and display on demand (e.g., from their “pockets” or “briefcases”).

A natural complement to descriptions of different metaphors is a sketch. Even a quick hand-drawn sketch can be a great aid to group discussion, especially if these discussions include stakeholders from the work setting. Figure 4.13 contains rough sketches of three metaphors for the main screen of the virtual science fair.

Figure 4.13 Three views of a virtual exhibit space suggested by the metaphors of (a) a high school gymnasium; (b) a cocktail party; and (c) a classroom lecture.

In parallel with discussions of visual metaphors, we explored the information-design possibilities suggested by MOOsburg tools. (Novel technology should also be considered at this point if relevant or feasible.) Because our goal at this phase is to organize and present information, the relevant technologies are more specific than those discussed in Chapter 3 (Table 3.2). Table 4.3 lists information design ideas that came from thinking about MOOsburg tools.

Many of the ideas in the two tables can be combined. For example, a multimedia notebook might be used to edit and present a lab journal; a Web browser might be used as a presentation device for a documentary (e.g., as a sort of slide show). A room panorama could be used to present a traditional fair (the main objects are exhibits), a cocktail party (the main objects are people), or a lecture (the main objects are a presenter and his/her materials).

Metaphor and technology discussions will inevitably raise other more pragmatic concerns—hardware and software platforms, implementation or delivery costs, team expertise, and so on. Although discussion and resolution of these nonusability issues are beyond the scope of this book, tabular summaries like those shown here, complemented with sketches like those in Figure 4.13, should provide a good starting point for identifying and discussing these other categories of concerns.

4.5.2 Information Scenarios and Claims

Activity scenarios illustrate the functionality proposed for a system in the context of specific uses. During information design we insert details of what the user sees (or hears or feels, depending on the application). As we do this, we also elaborate how the actors will perceive, interpret, and make sense of the information they encounter.

A key resource at this phase of design is the claims analysis of the activity design scenarios (see Table 3.3 in Chapter 3). Many of these include pros or cons related to the perception or comprehension of science fair information. For example, one concern about providing an unlimited virtual exhibit space was that students may end up producing overly large or complex exhibits. This concern should be addressed by the information design. Another example is the embarrassment some students might feel in having their incomplete projects advertised. As always, the design heuristic is to address the negative impacts while maintaining or enhancing the positive ones.

We focused first on one scenario, the visit of Alicia and Delia. The information needed in this activity is central to the entire project—they first see the fair itself and then an individual exhibit. This scenario is also a good example of our primary goal to increase community involvement, so we wanted to be sure that the information design was particularly appropriate and engaging in this situation.

Figure 4.14 shows how the visit activity was elaborated to include details about information presentation. On the left is the activity design scenario; on the right are additions that illustrate our information design ideas. Some of the new material describes information displays, while other material describes the actors’ perceptions and reactions to these displays. In the course of the scenario, details are provided about a number of important elements in the information design—the initial view of the fair, the other visitors, the exhibits as a group, as well as the content of Sally’s exhibit.

Figure 4.14 Elaborating an activity scenario to include information design details.

Figure 4.14 (continued)

One important design decision concerned the representation of student exhibits. Like other MOOsburg activities, the virtual science fair is created as a “space” within the existing town structure. But we considered two alternative designs for the exhibits:

• represent each exhibit as a nested subspace, each with a room panorama and interactive map for navigating within the space; or
• represent the exhibits as independent objects, with their own representations and user interface.

The subspace alternative extends and reinforces the general spatial metaphor of MOOsburg; exhibitors could post materials on multiple walls and bring in many diverse supporting objects. This design emphasizes creativity and richness in exhibits. However, it complicates the information design for visitors—conceptually a visitor must “jump into” the fair space to get to each exhibit subspace. It also makes exhibit construction more complex—each subspace owner (student) would need to develop a customized map. Because our root concept emphasized broad community and student interaction, we chose to adopt the second, simpler model.

At the same time, the presentation of exhibits should be rich and flexible enough to suit the needs of many different exhibitors. We carried over the MOOsburg concept of a main view, but surrounded it with information displays that represent the many contributing elements of each exhibit. This idea was combined with the earlier concept of a template, so that new projects are given a default layout. The elements themselves were inspired partly by our analysis of physical science projects and partly by the metaphors of slide shows and lab journals. We used similar reasoning to elaborate the other activity design scenarios; the information design elaborations are summarized in Figure 4.15.

Figure 4.15 Elaborations to the science fair scenarios that describe the features and reactions to information design.

Figure 4.15 (continued)

Where did the many details of the information scenarios come from? As for activity design, the answer is difficult to provide, because so many factors contribute to the overall design. Many of the details follow from MOOsburg’s virtual-world metaphor. But we have also tried to address potential usability problems noted in earlier claims. And, of course, we were influenced by the general HCI concerns discussed in the first half of this chapter.

Table 4.4 lists the information design claims analyzed in parallel with scenario development. Like the scenarios, the claims become more extensive and detailed as visual representations are proposed and their usability implications are examined. These claims list a number of important features in the information scenarios, pointing to each feature’s likely impacts on users’ ability to perceive, interpret, and make sense of what is happening in the online science fair. At the same time, they document how that design was influenced by a combination of metaphors, technology options, and general tradeoffs in information design. For example:

• Some of the detailed exhibit content is nested in layers in hopes of simplifying initial perception (Tradeoff 4.1).
• Exhibits under construction are flagged, even though this adds visual complexity and continues our concern about student embarrassment (Tradeoff 4.2).
• The exhibits are organized into bounded views. This helps to separate the elements, but the boundary lines add clutter (Tradeoff 4.3).
• We use task-specific “science-project” terms in the template, even though they may not be familiar to all viewers (Tradeoff 4.4).
• We use both thumbnail images and more abstract icons, depending on the concept being conveyed (Tradeoff 4.5).
• The judging form hides its “editability,” because form modification is secondary to judging exhibits (Tradeoff 4.6).
• The custom interface for judges is a specialized view of a complex information model (Tradeoff 4.9).

Table 4.4 Claims analysis used to guide and document information-design reasoning.

As in all scenario-writing efforts, the development of the science fair information-design scenarios was a creative process involving analysis and synthesis of many factors. The activity design scenarios provided the initial situation and goal constraints; metaphors and technology helped to generate possibilities; the general tradeoffs in information design assisted in selecting among and synthesizing ideas and constraints.

The scenarios and claims are not a complete representation of the information design. It is impractical and probably impossible to describe every detail of a visual display, or to narrate every aspect of a person’s perception and reaction to a display. The choice of which and how much presentation detail to include is left to the design team developing the vision. For systems that envision novel or complex information designs, the number and detail of the information scenarios are likely to be greater. For a system involving more conventional WIMP (windows, icons, menus, and pointers) interface designs, it should be sufficient to work through a few scenarios such as those shown here.