Temporal Distortion for Animated Transitions
Pierre DragicevicAnastasia BezerianosWaqas JavedNiklas ElmqvistJean-Daniel Fekete
INRIAÉcole Centrale ParisPurdue University
Animated Transitions
Animated Transitions
Animated Transitions
(Chevalier et al., CHI 2010)
Animated Transitions
(Chevalier et al., CHI 2010)
Animated Transitions
(Chevalier et al., CHI 2010)
Animated Transitions
www.silverlight.net/learn/pivotviewer/
Animated Transitions
(Elmqvist et al., InfoVis 2008)
How to Design Them?
How to Design Them?
Spatial Aspects
(Heer and Robertson, InfoVis 2007)
?
?
Initial Image Final Image
How to Design Them?
Temporal Aspects
•Internal Timing•Duration•Pacing
Pacing
Pacing
Pacing
Pacing
STARTEND
Slow In / Slow Out
t = 0 t = 1t = 0.5… …
Slow In / Slow Out
time →
→
Speed
Slow In / Slow Out
t
t = 0
t = 1
Slow
Fast
Slow
Slow In / Slow Out
(Chang and Ungar, 1995)
Adds realism
Allows anticipation
Slow In / Slow Out
time →
→ Speed
Slow InSlow Out
Constant Fast InFast Out Adaptive
Fast
Slow
Fast
Slowt
User Study
User Study
Task
User Study
Task
User Study
Task
User Study
Task
User Study
Task
User Study
Task
Error
User Study
Datasets•Randomly-generated point cloud transitions
Point Cloud generation
Transition generation
User Study
Datasets•Scatterplot transitions
12x12 possible scatterplots
User Study
Distractor Profile
DistProf < 1 DistProf > 1
time
DistProf ~ 1
time time
1 2 3
1
2
3
User Study
Design
12 participant
s
4 Tech
2 Dataset
3 or 2 DistProf
12 repetitions
2280 trials
User Study
User Study
Results: generated dataset
C S F A C S F A C S F A
User Study
Results: real dataset
C S F A C S F A
Summary of Results
Slow In/Slow Out is better in all regards
Adaptive speed performs best when complexity found at endpoints…•…where it basically reduces to SI/SO
Constant speed better for all other profiles•Above all, do no harm…
Explaining the Results
Two conflicting principles for pacing:1.Frames at endpoints2.Frames at complex segments
SI/SO based on #1•Consistent with folklore…•…but requires an explanation!
Explanation v1.0
Gradual start and stop aid predictability•Detecting start•Predicting stop
Agrees with common sense…
…but why is predictability important?
Human Vision and Perception
Eye Movement 101
Saccadic movement
Smooth pursuit
Eye Movement 101 (cont’d)
Smooth pursuit has two stages•Open-loop: initial, ballistic stage•Closed-loop: synchronized stage
Pacing should support both•Avoid target loss in open-loop•Avoid target overshooting in closed-loop
Smooth pursuit
open-loop closed-loop
Eye Movement 101 (cont’d)
Timing also important•100ms – open-loop stage•100ms – detecting target stopped (latency)
•100ms – slowing down eye to zero•= 30% of our animations is visuomotor response!
Guiding principle: minimize velocity delta
open-loop closed-loop
100ms indefinite 100ms 100ms
latency slowing eye
motion stopped
Conclusions
Conclusions
Our work confirms animation folklore•Use Slow In/Slow Out for animations
But not for the reason quoted by animators•“The Illusion of Life”
SI/SO has best predictability of all schemes•Detect movement in open-loop smooth pursuit•Minimizes risk of losing target
•Predict ending in closed-loop smooth pursuit•Minimizes risk of overshooting target
Design Implications
If you are using animation….
…and you are considering different pacings
use
SLOW IN/SLOW OUT
Otherwise, do no harm: constant speed
Questions?
Pierre Dragicevic INRIA
Anastasia Bezerianos Ecole Centrale Paris
Waqas Javed Purdue University
Niklas Elmqvist Purdue University
Jean-Daniel Fekete INRIA
E-mail: [email protected], [email protected]
Recommended
