Dexter represents an alternative model to HTML for creating a browseable collection of keyword-annotated documents. Dexter presents viewers with a dynamic graphical interface that supports browsing based on association.
Dexter was developed in conjunction with the story Jerome B. Wiesner: A Random Walk through the Twentieth Century. This project serves as a model use of Dexter throughout this discussion.
Web designers have developed techniques to address these problems. The easiest solution is to subdivide the problem. Just as one arranges a messy desktop by creating piles of related items, the web designer collects documents into sections or areas. Each section might be associated with a color or use other graphic elements to convey a sense of "place" to the viewer. In addition, documents can be framed by an overview indicating the current section and providing one click access to the top level of any other. Thus, the "Navigation Bar" is born -- a simple map for the weary web traveler.
As the number of documents grows, however, the same problems invariably reappear. At this point, the designer must either create more sections at the top-level or start subdividing existing sections. In either case, the resulting problem is clear. As the complexity of the organizational structure increases, so does the difficulty of both navigating and authoring it. As a result, these navigation schemes tend to work best for shallow hierarchies of a relatively small set of documents.
A fundamental problem with this model of organization is the assumption that a document exists only in a single location. By assuming each section represents a mutually exclusive group of documents, every new section and sub-section comes to further isolate documents within that structure. In this way, the addition of structure serves to limit the way documents might be connected, rather than to increase that potential.
As in a physical paper filing system, only one organizational scheme or "route-of-access" is allowed. Thus the physical constraints of the metaphorical folder belie the inherent possibilities of hypermedia; whereas the purpose of a physical folder is to encapsulate its contents to prevent intermixing, in hypermedia, the possibilities of intermixing are what it's all about.
Sano, Darrell. Designing Large-Scale Web Sites. John Wiley & Sons, New York, 1996. p. 113.
Generally, the organization of functionality should reflect the most efficient sequence of steps to accomplish the most likely or most frequent user goal.- Deborah Mayhew, Principles and Guidelines in Software User Interface Design [1]
When designing a web site, supporting a viewer's "browsing" becomes a formidable challenge. The design heuristic given above seems in direct opposition to the intention. How does one design for the "most frequent goal" when the viewer might not have one? More importantly, why should an author cater to the broadest possible needs, when ideally the design should respond to the particular viewer at hand; isn't that after all the promise of interactivity?
A web designer at Hearst New Media recently echoed this frustration to me when he recalled how a site they'd designed based on Good Housekeeping magazine was just fine for the person who really "wanted-that-recipe." Speaking each word, he struck his finger to a table to underscore the precision and determination of the imagined cyber-homemaker. Clearly people often only have a general idea of what they want. In this situation, being presented with possibilities to explore at one's leisure is preferable to having to drill down specific levels to uncover something of interest.
As a storyteller, the problem is particularly important. While the viewer might come to a story with a particular interest or disposition, they're most likely several degrees short of specifying a particular material in a collection of dozens, let alone hundreds or thousands. Requiring viewers to make specific choices before they know very much about a story places a wall between them and the story. An effective storytelling system needs to provide accessible hooks into a story for a range of potential viewers.
Other members of the original team who worked on this project are: Freedom Baird, Ledia Carroll, Peter Cho, Richard Lachman, Geoffrey Litwack, Laughton Stanley, and Phillip Tiongson.
The project was partially funded by the John D. and Catherine T. MacArthur Foundation, Carnegie Corporation, the New Land Foundation, Rockefeller Financial Services, and Schlumberger Limited, Inc.
The material of the story consists largely of original video interviews with Wiesner's colleagues, family, and friends conducted over the summer of 1995. In early fall, graduate student Freedom Baird edited this video content along with a large collection of still photographs, into over fifty individual video clips; each clip is typically 30 seconds to 2 minutes in duration. Supplementing this video content are several dozen text materials, including Wiesner's memoirs, personal correspondence, essays by contemporaries, and declassified government documents.
In the spring of 1995, I rewrote the underlying system used in Random Walk, Dexter, in the web programming language Java, incorporating a number of modifications from the original. The final version is documented here.
The Materials Listing shows an accumulated history of the viewer's experience thus far.
The figure on the following page shows an overview of each of the pieces the Dexter system uses to produce the viewer experience. Arrows on the diagram indicate dependencies in the creation process.
The Wiesner building was designed by I.M. Pei & Associates.
"High Level" views of, respectively, Science, Disarmament, and the Washington period
In Random Walk, the Concept Map appears as a white grid of tiles, a facsimile of the interior wall of the Wiesner building, home of the MIT Media Lab. [3] Down the main diagonal of the grid, from left to right, appear clusters of images from different periods of Wiesner's life: Growing Up, MIT Radiation Lab, Washington, MIT Presidency, and Later Years. Each time period occupies one of the five main rows in the grid; this timeline serves as a rough organizational scheme for the rest of the elements. Adjacent to the time periods are tiles marked with specific decades like the 1940s and 1960s. Beyond these are tiles marked with themes like education, disarmament, and personal style. Filling out the rest of the grid are tiles marked with the faces of the people interviewed.
While the position of a keyword on the Concept Map never changes, its visual appearance does change to denote one of four keyword states. By controlling the visual appearance of each keyword individually, the system communicates to viewers information about the current state or context of their exploration, and suggests options for navigation.
The four keyword states are: active, decision, suggestion, and inactive. The state of the Concept Map is determined by the set of active keywords, called the viewing context. Initially, all keywords are inactive. By clicking on a keyword, the viewer makes it active thereby changing the context.
As opposed to a web "Navigation Bar" or other button-style controls, keywords on the Concept Map have two additional states other than simply on (active) and off (inactive). These additional states, decision and suggestion, provide a look-ahead, showing the range of options available to the viewer at each point in their exploration. In this capacity, the lookahead states also provide useful information about how particular keywords are interrelated. [see adjacent figure]
Decision keywords indicate a potential to narrow the current context. Clicking on a decision tile will make that keyword active while preserving all currently active keywords. In this way, Decision keywords allow the viewer to narrow their context by adding another keyword.
Suggestion keywords indicate a partial overlap between the current context and the keyword. Clicking on a suggestion tile will make that keyword active while preserving some but not all of the currently active keywords. In this way, suggestion keywords allow the viewer to shift their context to include a keyword of interest while still maintaining some degree of continuity.
Inactive keywords indicate that no overlap exists between the current state and that keyword. Clicking on an inactive keyword will cause it to become active while making any previously active keywords inactive. Inactive keywords provide the viewer with a means of changing their context completely to begin exploring a new area of interest.
A second and powerful means of navigation using the Concept Map is the link-by-concept mechanism. By clicking on an already active keyword, the viewer requests another document about that keyword with as much in common with the current context as possible (i.e. described by as many of the currently active keywords as possible).
Using this mechanism, the viewer gets to decide how to "move the story forward." Instead of a choosing a particular hard coded link, the viewer chooses to link-by-concept. For instance in Random Walk, a viewer might repeatedly click on the keyword science to initially explore that theme. As each new document related to science is presented, the system tries to maintain the viewer's context as much as possible. At any time the viewer can start clicking on a different keyword to "switch to a different handle." For instance, exploring materials related to science, the viewer might come upon a document about the Radiation Lab in the 1950s. At this point, the viewer could choose start clicking on the Radiation Lab to develop a picture of that time period and place that is not necessarily related to science.
In this way, viewers are given the means to structure their experience around particular keywords while never being bound to a particular organizational scheme. In Random Walk, the viewer is free to experience the story as sequences of materials organized by time, theme, or person.
As a means of navigation, the Materials Listing provides direct one-click access to every document in the system. By clicking on a document's caption, the document is immediately presented to the viewer. When a document is selected in this way, all of the document's keywords are made active in the Concept Map. Thus, the Concept Map also responds to changes in the Materials Listing. By emphasizing document captions based on relevance, the Materials Listing serves as a guide, suggesting documents similar to the viewer's current context.
When a document is activated, either by the viewer's actions in the Concept Map or the Materials Listing, its caption moves to the top of the Listing and is marked with a gray vertical bar. When the next document is viewed, its caption floats to the top and pushes the previous caption one step below it. In this way, the top of the Materials Listing provides a "reverse-history" of the viewer's experience, with recently viewed documents easily accessible on top.
In addition, by marking documents that have been seen and collecting them together, the listing itself becomes a kind of progress bar, showing at a glance what portion of the database has been viewed.
When a particular keyword is activated in the Concept Map, the viewer sees the density of that keyword's use in the Materials Listing as the captions of documents described by that keyword become emphasized. When they select a decision keyword, the viewer sees the context-narrowing effect in the Materials Listings as related elements grow in emphasis while others recede into the background.
By using the Concept Map, viewers take a "top-down" conceptual approach to specifying their interests. Once in a particular context, viewers can use the Materials Listing to select relevant documents directly, choosing captions that catch their interest.
The Materials Listing serves to situate viewers in the context of the larger database. All changes to the listing appear as smooth animations from one state to the next, thus providing a seamless picture of the entire collection of documents. In this way, viewers are always reminded of their place within the "bigger picture."
The Concept Map serves as a memory device, providing a visual means for remembering the "location" of each document as a pattern of Active keywords. In addition, the Concept Map serves as a visual reminder for the way individual pieces relate to others through keywords.
The following is a brief discussion of motivations behind design decisions made for the Random Walk interface. It also presents a set of general guidelines for designing a graphical interface for use with Dexter.
The visual design of each keyword state needs to make it clearly distinct from each of the other states. Beyond this, certain general guidelines may be made based on each state's purpose and relation to the other states.
Inactive tiles represent those elements not present in the context of the current story -- these elements are conceptually "out of focus." In Random Walk, the inactive tiles are white with faint gray images and text.
Suggestion tiles are functionally closest to inactive ones. As suggestion tiles play a relatively minor part in viewer navigation, they generally don't need to command much attention. In Random Walk, suggestion tiles are light gray -- just slightly darker than the inactive state. Visually coupling the inactive and suggestion states also works well since tiles appear most frequently in one of these two states. Thus their visual appearance defines the apparent background of the Concept Map.
A decision keyword indicates the strong potential for that keyword to be made active. The appearance of the decision state might indicate this by a visual similarity to the active state. At the same time, the meaning of the two states is quite distinct; their appearance must therefore be clearly distinguishable.
In Random Walk, the active and decision states are both relatively dark in contrast to the lighter inactive and suggestion states. To keep them distinct, however, active tiles are black, the literal inverse of the inactive state, while decision tiles are a deep red. The color red was chosen to suggest the potential for the viewer to act on them; the intention is that by drawing visual attention, we indicate this potential.
In addition to the subtle and relatively minor shifts in coloration and brightness employed in the Random Walk design, one could imagine other kinds of changes between states. For instance, the absence or presence of an image in different states could be used to indicate active versus inactive. Shifts in scale or position of image and typographic elements could give an impression of a transformation as keywords change from one state to another.