1. SIMS 247: Information Visualization and Presentation Marti Hearst
Feb 11, 2004

2. Today High-interaction Graphics Animation
Brushing, linking, highlighting
Animation
Focus on usability studies

3. Standard Techniques It’s often hard to beat:
Line graphs, bar charts
Scatterplots (or Scatterplot Matrix)
Tables
A Darwinian view of visualizations:
Only the fittest survive
We are in a period of great experimentation; eventually it will be clear what works and what dies out.
A bright spot:
Enhancing the old techniques with interactivity
Example: Spotfire
Adds interactivity, color highlighting, zooming to scatterplots
Example: TableLens / Eureka
Adds interactivity and length cues to tables

4. Brushing & Linking
Linking Visually indicating which parts of one data display correspond to that of another
Brushing Allowing the user to move a region (brush) around the data display to highlight groups of data points.
Usability issues:
Selection, de-selection, setting values, appropriate widgets

5. Brushing and Linking
At least two things must be linked together to allow for brushing
select a subset of points
see the role played by this subset of points in one or more other views
Highlighting is key
Example systems
Ahlberg & Sheiderman’s IVEE (Spotfire)
Graham Will’s EDV system

6. Linking types of assist behavior to position played (from Eick & Wills 95)

7. Baseball data: Scatterplots and histograms and bars (from Eick & Wills 95)
how long
in majors
select high
salaries
avg career
HRs vs avg
career hits
(batting ability)
avg assists vs
avg putouts
(fielding ability)
distribution
of positions
played

8. What can be learned from interaction with this baseball data?
Seems impossible to earn a high salary in the first three years
High salaried players have a bimodal distribution (peaking around 7 & 13 yrs)
Hits/Year a better indicator of salary than HR/Year
High paid outlier with low HR and medium hits/year. Reason: person is player-coach
There seem to be two differentiated groups in the put-outs/assists category (but not correlated with salary) Why?

9. Dynamic Queries Principles:
Selecting value ranges of variables via controls with real time feedback in the display
Principles:
Visual presentation of query’s components
Visual presentation of results
Rapid, incremental, and reversible control
Selection by pointing, not typing
Immediate and continuous feedback
Support browsing
Details on demand
Slide adapted from Sarah Waterson

10. Dynamic Queries Tight coupling Example: Interactive Scatterplots
Query components are interrelated in ways that preserve display invariants, reveal state of system
Output of queries can be easily used as input to produce other queries. Eliminate distinction between commands/queries/input and results/tables/output
Example: Interactive Scatterplots
Multiple Names:
Starfield, IVEE, Spotfire, HomeFinder
Slide adapted from Sarah Waterson

11. Interaction with Scatterplots

12. Interaction with Scatterplots

13. Interaction with Scatterplots

14. Example Devise: Jobs to Skill Matching
Slide adapted from Sarah Waterson

15. Home Finder: Text
Slide adapted from Sarah Waterson

16. Home Finder: Map
Slide adapted from Sarah Waterson

17. Pros & Cons Quick, easy, safe, & playful Good for novices & experts
For exploration of large data sets
Simple queries only
So many controls…
Slide adapted from Sarah Waterson

18. More Brushing & Linking Examples
Linking altitude to grass and grain types in Scottish Districts
Districts of the city of Dublin showing areas with high levels of average income
Slide adapted from Sarah Waterson

19. Examples
Periodic Table of the Elements Adjust properties with sliders on the bottom to highlight matching elements. (Ahlberg,Williamson, Shneiderman ’92)
Slide adapted from Sarah Waterson

20. Examples
DynaMap Cervical cancer rates from modify year, state, demographics
Slide adapted from Sarah Waterson

21. Examples

22. 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).
Animation is a "graphic art that occurs in time" (Baecker and Small 1990). It is a dynamic visual statement that evolves through movement or change in the display. In cartography, the most important aspect of animation is that 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). In practice animation is creating the illusion of change by rapidly displaying a series of single frames (Roncarelli 1988). A common example would be the movement of a cartoon character against a background. Movement can also be interpreted as the change in the perspective of the observer as the figure remains still. The variables of animation include both graphical manipulations and sound. A distinction can be made between primary and secondary components of an animation. The primary elements make the animation and the secondary elements, like sound, accentuate the animation. The graphical variables of animation include (after Hayward, p. 9):
1. Size-
The size of an area on a map may be changed to show changes in value. For example, the sizes of countries are made proportionally larger or smaller to depict the amount of oil or coal reserves. An animation can be used to transform the map of oil reserves into the map of coal reserves to show the differences in location of the reserves.
2. Shape-
An area on a map can be made to change in shape. The shape (and size) of Greenland varies as a result of the influence of a map projection. An animation can be used to blend between the two shapes to accentuate the effect of the different projections.
3. Position-
A dot is moved across the map to show change in location. For example, the center of population for the United States has moved consistently to the west, and more recently to the south. An animation can be used to depict this movement through time.
4. Speed-
The speed of movement varies to accentuate the rate of change as, for example, with an animation that depicts the movement in the center of population for the United States.
5. Viewpoint-
A change in the angle of view, could be used to accentuate a particular part of the map as part of an animation. An animation of population change in the United States may use a viewing angle that focuses attention on the western and southern states where significant increases in population have occurred.
6. Distance-
A change in the proximity of the viewer to the scene, as in the case of a perspective view. In cartography the distance variable may be interpreted as a change in scale.
7. Scene-
The use of the visual effects of fade, mix, and wipe to indicate a transition in an animation from one subject to another.
8. Texture, Pattern, Shading, Color-
Graphic variables that may depict a change in perspective for a three-dimensional object. These may also be used to "flash" a part of the map to accentuate a feature.
Slide by Saifon Obromsook & Linda Harjono

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

24. Animation Examples Secret Lives of Numbers Viz

25. Cartoons in UIs

26. 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.

27. 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
Squash and Stretch -- Defining the rigidity and mass of an object by distorting its shape during an action. Timing -- Spacing actions to define the weight and size of objects and the personality of character. Staging -- Presenting an idea so that it is unmistakably clear. Follow Through and Overlapping Action -- The termination of an action and establishing it relationship to the next action. Straight Ahead Action and Pose-To-Pose Action -- The two contrasting approaches to the creation of movement. Secondary Action -- The action of an object resulting from another action. Appeal -- Creating a design or an action that the audience enjoys watching.

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

29. 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

30. Layout - Illustration

31. 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 arc not straight line
Moves along circle if not changing levels (like great circles on earth)
Spirals in or out to next ring

32. Animation (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)  
Animation timing
Slow in Slow out timing (allows users to better track movement)
Small usability study
Participants preferred with animation for larger graphs

33. Transition Constraint - Orientation

34. Transition Constraint - Order

35. 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.

36. Thomas & Demczuk Study Addressing two problems Figure 1: Approach:
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

37. Thomas & Demczuk Study

38. Thomas & Demczuk Study

39. 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

40. Thomas & Demczuk Study Method: Hypotheses:
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

41. Thomas & Demczuk Study
Results:

42. Thomas & Demczuk Study Results: Animation cues helped task
P’s preferred animation cues
Negative response to the task with no cues

43. 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 tha thelp 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

44. Analyzing 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 tha thelp 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

45. 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

46. Gonzales Study
Photo from a 3D model

47. Gonzales Study

48. Gonzales Study

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

50. Gonzales Study Results Overall conclusions
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.

51. 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, , 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?

52. 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
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.

53. Next Time Multidimensional Visualization Readings: TableLens
Parallel Coordinates
Intro paper
Example of usage
Comparative Evaluation of Three Systems