Animation IS 247: Information Visualization and Presentation Saifon Obromsook Linda Harjono

Agenda Introduction Review of Papers When Is Animation Useful (or not)? Fun Examples

Var.html 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). “In cartography, … it depicts something that would not be evident if the maps were viewed individually. In a sense, what happens between each frame is more important than what exists on each frame” (Peterson 1995, 48).

We Use Animation to… Tell stories / scenarios: cartoons Illustrate dynamic process / simulation Create a character / an agent Navigate through virtual 3D space: games, medical Decorate Draw attentions

Var.html Variables of Animation Size Shape Position Speed Viewpoint Distance Scene Texture, Pattern, Shading, Color

Chang & Ungar “Animation: From Cartoons to the User Interface”  Static presentations  sudden change of states  Cartoons animation  make UI easier to understand at a cognitive level by presenting the transitions between states  Self UI  apply cartoon animation to UI

Animation Principles in Cartoon & Self Solidity (squash and stretch)  Solid drawing  Motion blur  Dissolves Exaggeration  Anticipation  Follow through Reinforcement  Slow in and slow out  Arcs  Follow through

Why Cartoon-Style Animation? Cartoons’ theatricality is powerful in communicating to the user. Cartoons can make UI engage the user into its world. The medium of cartoon animation is like that of graphic computers.

Notes Might be more useful for novices to a system Many principles applied in Window 2000/XP Lack of usability testing Self released in August 2001: Download (Mac & Solaris) ease_4.1/release.html ease_4.1/release.html

Mackinlay, Card, and Robertson “Rapid Controlled Movement Through A Virtual 3D Space”  Viewpoint control used to explore a virtual space and to get the right view for analysis & manipulation  Current techniques of targeted viewpoint movement are hard to control  Propose a new technique

3D Viewpoint Movements Move viewpoint through workspace Move objects

Problems with Current POI Techniques Inefficient interactions & movement trajectory Limits on human reach and precision – directly positioning view points Difficulties controlling high velocities – flying viewpoints through workspace  Slow&Sure – takes time  Fast&overshoot – miss the target  Pulse – takes time

Proposed Technique: POI First specify the target Then move the viewpoint logarithmically to the target (in reverse for POI object movement)  Fast in the beginning  Slower as the target becomes closer Rotate viewpoint to face POI Constraints:  Has to keep the virtual body upright  Can’t change object during viewpoint movement

Examples of Navigation in Virtual 3D space From Parallel GraphicsFrom Parallel Graphics (need a VRML client)

Kehoe, Stasko, and Taylor “Rethinking Evaluation of Algorithm Animations as Learning Aids” Why previous studies present no benefits:  No/limited benefits from animation  Benefits are not captured in measurements  Design of experiments prevents benefits to be received Methods:  Combination of qualitative & quantitative  More flexible setting  Metrics: score for each type of questions, time used, usage of materials, qualitative data from observations & interviews

Findings Value is more apparent in interactive situations Most useful to learn procedural operations Make subject more accessible & less intimidating  increase motivation

More Examples of Animation as Learning Aids Sorting algorithm  Users should have control over the animation (speed, stop) With Narration or text - exampleexample Interactive, linking - exampleexample Use metaphor - exampleexample

When is animation worth doing compared to static graphics? To explain ideas that involves changes in time, position, and/or process, especially with multiple objects  Flight paths Flight paths  Damage to the Kursk ? Damage to the Kursk  Ballot ? Ballot

When users’ goals are forgotten Flash Intro Office Agents Distracting ads

Animated Agents Microsoft Agent