X hits on this document





4 / 10

object in a drawing program), we keep the initial state in place and only extend the path.

Reestablishing the time dimension Paths do not inherently offer any sense of directionality. So, to distinguish an object moving from A to B from an object moving from B to A, we add three cues to reinforce tempo- ral order,

1. Fading “old” path segments: We render path segments increasingly translucent the further away they are from the final state. Accordingly, fading an afterglow causes the path to disappear initial state-first (Figure 4a).


Figure 4: (a) Paths fade initial state first. (b) The temporal order of this strobe-style path is empha- sized by stacking frames in chronological order.

2. Stacking newer frames on top of older frames: We al- ways render the path on top of the initial state and the final state on top of everything. This also guarantees that the final state is never occluded and always fully readable. We use the same concept among the individual frames of strobe style paths (Figure 4b).

3. Distinctive initial states: In order to help users distin- guish initial and final state, we render them differently if possible. We always render the object’s final state as is; only then can we guarantee that it is legible and immedi- ately available for further interaction.. In Figure 4a we ren- dered the initial state as an outline to suggest the absence of that object, as appropriate for a move operation. We discuss other styles in a later section.

We decided against other potentially useful cues for tempo- ral order, such as texturing paths with arrow symbols or the use of animated textures. Animated textures do not impact the readability or accessibility of the object’s final state, but they seemed distracting. While tapered paths [17] could be used for this purpose, we instead chose to use this cue to depict transient operations as described below.

Depicting the operation causing the translation We use different path shapes and initial states to disam- biguate whether the translation of an object occurred be- cause the object was moved, copied, or filed in a subfolder

Move vs. copy: A copy operation is a move operation that does not disturb the initial state. We therefore depict copy operations as move operations with a solid initial state (Figure 5b).





Figure 5: Whether a folder is being (a) moved or (b) copied is determined by the initial state visuals.

Concave paths indicate transience: Some translations are transient, such as a translation suggested by the system but not yet confirmed by the user. We depict such translations using paths with a narrow midriff section to suggest that the final state is connected to the initial state using an elastic rubber band that will eventually pull the final state back (Figure 6a). The same effect can also be used to create and remove a temporary copy (Figure 6b) as done by drag-and- pop [6]. Since the path is attached to the initial state we do not fade it. Note how the diagrammatic nature of phosphor allows depicting the future.

temp. move


temp. copy


Figure 6: A narrow midriff on this path indicates that this folder was (a) moved or (b) copied temporarily.

Tapered paths indicate a child-of relationship: Sometimes an object is spawned or unveiled by another object, such as a child window being spawned by its parent window or a folder being extracted from another folder. To avoid confu- sion with a copy operation, we use a tapered path, suggest- ing that an object needs to be shrunk before it can fit into another object (Figure 7a) and that a restored object starts small and ends large (Figure 7b).





Figure 7: The tapered path indicates that (a) the folder at the bottom left was dropped into the other folder or (b) expanded from it.

Transitions that do not involve translation When collapsing the time dimension for transitions that lack translation, all frames project onto the same location. We alleviate this problem by adding motion to the animated transition before we project it so that phosphor can depict time in screen space. Figure 8 shows an example. (a) Bringing an object to the front can be thought of as a transition exclusively in Z-direction [9]. (b) Before projecting, we add motion to the path such that it evades the other object. (c) Collapsing this second animation provides the desired path.

Document info
Document views40
Page views40
Page last viewedMon Jan 23 15:22:02 UTC 2017