49
Animation Presented by Sancho McCann

Animation - cs.ubc.catmm/courses/old533/slides/anim.sancho.pdfCongruence Principle •A useful graphic is congruent to the structure and content of the internal representation. •Either

  • Upload
    others

  • View
    9

  • Download
    0

Embed Size (px)

Citation preview

Page 1: Animation - cs.ubc.catmm/courses/old533/slides/anim.sancho.pdfCongruence Principle •A useful graphic is congruent to the structure and content of the internal representation. •Either

AnimationPresented by Sancho McCann

Page 2: Animation - cs.ubc.catmm/courses/old533/slides/anim.sancho.pdfCongruence Principle •A useful graphic is congruent to the structure and content of the internal representation. •Either

Animation

• Is animation useful?

• Why?

• Principles of animation

• Principles applied

Page 3: Animation - cs.ubc.catmm/courses/old533/slides/anim.sancho.pdfCongruence Principle •A useful graphic is congruent to the structure and content of the internal representation. •Either

Animation: can it facilitate?

• Does animation help the understandingof changes over time?

• A picture is worth 1000 words; is a 100frame animation even worth 100 stills?

• “Yes?” - the congruence principle• “No?” - the apprehension principle

Page 4: Animation - cs.ubc.catmm/courses/old533/slides/anim.sancho.pdfCongruence Principle •A useful graphic is congruent to the structure and content of the internal representation. •Either

Congruence Principle

• A useful graphic is congruent to thestructure and content of the internalrepresentation.

• Either match a users internalrepresentation or,

• Force a useful internal representation.

Page 5: Animation - cs.ubc.catmm/courses/old533/slides/anim.sancho.pdfCongruence Principle •A useful graphic is congruent to the structure and content of the internal representation. •Either

Wood, D. (1992). The Power of Maps.

Page 6: Animation - cs.ubc.catmm/courses/old533/slides/anim.sancho.pdfCongruence Principle •A useful graphic is congruent to the structure and content of the internal representation. •Either

Wood, D. (1992). The Power of Maps.

Page 7: Animation - cs.ubc.catmm/courses/old533/slides/anim.sancho.pdfCongruence Principle •A useful graphic is congruent to the structure and content of the internal representation. •Either

Congruence Principle Violated• 3D does not improve

congruence;

• 3D does not improveperformance, speed,accuracy, ormemory.

0102030405060708090

1stQtr

2ndQtr

3rdQtr

4thQtr

East

Page 8: Animation - cs.ubc.catmm/courses/old533/slides/anim.sancho.pdfCongruence Principle •A useful graphic is congruent to the structure and content of the internal representation. •Either

Congruence Principle Applied

Page 9: Animation - cs.ubc.catmm/courses/old533/slides/anim.sancho.pdfCongruence Principle •A useful graphic is congruent to the structure and content of the internal representation. •Either

Congruence in Static Graphics

• Using space to portray space has beenwidely successful for millennia.

http://www.math.ubc.ca/~cass/Euclid/papyrus/papyrus.html http://www.classicmaps.com

US Patent 223898

Page 10: Animation - cs.ubc.catmm/courses/old533/slides/anim.sancho.pdfCongruence Principle •A useful graphic is congruent to the structure and content of the internal representation. •Either

Congruence in Animations

Page 11: Animation - cs.ubc.catmm/courses/old533/slides/anim.sancho.pdfCongruence Principle •A useful graphic is congruent to the structure and content of the internal representation. •Either

Does Animation Facilitate?

• How could we compare theeffectiveness of an animatedpresentation against a staticpresentation?

Page 12: Animation - cs.ubc.catmm/courses/old533/slides/anim.sancho.pdfCongruence Principle •A useful graphic is congruent to the structure and content of the internal representation. •Either

Rieber’s Animated Graphic

Rieber, L. P. (1991a). Animation, incidental learning, and continuing motivation. Journal ofEducational Psychology, 83, 318–328.

• Block andball movedat differentspeeds

Page 13: Animation - cs.ubc.catmm/courses/old533/slides/anim.sancho.pdfCongruence Principle •A useful graphic is congruent to the structure and content of the internal representation. •Either

Rieber’s Static Graphic

Rieber, L. P. (1991a). Animation, incidental learning, and continuing motivation. Journal ofEducational Psychology, 83, 318–328.

• No information about speeds of theobjects was presented, only arrows toindicate direction of motion.

Page 14: Animation - cs.ubc.catmm/courses/old533/slides/anim.sancho.pdfCongruence Principle •A useful graphic is congruent to the structure and content of the internal representation. •Either

Rieber’s Post Test

Rieber, L. P. (1991a). Animation, incidental learning, and continuing motivation. Journal ofEducational Psychology, 83, 318–328.

Page 15: Animation - cs.ubc.catmm/courses/old533/slides/anim.sancho.pdfCongruence Principle •A useful graphic is congruent to the structure and content of the internal representation. •Either

Does Animation Facilitate?

• Many of the studies have confoundingvariables on the results of the test:– The animation was interactive– The animation showed more information

