Temporal Distortion for Animated Transitions

Preview:

DESCRIPTION

Animated transitions are popular in many visual applications but they can be difficult to follow, especially when many objectsmove at the same time. One informal design guideline for creating effective animated transitions has long been the use of slow-in/slow-out pacing, but no empirical data exist to support this practice. We remedy this by studying object tracking performance under different conditions of temporal distortion, i.e., constant speed transitions, slow-in/slow-out, fast-in/fast-out, and an adaptive technique that slows down the visually complex parts of the animation. Slow-in/slow-out outperformed other techniques, but we saw technique differences depending on the type of visual transition.

Citation preview

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: dragice@lri.fr, elm@purdue.edu

Recommended