Figure 8: (a) initial animation, (b) adding vertical motion, and (c) resulting phosphor transition.
Revealing the initial state: Adding motion to the path re- veals the path, yet the initial state remains occluded. We ensure the visibility of the initial state by translating it for- ward in time along the path, as shown in Figure 9a. In cases where we can expect users to know that this translation is not part of the transition, we can omit the path (Figure 9b and c, as well as the combo box in Figure 1).
Figure 9: (a) The initial state of this scaled-up ob- ject was revealed by moving it out along the path. (b) If unambiguous, we may omit the path. (c) The matching scaling down transition.
Out-of-band properties in the initial state: In many of our examples, we repurposed properties of the initial state. We used texture to convey temporal order (Figure 4), size to convey an inclusion relationship (Figure 7), and location to avoid occlusion (Figure 9). But how can users know that the object in Figure 4 did not change from an outline to a solid object, that nothing shrank in Figure 7, and that noth- ing moved in Figure 9? We used what we call out-of-band signals, another example of which is shown in Figure 10a and b.
opaque and (b) from 50% transparent (c) A rotation may be confused with a unless (d) an out-of-band cue is added.
to opaque. translation,
This transition shows an increase in opacity by showing a “transparent” initial state. Using real transparency would cause the initial state to be invisible. We therefore use a symbolic representation instead, here a checkerboard pat- tern that shines through. This approach is commonly used in painting programs, such as Adobe Photoshop. It works, because checker boards are unlikely to occur in the applica- tion area of interest, such as photographs or icons. The limi-
tation of this approach is that the choice of out-of-band sig- nals is application-specific. Application areas that include checker board textures, for example, require using a differ- ent stimulus. We have used the out-of-band concept for a wide range of transitions, including rotation (Figure 10c and d).
Transitions that involve multiple objects If paths cross at an angle, speed line gestalt is sufficient to assure readability (Figure 11a). During pilot testing, we found that up to ten simultaneous translations on the screen were visually separable, even when they where of the same color scheme. For cases of exact overlap (Figure 11b), readability can be maintained by letting paths avoid each other (Figure 11c).
Figure 11: (a) In the general case, path overlap is not a problem. (b) Objects trading places (c) is bet- ter handled with paths avoiding each other.
If large numbers of objects move, we may reduce clutter by shortening paths (Figure 12a, see also ). We can use a single path for groups of objects performing the same tran- sition (Figure 12b).
Figure 12: Avoiding clutter by (a) shortening paths and (b) using a single path object.
IMPLEMENTATION In order to try out our concepts and to run the user studies reported below, we created two prototypical implementa- tions of phosphor.
Figure 13 shows a screenshot from our first prototype. It simulates a computer desktop and allows us to create a va- riety of different transition types. It is implemented in Del- phi using the .NET framework. The prototype allows load- ing arbitrary graphics for objects and if desired separate graphics for their initial states. It generates different shapes of paths using Bezier curves with four control points. Col- ors of speed line path are generated automatically by sam- pling and averaging colors from the respective objects. The prototype allows customizing path opacity; the defaults are 12.5% to 50% opacity for the path fill and 25% to 87.5% for path edges. Finally, this prototype also offers animated transitions.
Our second prototype is shown in Figure 14, a close-up in Figure 1. It is implemented in Macromedia Flash and offers