IAT 355 Visual Analytics - SFU.ca · • We can also use motion as a display technique to represent data that is either static or dynamic. • The perception of dynamic patterns is

IAT 355 Visual Analytics

Motion and Animation

Motion and Animation | IAT 355

Visual Grammar of diagrams

These slides are largely copied from Colin Ware, Perception for Design!http://ccom.unh.edu/vislab/VisCourse/index.html © 2006

2

We Use Animation to…

•  “… creating the illusion of change by rapidly displaying a series of single frames” (Roncarelli 1988).

•  Tell stories / scenarios: cartoons •  Create a character / an agent •  Draw attention •  Delight

•  Guide a user through transitions in views

•  Illustrate dynamic process / simulation

•  Improve data navigation

•  … •  Display data values •  Visualize metadata •  Emphasise and associate

Motion and Animation | IAT 355 3

Animation to Augment Actions

•  Helps the user retain context, see the response to an action.

•  Examples: •  Closing a window: it no longer just disappears; rather, it leaves

a momentary trail behind for tracking.

•  show


Animation to Indicate State

•  Helps the user understand activity/state and retain patience •  Progress bars.

•  Airline flight search application •  File download application


•  Animation to tell a story


http://www.youtube.com/watch?v=jbkSRLYSojo

Animated Feelings


http://wefeelfine.org/wefeelfine_mac.html

7

Animation to Improve Data Navigation: Gnutellavision •  Animated Exploration of Graphs with Radial Layout, Ka-Ping Yee,

Danyel Fisher, Rachna Dhamija, Marti Hearst, in IEEE Infovis Symposium, San Diego, 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

•  http://www.youtube.com/watch?v=AvfIlcE2xZw


Animation in Instruction

•  Many studies are inconclusive

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

•  Animation can provide insight when the pattern can only be seen aided by change and motion


Animation: Summary

•  Is useful to help indicate changes in state in a visualization.

•  Is captivating, helps tell a story. •  Compelling in process and algorithm visualization

•  Can give the big picture, but maybe not so useful for comprehension of details compared to well-chosen stills.

•  Techniques: •  Cartoon animation techniques are commonly used and seem

natural to understand.


Is that it?

So what is the difference between animation and motion?????

Animation is the manipulation of a series of frames. Motion is the visual percept.

Perceiving Motion

•  when is a series of static images (frames) perceived as motion? •  ~10 frames/ second (10 Hz) – moving (apparent motion) •  ~20 frames/second (20 Hz) – smooth motion

Film : 24 Hz Video: 60 Hz


Why Motion?

•  Perceptually efficient •  strongest cue across entire visual field •  track multiple motions in parallel [Pylyshyn]


Why Motion?

•  Perceptually efficient

•  Interpretatively rich •  Rich disciplines of expression and performance •  Socially meaningful (Heider, Kassin) •  motion conveys structure and behaviour

[Johanssen,Heider,Cutting,Berry]


15

Why Motion?


•  Interpretatively rich

•  “free” display dimension ?


Why Motion?


•  Interpretatively rich

•  “free” display dimension •  grouping effect:

•  conveys relationships [Bartram, Ware, Michotte, Alvarado]



Motion parallax

•  when you look out of the side window of a car or a train, you see close objects translating very fast (bushes) and distant objects passing very slow (mountains) or even being stationary (sun)

•  Motion parallax: the inverse relation between angular speed and distance

18


Motion parallax

•  Demo1: http://psych.hanover.edu/Krantz/MotionParallax/MotionParallax.html

•  Demo 2 http://www.psypress.co.uk/mather/resources/swf/Demo10_2.swf

19

Tracking Multiple Objects

•  We can track up to 4-9 automatically [Yantis 92, Pylyshn 88, Cavanagh 05]


Structure from motion


Biological motion


3:35


Motion as a visual attribute (Common fate)

•  correlation between points: •  frequency, phase or amplitude •  Result: phase is most noticeable

(Ware)

•  Shape is also a strong grouper (Bartram)


23

Common fate


Moving dots are seen as single object

Demo



Motion is Highly Contextual

•  Group moving objects in hierarchical fashion.

a

a b


26


Frame as motion context

•  The stationary Dot is perceived as moving in (a). •  Vection (Riecke)

•  The circle has no effect on this process in (b).

a

a b


27


Patterns in motion (conjecture)

•  We can also use motion as a display technique to represent data that is either static or dynamic.

•  The perception of dynamic patterns is not understood as well as the perception of static patterns.

•  But we are very sensitive to patterns in motion and, if we can learn to use motion effectively, it can be a good way to display certain aspects of data.

28

Which patterns are useful?

•  Features shown to be perceptually powerful are •  Phase (Ware) •  Direction, flicker, velocity (Healey) •  Shape (Bartram)

•  Experiments show motion-based techniques very effective - but there are caveats •  Distraction •  Side effects and involuntary grouping

•  Empirically based guidelines for appropriate use



Potential uses?

•  Emphasis: cognitive tools for managing attention •  events (external dynamic information) •  markers (navigation, history, guides)

•  Grouping and Separating: •  linking heterogeneous, scattered elements (brushing) •  filtering in context

•  Affect: meaning, impressions, emotion, “a sense of”

30


Potential uses?

•  Data: map basic properties onto values (Huber+Healey) •  Phase •  Flicker •  velocity

•  Metadata: •  Uncertainty (Alex Pang) •  Set types (grouping and linking)

•  Relations: causality (Ware,Bartram)

31


Filtering and brushing

