 |
|
|
|
|
|
 |
Animation for
|
||||||
|
Interaction design is about designing the use qualities of an interactive system. One of the fields where interaction design plays an important role is information visualization. It aims at creating tools for making large and complex information structures useful. For most people, animation might be equal to cartoons. In that perspective, the contributions of animation to interaction design are fairly limited. "Entertaining" agents, such as the Microsoft Office paper clip, and illustrations of dynamic processes in, e.g., the manufacturing industry seem to be the most common ideas. However, if we view animation as visual change over time, it is clear that the possibilities are much wider. Below, I present a few examples that may serve as inspiration in the design of information visualization. I also review some of the psychological foundations for the perception of animation. |
||||||
|
||||||
| Level of abstraction |
An information presentation can be based very closely on the structures and content of the underlying data. This could be called a literal approach.
|
|||||
 |
||||||
|
The early work at Xerox Parc has been characterized by literal visualizations.
The examples above show the ConeTree and
the WebForager. The ConeTree is a straight
representation of a hierarchical data structure. The WebForager builds
on the notion of web "pages". In the Xerox examples, animation is used mainly in the manipulation of the visualized objects. Subtrees in the cone rotate to bring the selected node to the fore. Pages in the WebBook flip to enhance the literal representation. This helps maintain the perceptual continuity of the visualization: the user must be able to form a stable model of the information structures even though they might move and change on screen.
|
||||||
 |
||||||
|
VR-Vibe illustrates what we might call the spatialization of data.
Again, animation is used for object manipulation, but above all for
travel in the virtual world of documents. The grey labels are notes
that the user has attached to documents for later reference.
|
||||||
|
At the other end of the literal-abstract spectrum, we find designs that abstract much more from the data. Typically, this involves condensing and fusing large amounts of data into a few perceptual variables. The example on the right is a concept I did in 1995 for the visualization of several Usenet hosts from a user's personal perspective. The shapes of the spheres, and the color, texture, shape and position of the mold patches, indicate new discussion activity that the user might find interesting. |
 |
|||||
|
The picture changes slowly based on the developing contents of the supervised conferences. If a patch of mold grows quickly enough to be noticed, it means that there is a very active discussion thread. The user can click on the patch as a shortcut to the corresponding discussion. |
||||||
|
||||||
| Interactivity |
Traditional animation is typically not interactive. The script writer and animator tell the story from beginning to end; the audience watches and listens. Interactive animation creates possibilities for much closer involvement between the user and the information. The ideal is to make the user feel in charge of a malleable material that she shapes through tightly coupled loops of action and feedback. The dynamic query concept is an important illustration of interactive animation in information visualization.
|
|||||
 |
||||||
|
The database scatterplot (left) is nothing in itself. The power comes
from the tight coupling of input and output, where filter manipulations
(right) are instantly reflected in the presentation. This facilitates
serendipitous discovery of data relationships and trends that are invisible
in a static display.
|
||||||
|
Brushing is slightly more lightweight then setting sliders and dynamic filters. Simply moving the cursor over a piece of information might highlight related information in different views. The example on the right is taken from the recent Animationens Hus web site (in Swedish, requires Shockwave). |
 |
|||||
|
In the Visual Thesaurus from Plumb Design, the interactive qualities play an important part in changing the user's view of what words and concepts are. More on the VT as seductive
technology. |
 |
|||||
|
||||||
| Perceptual basics |
Perception psychology knows a good deal about the perception of visual change over time. For instance, change is easily perceived as causal relations, gradual transformation and intentional action. More on the perception of animation.
|
|||||
|
||||||
| Further studies |
Most available material concerns information visualization as a whole, where animation and interactivity are sometimes embedded, sometimes neglected. Four of the most comprehensible sources are given here. Card S, Mackinlay J, Shneiderman B (1999). Readings in information visualization: Using vision to think. San Francisco: Morgan Kaufmann. An exhaustive reader in the field of information visualization. Most of the classical papers are there along with some useful new material. Tufte E: The visual display of quantitative information (1983), Envisioning information (1990), Visual explanations (1997). Cheshire, Conn.: Graphics Press. Necessary reading for anyone concerned with efficient and useful presentation of information. Also beautiful examples in themselves. Ware C (2000). Information visualization: Perception for design. San Francisco: Morgan Kaufmann. Covering the foundations for information visualization in perception psychology. An Atlas of Cyberspaces. A collection by Martin Dodge on various means of mapping information spaces. Includes topological, conceptual, social and artistic approaches. And much more.
|
|||||