• Comparison on equal ground:– Tutorials based on animation are actually

not remembered well

Page 16: Animation - cs.ubc.catmm/courses/old533/slides/anim.sancho.pdfCongruence Principle •A useful graphic is congruent to the structure and content of the internal representation. •Either

Palmiter, S. & Elkerton, J. (1993). Animated demonstrations for learning proceduralcomputer-based tasks. Human–Computer Interaction, 8, 193–216.

Page 17: Animation - cs.ubc.catmm/courses/old533/slides/anim.sancho.pdfCongruence Principle •A useful graphic is congruent to the structure and content of the internal representation. •Either

Why Not?

• The apprehension principle states thatthe external representation must bereadily and accurately perceived andcomprehended.

• Animation violates this principle!

Page 18: Animation - cs.ubc.catmm/courses/old533/slides/anim.sancho.pdfCongruence Principle •A useful graphic is congruent to the structure and content of the internal representation. •Either

Why Not?

• Minds are not easily forced to hold acontinuous representation.

• Animations are comprehendeddiscretely.

• Different viewers will take away differentelements from an animation.

• Animation is fleeting.

Page 19: Animation - cs.ubc.catmm/courses/old533/slides/anim.sancho.pdfCongruence Principle •A useful graphic is congruent to the structure and content of the internal representation. •Either

Advice

• Useful when timing is important• Realism is not important, your

information is– Slow down animations at critical phases– Annotate, highlight, direct attention– Eliminate unnecessary information

• Allow interaction

Page 20: Animation - cs.ubc.catmm/courses/old533/slides/anim.sancho.pdfCongruence Principle •A useful graphic is congruent to the structure and content of the internal representation. •Either

The Music AnimationMachine

Page 21: Animation - cs.ubc.catmm/courses/old533/slides/anim.sancho.pdfCongruence Principle •A useful graphic is congruent to the structure and content of the internal representation. •Either

Animationuseful fortiming?

Page 22: Animation - cs.ubc.catmm/courses/old533/slides/anim.sancho.pdfCongruence Principle •A useful graphic is congruent to the structure and content of the internal representation. •Either

Interactive Animation

• Richard Lowe. User-ControllableAnimated Diagrams: The Solution forLearning Dynamic Content?

Page 23: Animation - cs.ubc.catmm/courses/old533/slides/anim.sancho.pdfCongruence Principle •A useful graphic is congruent to the structure and content of the internal representation. •Either

Interactive Animation

• Animation is not fleeting

• Animation is not overwhelming

• View animation at any speed

• Extract fine and coarse grainedinformation

Page 24: Animation - cs.ubc.catmm/courses/old533/slides/anim.sancho.pdfCongruence Principle •A useful graphic is congruent to the structure and content of the internal representation. •Either

Interactive Animation

• Given:– 28 frame user-controllable weather map

representing a 7 day period– Another “Original” weather map

• Task:– Use patterns learned in the animation to

predict the weather map 24 hours after the“Original”

Page 25: Animation - cs.ubc.catmm/courses/old533/slides/anim.sancho.pdfCongruence Principle •A useful graphic is congruent to the structure and content of the internal representation. •Either

Interactive Animation

Richard Lowe. User-controlled animated diagrams: the solution for learning dynamiccontent?. In Lecture Notes in Computer Science - Diagrammatic Representation andInference. Springer-Verlag, 2004.

Page 26: Animation - cs.ubc.catmm/courses/old533/slides/anim.sancho.pdfCongruence Principle •A useful graphic is congruent to the structure and content of the internal representation. •Either

Interactive Animation

• Animation only used for an overview

• Novice users did not use animation tolearn temporal relations betweenfeatures; they didn’t know to look!

• The animation degraded to a flip-bookof images

Page 27: Animation - cs.ubc.catmm/courses/old533/slides/anim.sancho.pdfCongruence Principle •A useful graphic is congruent to the structure and content of the internal representation. •Either

Animated Interaction

• Animation does aid understanding ofinteractive and dynamic changes to aninterface.

Page 28: Animation - cs.ubc.catmm/courses/old533/slides/anim.sancho.pdfCongruence Principle •A useful graphic is congruent to the structure and content of the internal representation. •Either

Animated Interaction

Page 29: Animation - cs.ubc.catmm/courses/old533/slides/anim.sancho.pdfCongruence Principle •A useful graphic is congruent to the structure and content of the internal representation. •Either

Principles of Animation

• John Lasseter. Principles of TraditionalAnimation Applied to 3D computerAnimation. 1987.

Page 30: Animation - cs.ubc.catmm/courses/old533/slides/anim.sancho.pdfCongruence Principle •A useful graphic is congruent to the structure and content of the internal representation. •Either

Principles of Animation

• From classes promoted by Walt Disneyin the 1930s, The 11 Principles arose

Page 31: Animation - cs.ubc.catmm/courses/old533/slides/anim.sancho.pdfCongruence Principle •A useful graphic is congruent to the structure and content of the internal representation. •Either

Squash and Stretch