•  User configures display to make information easily accessible and show subgroups

•  filtering takes away superfluous data

•  Brushing highlights data points interactively and visually connects arbitrary distributed objects [Baecker and Cleveland87] •  brushing requires its own brushing code (colour) •  problems with colour in periphery

•  Motion can be used for brushing and filtering

32

Recall …

strong grouping effect: things which move together in a similar fashion elicit percept they are a group •  What does it mean to move in a “similar way”? •  Similarity tolerance so that we can cause effect when desired

(grouping); and •  ensure that multiple unrelated moving objects are perceived as

distinct (discrimination). •  (caveat!) Applies to many environments



Brushing with motion

•  Dual task visual search experiments

•  High level of distractors

•  17 motion combinations •  file:///Users/lyn/Research/Motion/Dev/MotionExperiments/Applets/TwoGroups.html

34


Results

•  Motion groups “pop out” •  Motion shape is most effective feature for both ranking and discrimination

•  Circular type is most visually dominant •  Motion directions blur together < 45° and at 180°

•  Large effect for quadrant change •  Motions work for brushing

•  Care has to be taken for involuntary grouping

35

Motions show transitions

•  You can see the change from one state to the next


Animation + Interactivity

Secret Lives of Numbers by Golan Levin •  http://www.turbulence.org/Works/nums/applet.html


Example: Gap Minder Animating scatter plots, and linking them to a story http://www.gapminder.org/ http://www.gapminder.org/world/



Visualizing relationships

•  Preliminary work in representing causality •  with Colin Ware (1999) •  With Emily Yao (2007)

•  Based on Michotte: we see causality automatically (billiard ball)

•  Can we overlay causality information on existing representations like spreadsheets and graphs?

39


A causal graph


Michotte’s Causality Perception



Visual Causal Vectors


42

Causal motion: demo




What we discovered

•  We can successfully use motion cues to identify paths •  If we want to show just the existence of the causal

path, it’s sufficient to animate path and maintain timing (70-160 ms) •  Vector effect

•  However, if we want to add information about the strength of the effect we have to use some kind of node interaction •  Node effect

•  With small node effects, we can identify whether one causal hit is stronger than another •  Phase and grouping effects

•  need to explore design space

45

Affective motion

•  Motion is expressively rich (dance, theatre, mime, ….) •  Trajectory [Tagiuri], interaction [Lethbridge+Ware, Heider+Simmel,

etc], smoothness vs jerkiness, velocity, acceleration, amplitude ??? •  Experiments [Bartram+Nakatan, Lockyer+Bartram i] in what

contributes to making motions meaningful •  Application in ambient, social and therapeutic interfaces and

visualizations •  Map emotions to more abstract meanings •  demo


http://wefeelfine.org/wefeelfine_mac.html

Animation

Helps Hurts Attention Direct Attention Distraction

Object Constancy Change tracking False relations

Causality Cause and effect False agency

Engagement Increase interest “Chart junk”


Cartoon-Style Animation

•  Chang & Unger, Animation: From Cartoons to the User Interface, UIST ’93

•  Main ideas •  Visual change in the interface can be sudden and unexpected

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


Cartooning principles for animation

Character animation [Johnson & Thomas ‘81, Lasseter ’87] •  Squash and stretch

•  Motion blur •  Dissolves •  Arrival and departure (from off-screen)

•  Exaggeration •  Anticipation, Follow-Through •  Slow in/ slow out


Squash and stretch

•  Defines rigidity of material

•  Should maintain constant volume

•  Smoothes fast motion, similar to motion blur


Staging

•  Clear presentation of one idea at a time •  Highlight important actions •  Lead viewers’ eyes to the action •  Motion in still scene, stillness in busy scene


Anticipation

•  Show preparation for an action

•  Uses exaggeration

•  “primes” viewer


Follow-through

•  Emphasizes the finishing of an action


Slow-in, slow-out

•  Space in-betweens to provide slow-in and out

•  Linear interpolation is less pleasing


Andre and Wally B


Principles for Animated Presentations [Zongker & Saliesein, ‘03]

•  Make all movement meaningful •  Avoid squash and stretch, exaggeration

•  Use anticipation and staging

•  DO ONE THING AT A TIME


Issues with animation as communication [Tversky]

•  Difficult to estimate paths and trajectories •  Motion is fleeting and transient •  Cannot simultaneously attend to multiple motions •  Parse motion into events, actions and behaviors •  Misunderstanding and wrongly inferring causality •  Anthropomorphizing physical motion may cause

confusion or lead to incorrect conclusions


Conclusion

•  Motion is under-researched, but evidence suggests its power.

•  Initial usable features include velocity, direction, phase, shape (type) and flicker/blink

•  There are interactions between motion features and static features that need to be investigated •  E.g. brighter dots generate stronger motion signals (Schwartz, 2000?)

http://www.settheory.com/Glass_paper/Kanizsa_observations.html

•  Large design space for animated and affective visualization



Limitation due to Frame Rate

•  Can only show motions that are limited by the Frame Rate.

•  Maximum displacement of λ/2 before perception of reversed direction

•  λ is aperture size •  We can increase by using

additional symbols. •  Limitation on throughput related to

correspondence problem

a

λ

b

c

a


59

Maintaining smooth transitions

•  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


Transition Constraint – Retain Orientation of Edges


Transition Constraint – Retain Ordering of Neighbors


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


Documents

IAT 355 Visual Analytics - SFU.ca · • We can also use motion as a display technique to represent data that is either static or dynamic. • The perception of dynamic patterns is