This document discusses the principles of animated transitions, focusing on the significance of pacing, particularly the 'slow in/slow out' technique, which enhances predictability and supports human visual perception. A user study is presented, confirming that adaptive speed is most effective for complex transitions, while constant speed suffices for simpler ones. The findings emphasize the rationale behind animation choices and their impact on viewer experience, advocating for design approaches that prioritize viewer comprehension and visual tracking.

1. Temporal Distortion for Animated TransitionsPierre DragicevicAnastasia BezerianosWaqasJavedNiklasElmqvistJean-Daniel FeketeINRIAÉcoleCentrale ParisPurdue 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 Transitionswww.silverlight.net/learn/pivotviewer/

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

9. How to Design Them?

10. How to Design Them?Spatial AspectsInitial ImageFinal Image??(Heer and Robertson, InfoVis 2007)

11. How to Design Them?Temporal AspectsInternal TimingDurationPacing

12. Pacing

13. Pacing

14. Pacing

15. Pacing

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

17. Slow In / Slow OutSlow In / Slow Outt = 1SlowFastSlow->tSpeedt = 0time ->

18. Slow In / Slow OutAdds realismAllows anticipation(Chang and Ungar, 1995)

19. Slow In / Slow OutFast InFast OutConstantAdaptiveSlow InSlow OutFastSlowFastSlow->tSpeedtime->

20. User Study

21. User StudyTask

22. User StudyTask

23. User StudyTask

24. User StudyTask

25. User StudyTask

26. User StudyTaskError

27. User StudyDatasetsRandomly-generated point cloud transitionsPoint Cloud generationTransition generation

28. User StudyDatasetsScatterplot transitions12x12 possible scatterplots

29. User StudyDistractor Profile123123timetimetimeDistProf > 1DistProf < 1DistProf ~ 1

30. User StudyDesign12 participants4 Tech2 Dataset3 or 2 DistProf12 repetitions2280 trialsUser Study

31. User StudyResults: generated dataset CSFACSFACSFA

32. User StudyResults: real datasetSFACSFAC

33. Summary of ResultsSlow In/Slow Out is better in all regardsAdaptive speed performs best when complexity found at endpoints……where it basically reduces to SI/SOConstant speed better for all other profilesAbove all, do no harm…

34. Explaining the ResultsTwoconflictingprinciples for pacing:Frames atendpointsFrames atcomplex segmentsSI/SO based on #1Consistent with folklore……but requires an explanation!

35. Explanation v1.0Gradual start and stop aid predictabilityDetecting startPredicting stopAgrees with common sense……but why is predictability important?

36. Human Vision and Perception

37. Eye Movement 101Saccadic movementSmooth pursuit

38. Eye Movement 101 (cont’d)Smooth pursuitopen-loopclosed-loopSmooth pursuit has two stagesOpen-loop: initial, ballistic stageClosed-loop: synchronized stagePacing should support bothAvoid target loss in open-loopAvoid target overshooting in closed-loop

39. Eye Movement 101 (cont’d)100msindefinite100ms100msopen-looplatencyslowing eyeclosed-loopmotion stoppedTiming also important100ms – open-loop stage100ms – 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. ConclusionsOur work confirms animation folkloreUse Slow In/Slow Out for animationsBut not for the reason quoted by animators“The Illusion of Life”SI/SO has best predictability of all schemesDetect movement in open-loop smooth pursuitMinimizes risk of losing targetPredict ending in closed-loop smooth pursuitMinimizes risk of overshooting target

42. Design ImplicationsIf you are using animation….…and you are considering different pacingsuseSLOW IN/SLOW OUTOtherwise, do no harm: constant speed

43. Questions?Pierre Dragicevic INRIAAnastasia BezerianosEcoleCentrale ParisWaqasJaved Purdue UniversityNiklas Elmqvist Purdue UniversityJean-Daniel Fekete INRIAE-mail: dragice@lri.fr, elm@purdue.edu