Fluid Documents
Typographic conventions such as footnotes and marginalia have long been used to place supporting information on a static page without disrupting the primary information. Computer-based documents have recently augmented these conventions with hypertext links to supporting documents. Compared to static typography, hypertext has fewer limits on the size or complexity of an annotation, but at the cost of removing the supporting information from its context on the page.
We are exploring a new technique for annotation, called Fluid Documents, which uses lightweight interactive animation to incorporate annotations in their context. Our approach initially uses the space on a page for primary information, indicating the presence of supporting material with small visual cues. When a user expresses interest in a cue, its annotation gradually expands nearby. Meanwhile, the surrounding information alters its typography and/or layout to create the needed visual space.
We have demonstrated the value of Fluid Documents in two prototype applications. Fluid Links use animated glosses to support informed and incremental hypertext browsing, and Fluid Spreadsheets use animated graphics to make formulas and cell dependencies visible in a spreadsheet. We have also developed a "negotiation architecture" to support Fluid Document applications. This architecture allows the primary and supporting information to adjust their typography and layout appropriately.
Results of a recent observational study of subjects using Fluid Links indicate that the basic concepts underlying fluid documents can be effective: users can process moving text even in a serious reading situation, and providing information close to the anchor seems to be beneficial. Subjective preferences were varied, which suggests that architectures like our negotiation architecture, which supports multiple fluid techniques, may be crucial to user acceptance.
The Fluid Fiction exhibit at the Tech Museum of Innovation explores the new forms narrative can take when digital text becomes highly dynamic.
Techniques
Here are three techniques we have explored in depth for displaying annotations in a body of text.
Interline compression
The simplest positional technique for adjusting primary material moves it away as blocks to make space. One advantage is that the supporting material stays close to the primary material and the primary material is not distorted. However, a fixed display size with no margins would result in cropping the primary material, losing some of the context.
A related technique for use in fluid text documents moves the position of each line of text individually, compressing the interline space and allocating the savings to the annotation. This approach still maintains the annotation near the primary information but at the expense of somewhat distorting the primary text body. Our trials suggest that compressing the interline spacing of all primary text lines equally is less obtrusive than selectively compressing lines either near to or far from the annotation.
Margin callout
Adding graphical marks helps to show the relationship between the primary and supporting material when they cannot be adjacent. The margin callout technique avoids altering the primary material in order to display supporting material. Instead, it places the supporting material in existing white space on the page, for example, the margins. When the reader indicates interest in a cue, a line extends out from the cue to the nearby side margin, and the supporting material expands at that location. Because the callout line travels in between text lines, the primary material is neither moved nor altered. This technique can allow a good amount of supporting material to coexist with the original layout of the document. Although margin callouts sacrifice close proximity to the anchor, the animation of the callout line and the subsequent animated expansion of the supporting material effectively draw the reader's eye to the supporting material, and then back again when the callout line shrinks back to the cue.
Overlay
Another technique that preserves the layout of the source document is the overlay. An overlay expands into the space below the anchor, as in the interline compression technique. However, the source material in that space does not move away; rather, it fades in color. The difference in darkness of the two layers of text, as well as other differences like size and font, can make the supporting material readable while still preserving some degree of readability of the underlying source text.
References
- Niels Olof Bouvin, Polle Zellweger, Henning Jehøj & Jock Mackinlay. Fluid annotations through open hypermedia: using and augmenting emerging Web standards. Proceedings of 11th International World Wide Web Conference (ACM Refereed Paper Track), May 2002. PDF
- Polle Zellweger, Ann. Mangen, Paula
Newman.
- Polle Zellweger, Niels Olof Bouvin, Jock Mackinlay, & Henning Jehøj. Fluid annotations in an open world. Proceedings of ACM Hypertext 2001, 9-18. PDF
- Polle Zellweger and Jock
Mackinlay. The Fluid Reading Primer: animated decoding support for
emergent readers. Proceedings
of ED-MEDIA 2001,
- Polle T. Zellweger, Susan Harkness Regli, Jock D. Mackinlay, Bay-Wei Chang. The impact of Fluid Documents on reading and browsing: An observational study. Proceedings of CHI'00, 2000, 249-256. Postscript PDF
- Bay-Wei Chang, Jock
Mackinlay, Polle T. Zellweger. Fluidly revealing information in Fluid
Documents. Proceedings of Smart Graphics 2000 AAAI Spring Symposium,
- Rich Gold, Bay-Wei Chang,
Polle T. Zellweger, Jock Mackinlay. Fluid Fiction: Harry the Ape. Exhibit
at the
- Polle T. Zellweger, Bay-Wei Chang, Jock Mackinlay. Fluid links for informed and incremental hypertext browsing. CHI'99 Extended Abstracts (video demonstration), 1999. Postscript PDF
- Bay-Wei Chang, Jock D. Mackinlay, Polle T. Zellweger, Takeo Igarashi. A negotiation architecture for fluid documents. Proceedings of UIST'98, 1998, 123-132. Postscript PDF
- Takeo Igarashi, Jock D. Mackinlay, Bay-Wei Chang, Polle T. Zellweger. Fluid visualization of spreadsheet structures. Proceedings of Visual Languages'98, 1998. Postscript PDF
- Polle T. Zellweger, Bay-Wei Chang, Jock Mackinlay. Fluid links for informed and incremental link transitions. Proceedings of Hypertext'98, 1998, 50-57. Postscript PDF