Animated transitions are popular in many visual applications but they can be difficult to follow, especially when many objects move 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.

1. Temporal Distortion for Animated Transitions Pierre Dragicevic Anastasia Bezerianos WaqasJaved NiklasElmqvist Jean-Daniel Fekete INRIA ÉcoleCentrale Paris Purdue University

2. Animated Transitions

3. Animated Transitions

4. Animated Transitions (Chevalier et al., CHI 2010)

5. Animated Transitions (Chevalier et al., CHI 2010)

6. Animated Transitions (Chevalier et al., CHI 2010)

7. Animated Transitions www.silverlight.net/learn/pivotviewer/

8. Animated Transitions (Elmqvist et al., InfoVis 2008)

9. How to Design Them?

10. How to Design Them? Spatial Aspects Initial Image Final Image ? ? (Heer and Robertson, InfoVis 2007)

11. How to Design Them? Temporal Aspects Internal Timing Duration Pacing

12. Pacing

13. Pacing

14. Pacing

15. Pacing

16. Slow In / Slow Out START … t = 0 t = 0.5 … t = 1 END

17. Slow In / Slow Out Slow In / Slow Out t = 1 Slow Fast Slow -> t Speed t = 0 time ->

18. Slow In / Slow Out Adds realism Allows anticipation (Chang and Ungar, 1995)

19. Slow In / Slow Out Fast InFast Out Constant Adaptive Slow InSlow Out Fast Slow Fast Slow -> t Speed time->

20. User Study

21. User Study Task

22. User Study Task

23. User Study Task

24. User Study Task

25. User Study Task

26. User Study Task Error

27. User Study Datasets Randomly-generated point cloud transitions Point Cloud generation Transition generation

28. User Study Datasets Scatterplot transitions 12x12 possible scatterplots

29. User Study Distractor Profile 1 2 3 1 2 3 time time time DistProf > 1 DistProf < 1 DistProf ~ 1

33. 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…

34. Explaining the Results Twoconflictingprinciples for pacing: Frames atendpoints Frames atcomplex segments SI/SO based on #1 Consistent with folklore… …but requires an explanation!

35. Explanation v1.0 Gradual start and stop aid predictability Detecting start Predicting stop Agrees with common sense… …but why is predictability important?

36. Human Vision and Perception

37. Eye Movement 101 Saccadic movement Smooth pursuit

38. Eye Movement 101 (cont’d) Smooth pursuit open-loop closed-loop 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

39. Eye Movement 101 (cont’d) 100ms indefinite 100ms 100ms open-loop latency slowing eye closed-loop motion stopped 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

40. Conclusions

41. 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

42. Design Implications If you are using animation…. …and you are considering different pacings use SLOW IN/SLOW OUT Otherwise, do no harm: constant speed

43. Questions? Pierre Dragicevic INRIA Anastasia BezerianosEcoleCentrale Paris WaqasJaved Purdue University Niklas Elmqvist Purdue University Jean-Daniel Fekete INRIA E-mail: dragice@lri.fr, elm@purdue.edu