X hits on this document





3 / 10

Comics use static depictions of dynamic contents that have been adopted by user interface research such as Comic Chat [20]. The individual frames of a comic are multiplexed in space, unlike cartoons that show them in temporal succes- sion [23]. The visual language of phosphor is similar to that of comic books in that both depict the past; the act of run- ning is shown by adding motion blur behind the character; a punch is shown as a fist that has already followed through. Story boards in contrast tend to depict the future.

Diagrammatic transitions in the user interface There are only a few examples of diagrammatic cues de- picting motion in user interfaces. Mac OS X complements animation with a motion blur when iconifying windows. High-density cursor improves target acquisition by adding a strobe effect to the mouse trajectory [5]. Gutwin and Pen- ner showed that similar cues applied to telepointers can improve collaboration [13]. Kaptelinin et al. showed that a static cue can improve the reading performance of scrolled pages. Their design minimizes clutter by using only an out- line to highlight “new” screen content [18]. Our work on phosphor is different in that it focuses on individual objects, rather than view navigation. Our paper generalizes the tran- sition styles of drag-and-pop, an interaction technique for accessing distant content on wall-size displays [6].

THE VISUAL LANGUAGE OF PHOSPHOR In this section, we show how the design space of phosphor is applicable to many objects and transitions, such as icons, windows, or objects in a drawing program. Such objects may experience a broad range of transitions, such as rota- tion, change in stacking order, or changes in opacity.

Figure 2 illustrates the general concept for creating a phos- phor transition. First, we envision an animated transition. Second, we conceptualize this transition as a static depic- tion by projecting along the time axis. The result is a single image consisting of the initial state of the transition, the final state, and the path in between.

Figure 2: The afterglow of phosphor objects is gen- erated by projecting an animated transition along its time axis.

For translations, e.g., the knob of a slider, this process is fairly straightforward and can be implemented using a mo-

tion blur effect. For in-place transitions, such as a rotation or change in opacity, however, all frames of the animation fall onto the same location. We present measures to avoid occlusion in such cases. We also present cues that compen- sate for the loss of temporal order during the projection step. We first present visual styles for paths.

For the sake of visual consistency, all examples in this sec- tion use the same visual objects, here two desktop icons. These are intended as exemplars for phosphor objects in general.

Paths styles: strobe, motion blur, and speed lines Figure 3 shows the three basic path styles we have used, all inspired by comic books [23].

The strobe style shown in Figure 3a consists of a finite number of partially overlapping frames. It can help convey complex transitions by breaking it down into a frame-by- frame illustration.

The motion blur style shown in Figure 3b is generated from a single copy of the object by first compressing it to single- pixel-width and then by stretching it to the desired length. This approach leads to less clutter, as the individual frames dissolve into a single gestalt.

In a literal implementation of strobes and motion blur, long paths would be practically invisible, because each of the n frames the path is composed from has opacity of only 1/n [5]. We ensure path visibility by increasing path opacity to a point were paths are clearly visible. Path opacity is sub- ject to a tradeoff between visibility and clutter, but we ob- tained good results with opacities of 50% for the densest part of the path.

For most of our applications, as well as both user studies reported in this paper, we use the speed lines style shown in Figure 3c. This style consists of a pair of edge lines and a center line on top of a background surface, as used in [6]. It provides a good indication of orientation and causes less clutter than the motion blur design. By using characteristic colors sampled from the object, speed line paths often also resemble their parent objects more than the washed out colors of the actual motion blur. This helps visually match paths with parent objects and visually separate them from other intersecting paths (see also Figure 11).


Figure 3: Basic path styles (a) strobe (b) motion blur, and (c) speed lines.

We make paths transparent to mouse input to allow users to interact with screen content temporarily occluded by a path. If a transition is repeated while its afterglow is still on screen (for example, when manually “nudging” a geometric

Document info
Document views35
Page views35
Page last viewedTue Jan 17 21:57:45 UTC 2017