Temporal Distortion for Animated Transitions<br />Pierre Dragicevic<br />Anastasia Bezerianos<br />WaqasJaved<br />NiklasE...
Animated Transitions<br />
Animated Transitions<br />
Animated Transitions<br />(Chevalier et al., CHI 2010)<br />
Animated Transitions<br />(Chevalier et al., CHI 2010)<br />
Animated Transitions<br />(Chevalier et al., CHI 2010)<br />
Animated Transitions<br />www.silverlight.net/learn/pivotviewer/<br />
Animated Transitions<br />(Elmqvist et al., InfoVis 2008)<br />
How to Design Them?<br />
How to Design Them?<br />Spatial Aspects<br />Initial Image<br />Final Image<br />?<br />?<br />(Heer and Robertson, InfoV...
How to Design Them?<br />Temporal Aspects<br />Internal Timing<br />Duration<br />Pacing<br />
Pacing<br />
Pacing<br />
Pacing<br />
Pacing<br />
Slow In / Slow Out<br />START<br />…<br />t = 0<br />t = 0.5<br />…<br />t = 1<br />END<br />
Slow In / Slow Out<br />Slow In / Slow Out<br />t = 1<br />Slow<br />Fast<br />Slow<br />-><br />t<br />Speed<br />t = 0<b...
Slow In / Slow Out<br />Adds realism<br />Allows anticipation<br />(Chang and Ungar, 1995)<br />
Slow In / Slow Out<br />Fast InFast Out<br />Constant<br />Adaptive<br />Slow InSlow Out<br />Fast<br />Slow<br />Fast<br ...
User Study<br />
User Study<br />Task<br />
User Study<br />Task<br />
User Study<br />Task<br />
User Study<br />Task<br />
User Study<br />Task<br />
User Study<br />Task<br />Error<br />
User Study<br />Datasets<br />Randomly-generated point cloud transitions<br />Point Cloud generation<br />Transition gener...
User Study<br />Datasets<br />Scatterplot transitions<br />12x12 possible scatterplots<br />
User Study<br />Distractor Profile<br />1<br />2<br />3<br />1<br />2<br />3<br />time<br />time<br />time<br />DistProf >...
User Study<br />Design<br />12 participants<br />4 Tech<br />2 Dataset<br />3 or 2 DistProf<br />12 repetitions<br /><ul><...
User Study<br /><ul><li>Results: generated dataset </li></ul>C<br />S<br />F<br />A<br />C<br />S<br />F<br />A<br />C<br ...
User Study<br /><ul><li>Results: real dataset</li></ul>S<br />F<br />A<br />C<br />S<br />F<br />A<br />C<br />
Summary of Results<br />Slow In/Slow Out is better in all regards<br />Adaptive speed performs best when complexity found ...
Explaining the Results<br />Twoconflictingprinciples for pacing:<br />Frames atendpoints<br />Frames atcomplex segments<br...
Explanation v1.0<br />Gradual start and stop aid predictability<br />Detecting start<br />Predicting stop<br />Agrees with...
Human Vision and Perception<br />
Eye Movement 101<br />Saccadic movement<br />Smooth pursuit<br />
Eye Movement 101 (cont’d)<br />Smooth pursuit<br />open-loop<br />closed-loop<br />Smooth pursuit has two stages<br />Open...
Eye Movement 101 (cont’d)<br />100ms<br />indefinite<br />100ms<br />100ms<br />open-loop<br />latency<br />slowing eye<br...
Conclusions<br />
Conclusions<br />Our work confirms animation folklore<br />Use Slow In/Slow Out for animations<br />But not for the reason...
Design Implications<br />If you are using animation….<br />…and you are considering different pacings<br />use<br />SLOW I...
Questions?<br />Pierre Dragicevic		INRIA<br />Anastasia BezerianosEcoleCentrale Paris<br />WaqasJaved		Purdue University<b...
Temporal Distortion for Animated Transitions
Upcoming SlideShare
Loading in …5
×

Temporal Distortion for Animated Transitions

985 views

Published on

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.

Published in: Technology, Business
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
985
On SlideShare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
13
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide
  • In GUIs and infovis applications
  • In GUIs and infovis applications
  • In GUIs and infovis applications
  • In GUIs and infovis applications
  • 1,038 objects and 13 dimensions per object
  • Temporal Distortion for Animated Transitions

    1. 1. Temporal Distortion for Animated Transitions<br />Pierre Dragicevic<br />Anastasia Bezerianos<br />WaqasJaved<br />NiklasElmqvist<br />Jean-Daniel Fekete<br />INRIA<br />ÉcoleCentrale Paris<br />Purdue University<br />
    2. 2. Animated Transitions<br />
    3. 3. Animated Transitions<br />
    4. 4. Animated Transitions<br />(Chevalier et al., CHI 2010)<br />
    5. 5. Animated Transitions<br />(Chevalier et al., CHI 2010)<br />
    6. 6. Animated Transitions<br />(Chevalier et al., CHI 2010)<br />
    7. 7. Animated Transitions<br />www.silverlight.net/learn/pivotviewer/<br />
    8. 8. Animated Transitions<br />(Elmqvist et al., InfoVis 2008)<br />
    9. 9. How to Design Them?<br />
    10. 10. How to Design Them?<br />Spatial Aspects<br />Initial Image<br />Final Image<br />?<br />?<br />(Heer and Robertson, InfoVis 2007)<br />
    11. 11. How to Design Them?<br />Temporal Aspects<br />Internal Timing<br />Duration<br />Pacing<br />
    12. 12. Pacing<br />
    13. 13. Pacing<br />
    14. 14. Pacing<br />
    15. 15. Pacing<br />
    16. 16. Slow In / Slow Out<br />START<br />…<br />t = 0<br />t = 0.5<br />…<br />t = 1<br />END<br />
    17. 17. Slow In / Slow Out<br />Slow In / Slow Out<br />t = 1<br />Slow<br />Fast<br />Slow<br />-><br />t<br />Speed<br />t = 0<br />time -><br />
    18. 18. Slow In / Slow Out<br />Adds realism<br />Allows anticipation<br />(Chang and Ungar, 1995)<br />
    19. 19. Slow In / Slow Out<br />Fast InFast Out<br />Constant<br />Adaptive<br />Slow InSlow Out<br />Fast<br />Slow<br />Fast<br />Slow<br />-><br />t<br />Speed<br />time-><br />
    20. 20. User Study<br />
    21. 21. User Study<br />Task<br />
    22. 22. User Study<br />Task<br />
    23. 23. User Study<br />Task<br />
    24. 24. User Study<br />Task<br />
    25. 25. User Study<br />Task<br />
    26. 26. User Study<br />Task<br />Error<br />
    27. 27. User Study<br />Datasets<br />Randomly-generated point cloud transitions<br />Point Cloud generation<br />Transition generation<br />
    28. 28. User Study<br />Datasets<br />Scatterplot transitions<br />12x12 possible scatterplots<br />
    29. 29. User Study<br />Distractor Profile<br />1<br />2<br />3<br />1<br />2<br />3<br />time<br />time<br />time<br />DistProf > 1<br />DistProf < 1<br />DistProf ~ 1<br />
    30. 30. User Study<br />Design<br />12 participants<br />4 Tech<br />2 Dataset<br />3 or 2 DistProf<br />12 repetitions<br /><ul><li>2280 trials</li></li></ul><li>User Study<br />
    31. 31. User Study<br /><ul><li>Results: generated dataset </li></ul>C<br />S<br />F<br />A<br />C<br />S<br />F<br />A<br />C<br />S<br />F<br />A<br />
    32. 32. User Study<br /><ul><li>Results: real dataset</li></ul>S<br />F<br />A<br />C<br />S<br />F<br />A<br />C<br />
    33. 33. Summary of Results<br />Slow In/Slow Out is better in all regards<br />Adaptive speed performs best when complexity found at endpoints…<br />…where it basically reduces to SI/SO<br />Constant speed better for all other profiles<br />Above all, do no harm…<br />
    34. 34. Explaining the Results<br />Twoconflictingprinciples for pacing:<br />Frames atendpoints<br />Frames atcomplex segments<br />SI/SO based on #1<br />Consistent with folklore…<br />…but requires an explanation!<br />
    35. 35. Explanation v1.0<br />Gradual start and stop aid predictability<br />Detecting start<br />Predicting stop<br />Agrees with common sense…<br />…but why is predictability important?<br />
    36. 36. Human Vision and Perception<br />
    37. 37. Eye Movement 101<br />Saccadic movement<br />Smooth pursuit<br />
    38. 38. Eye Movement 101 (cont’d)<br />Smooth pursuit<br />open-loop<br />closed-loop<br />Smooth pursuit has two stages<br />Open-loop: initial, ballistic stage<br />Closed-loop: synchronized stage<br />Pacing should support both<br />Avoid target loss in open-loop<br />Avoid target overshooting in closed-loop<br />
    39. 39. Eye Movement 101 (cont’d)<br />100ms<br />indefinite<br />100ms<br />100ms<br />open-loop<br />latency<br />slowing eye<br />closed-loop<br />motion stopped<br />Timing also important<br />100ms – open-loop stage<br />100ms – detecting target stopped (latency)<br />100ms – slowing down eye to zero<br />= 30% of our animations is visuomotor response!<br />Guiding principle: minimize velocity delta<br />
    40. 40. Conclusions<br />
    41. 41. Conclusions<br />Our work confirms animation folklore<br />Use Slow In/Slow Out for animations<br />But not for the reason quoted by animators<br />“The Illusion of Life”<br />SI/SO has best predictability of all schemes<br />Detect movement in open-loop smooth pursuit<br />Minimizes risk of losing target<br />Predict ending in closed-loop smooth pursuit<br />Minimizes risk of overshooting target<br />
    42. 42. Design Implications<br />If you are using animation….<br />…and you are considering different pacings<br />use<br />SLOW IN/SLOW OUT<br />Otherwise, do no harm: constant speed <br />
    43. 43. Questions?<br />Pierre Dragicevic INRIA<br />Anastasia BezerianosEcoleCentrale Paris<br />WaqasJaved Purdue University<br />Niklas Elmqvist Purdue University<br />Jean-Daniel Fekete INRIA<br />E-mail: dragice@lri.fr, elm@purdue.edu<br />

    ×