Page 32: Animation - cs.ubc.catmm/courses/old533/slides/anim.sancho.pdfCongruence Principle •A useful graphic is congruent to the structure and content of the internal representation. •Either

Timing

Page 33: Animation - cs.ubc.catmm/courses/old533/slides/anim.sancho.pdfCongruence Principle •A useful graphic is congruent to the structure and content of the internal representation. •Either

Anticipation

Page 34: Animation - cs.ubc.catmm/courses/old533/slides/anim.sancho.pdfCongruence Principle •A useful graphic is congruent to the structure and content of the internal representation. •Either

Staging

Page 35: Animation - cs.ubc.catmm/courses/old533/slides/anim.sancho.pdfCongruence Principle •A useful graphic is congruent to the structure and content of the internal representation. •Either

Staging

Page 36: Animation - cs.ubc.catmm/courses/old533/slides/anim.sancho.pdfCongruence Principle •A useful graphic is congruent to the structure and content of the internal representation. •Either

Slow-In Slow-Out

Page 37: Animation - cs.ubc.catmm/courses/old533/slides/anim.sancho.pdfCongruence Principle •A useful graphic is congruent to the structure and content of the internal representation. •Either

Arcs

Page 38: Animation - cs.ubc.catmm/courses/old533/slides/anim.sancho.pdfCongruence Principle •A useful graphic is congruent to the structure and content of the internal representation. •Either

Exaggeration

Page 39: Animation - cs.ubc.catmm/courses/old533/slides/anim.sancho.pdfCongruence Principle •A useful graphic is congruent to the structure and content of the internal representation. •Either

Appeal

Page 40: Animation - cs.ubc.catmm/courses/old533/slides/anim.sancho.pdfCongruence Principle •A useful graphic is congruent to the structure and content of the internal representation. •Either

Three Other Principles

• Follow-through and Overlapping Action

• Straight Ahead or Pose-to-Pose

• Secondary Action

Page 41: Animation - cs.ubc.catmm/courses/old533/slides/anim.sancho.pdfCongruence Principle •A useful graphic is congruent to the structure and content of the internal representation. •Either

Principles Applied

Page 42: Animation - cs.ubc.catmm/courses/old533/slides/anim.sancho.pdfCongruence Principle •A useful graphic is congruent to the structure and content of the internal representation. •Either

An Application

• David Carr and Matja_ Kljun. The Effectof Animated Transitions on UserNavigation in 3d Tree-Maps.Proceedings of the 9th Intl. Conferenceon Information Visualization (IV 2005).

Page 43: Animation - cs.ubc.catmm/courses/old533/slides/anim.sancho.pdfCongruence Principle •A useful graphic is congruent to the structure and content of the internal representation. •Either
Page 44: Animation - cs.ubc.catmm/courses/old533/slides/anim.sancho.pdfCongruence Principle •A useful graphic is congruent to the structure and content of the internal representation. •Either

An Application

• How is staging applied?

• How is anticipation applied?

• What other principles are applied?

• What principles could have beenapplied?

Page 45: Animation - cs.ubc.catmm/courses/old533/slides/anim.sancho.pdfCongruence Principle •A useful graphic is congruent to the structure and content of the internal representation. •Either

Discussion

• Animation did allow for different types ofnavigation - short-cuts

• The short-cuts were not effective -users got lost.

Page 46: Animation - cs.ubc.catmm/courses/old533/slides/anim.sancho.pdfCongruence Principle •A useful graphic is congruent to the structure and content of the internal representation. •Either
Page 47: Animation - cs.ubc.catmm/courses/old533/slides/anim.sancho.pdfCongruence Principle •A useful graphic is congruent to the structure and content of the internal representation. •Either

Summary

• Animation is deceivingly attractive

• Interactive animation might help

• Animated interaction does help

Page 48: Animation - cs.ubc.catmm/courses/old533/slides/anim.sancho.pdfCongruence Principle •A useful graphic is congruent to the structure and content of the internal representation. •Either

Papers• Barbara Tversky, Julie Bauer Morrison and

Mireille Betrancourt. Animation: can itfacilitate?. In International Journal of Human-Computer Studies, 57 . Elsevier Science Ltd,2004.

• Richard Lowe. User-controlled animateddiagrams: the solution for learning dynamiccontent?. In Lecture Notes in ComputerScience - Diagrammatic Representation andInference. Springer-Verlag, 2004

Page 49: Animation - cs.ubc.catmm/courses/old533/slides/anim.sancho.pdfCongruence Principle •A useful graphic is congruent to the structure and content of the internal representation. •Either

Papers• John Lasseter. Principles of traditional animation

applied to 3D computer animation. In ACM Journal ofComputer Graphics, 21 - 4, July 1987.

• Bladh, T., Carr, D. A., and Kljun, M. 2005. The Effectof Animated Transitions on User Navigation in 3DTree-Maps. In Proceedings of the Ninth internationalConference on information Visualisation (Iv'05) -Volume 00 (July 06 - 08, 2005). IV. IEEE ComputerSociety, Washington, DC, 297-305.