1. 1 SIMS 247: Information Visualization and Presentation Marti Hearst Oct 5, 2005

2. 2 Today Animation –Focus on usability studies

3. 3 Slide by Saifon Obromsook & Linda Harjono Animation “The quality or condition of being alive, active, spirited, or vigorous” (dictionary.com) “A dynamic visual statement that evolves through movement or change in the display” “… creating the illusion of change by rapidly displaying a series of single frames” (Roncarelli 1988).

4. 4 Slide by Saifon Obromsook & Linda Harjono We Use Animation to… Tell stories / scenarios: cartoons Illustrate dynamic process / simulation Create a character / an agent Navigate through virtual spaces Draw attention Delight

5. 5 Animation Examples Secret Lives of Numbers Viz –http://www.turbulence.org/Works/nums/applet.htmlhttp://www.turbulence.org/Works/nums/applet.html

6. 6 Cartoons in UIs http://www.ok-cancel.com/archives/week_2004_02_06.html

7. 7 Cartoon-Style Animation Main Reference –Chang & Unger, Animation: From Cartoons to the User Interface, UIST ’93 Main ideas –Visual change in the interface can be sudden and unexpected –User can lose track of causal connection between events Classic example: closing/opening windwos This is now remedied via animation in standard windows interfaces People have no trouble understanding transitions in animated cartoons –They grow and deform smoothly –They provide visual cues of what is happening before, during, and after a transition.

8. 8 Cartoon Animation in User Interface Design User Cartooning Principles to Enhance Animations –Replace sudden transitions with smooth ones Some Principles –Solidity (squash and stretch) Motion blur Dissolves Arrival and departure (from off-screen) –Exaggeration Don’t just mimic relatity Anticipation Follow through –Reinforcement Slow in and slow out Arcs Follow through

9. 9 Cartoons vs. UIs What is different? –UIs are interactive –Purpose: Fun vs. getting work done

10. 10 Application using Animation: Gnutellavision Animated Exploration of Graphs with Radial Layout, Ka-Ping Yee, Danyel Fisher, Rachna Dhamija, Marti Hearst, in IEEE Infovis Symposium, San Deigo, CA, October 2001. Visualization of Peer-to-Peer Network –Hosts (with color for status and size for number of files) –Nodes with closer network distance from focus on inner rings –Queries shown; can trace queries

11. 11 Layout - Illustration

12. 12 Animation in Gnutellavision Goal of animation is to help maintain context of nodes and general orientation of user during refocus Transition Paths –Linear interpolation of polar coordinates –Node moves in an arc, not straight lines –Moves along circle if not changing levels –When changing levels, spirals in or out to next ring

13. 13 Animation in Gnutellavision (continued) Transition constraints –Orientation of transition to minimize rotational travel (move former parent away from new focus in same orientation) –Avoid cross-over of edges (to allow users to keep track of which is which)

14. 14 Transition Constraint – Retain Orientation of Edges

15. 15 Transition Constraint – Retain Ordering of Neighbors

16. 16 Gnutellavision (continued) Animation timing –Slow in Slow out timing (allows users to better track movement) Small usability study –Participants preferred version with animation for larger graphs

17. 17 Evaluating Animation in UIs Thomas and Demczuk, Evaluation of Animation Effects to Improve Indirect Manipulation, First Australasian User Interface Conference, January 31 - February 03, 2000 Examining animation effects to provide visual cues to highlight information about changes that come about indirectly. –Direct manipulation: when there is a straightforward mapping from user actions to visible changes –Some changes have no obvious mapping or require too much precision Problem: –Pre and post-positions of graphical objects during an indirect manipulation alignment problem.

18. 18 Thomas & Demczuk Study Addressing two problems –Confusion caused by sudden visual change –Difficulty in predicting final result of a complex change Figure 1: –Not obvious which objects in the top correspond to the ones below Approach: –Cartooning animation techniques

19. 19 Thomas & Demczuk Study

20. 20 Thomas & Demczuk Study

21. 21 Thomas & Demczuk Study Three new visual effects –“Telltale”: objects are animated as if one of the corners is begin dragged by a mouse while the remainder of the object stays behind Shorter than earlier work; only 10% of its distance –Color: used to cue the original position of the graphical object –Wiggle: cue the original position of the object

22. 22 Thomas & Demczuk Study Method: –Measure participants’ ability to remember the placement of the graphical objects –4-8 objects moved after 5 seconds using one of: Telltale Color Wiggle No feedback –Participant then draws original positions Hypotheses: –Animation & color cues will help P’s remember original positions compared to no feedback –P’s will prefer tasks with visual cues

23. 23 Thomas & Demczuk Study Results:

24. 24 Thomas & Demczuk Study Results: –Animation cues helped task –Participants preferred animation cues Negative response to the task with no cues

25. 25 Analying Animation in UIs C. Gonzales, Does Animation In User Interfaces Improve Decision Making? CHI ’96 Improve the definition of animation –“A series of varying images presented dynamically according to user actions in ways that help the user to perceive a continuous change over time and develop a more appropriate mental model of the task.” Literature Review –There is little theoretical or empirical work about how to design, use, and evaluation animation for UIs

26. 26 Gonzales Study 89 participants (undergrads) 2 task domains –Apartment finding (20 alternatives, 11 attributes) –Physics problem (compare sunken & floating objects) 2 Types of Image –Realistic –Abstract 2 Transition Types –Gradual –Abrupt 2 Interactivity Types –Parallel –Sequential

27. 27 Gonzales Study Photo from a 3D model

28. 28 Gonzales Study

29. 29 Gonzales Study

30. 30 Gonzales Study Method –Each session 30-40 minutes –Written instructions and task descriptions Objective measures –Time –Accuracy Subjective measures –Ease of use –Enjoyment

31. 31 Gonzales Study Results –Animation with realistic images more accurate, faster, and easier than abstract –Animation with graduate transitions more accurate and easier than abrupt (not faster) –Animation with parallel control more accurate and more enjoyable. This interacted with task type. –Home finding easier, more enjoyable, more accurate than physics tasks Overall conclusions –Decision making performance is highly contingent on the properies of the animation UI and the task.

32. 32 Animation in Instruction Morrison & Tversky –Julie B. Morrison, Barbara Tversky The (in)effectiveness of animation in instruction CHI ’01 extended abstracts. –Tversky, Morrison, and Betrancourt, Animation: can it facilitate? IJHCS 57, 247-262, 2001. –Found animation did not aid (nor harm) instruction –Potential reasons Hard to perceive (too fast/complex) May be comprehended discretely Lacking appropriate interactivity –They point out that studies that show animation benefits often have extra info over the diagrams My question: if the diagrams have everything the animations do, maybe they are just slow animations?

33. 33 Animation in Instruction Stasko et al. –Did a series of studies on algorithm animation –Intially did not find effects either way –Changed the study Kehoe, Colleen, Stasko, John and Taylor, Ashley, "Rethinking the Evaluation of Algorithm Animations as Learning Aids: An Observational Study", International Journal of Human-Computer Studies, Vol. 54, No. 2, February 2001, pp. 265-284 From lab/exam-oriented to homework-oriented Rich observations of how different tools were used together Perhaps a more appropriate application of viz –For understanding of complicated steps in binomial heap algorithms –Positive results Best when animation and explanation are simultaneous Students need to be able to step through, control speed Students were more accurate and enjoyed the work more with animation.

34. 34 Next Time 3D in visualization