IAT 355 Visual Analytics. Motion and Animation

Transcription

1 IAT 355 Visual Analytics Motion and Animation

2 Visual Grammar of diagrams These slides are largely copied from Colin Ware, Perception for Design!

3 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 3

4 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 4

5 Animation to Indicate State Helps the user understand activity/state and retain patience Progress bars. Airline flight search application File download application 5

6 Animation to tell a story 6

7 Animated Feelings 7

8 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 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 8

9 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 9

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

11 Is that it?

12 So what is the difference between animation and motion????? Animation is the manipulation of a series of frames. Motion is the visual percept.

13 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 13

14 Why Motion? Perceptually efficient strongest cue across entire visual field track multiple motions in parallel [Pylyshyn] 14

15 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

16 Why Motion? Perceptually efficient Interpretatively rich free display dimension? 16

17 Why Motion? Perceptually efficient Interpretatively rich free display dimension grouping effect: conveys relationships [Bartram, Ware, Michotte, Alvarado] 17

18 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

19 Motion parallax Demo1: Demo

20 Tracking Multiple Objects We can track up to 4-9 automatically [Yantis 92, Pylyshn 88, Cavanagh 05] 20

21 Structure from motion 21

22 Biological motion 3:35 22

23 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) These slides are largely copied from Colin Ware, Perception for Design!

24 Common fate 24

25 Moving dots are seen as single object Demo 25

26 Motion is Highly Contextual a b Group moving objects in hierarchical fashion. 26 These slides are largely copied from Colin Ware, Perception for Design!

27 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 b These slides are largely copied from Colin Ware, Perception for Design!

28 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

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

30 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

31 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

32 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

33 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 33

34 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

35 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

36 Motions show transitions You can see the change from one state to the next 36

37 Animation + Interactivity Secret Lives of Numbers by Golan Levin 37

38 Example: Gap Minder Animating scatter plots, and linking them to a story

39 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

40 A causal graph

41 Michotte s Causality Perception These slides are largely copied from Colin Ware, Perception for Design!

42 Visual Causal Vectors These slides are largely copied from Colin Ware, Perception for Design!

43 Causal motion: demo 43

44 44

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

46 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 46

47 Animation Helps Hurts Attention Direct Attention Distraction Object Constancy Change tracking False relations Causality Cause and effect False agency Engagement Increase interest Chart junk 47

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

49 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 49

50 Squash and stretch Defines rigidity of material Should maintain constant volume Smoothes fast motion, similar to motion blur 50

51 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 51

52 Anticipation Show preparation for an action Uses exaggeration primes viewer 52

53 Follow-through Emphasizes the finishing of an action 53

54 Slow-in, slow-out Space in-betweens to provide slow-in and out Linear interpolation is less pleasing 54

55 Andre and Wally B 55

56 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 56

57 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 57

58 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?) Kanizsa_observations.html Large design space for animated and affective visualization 58

59 Limitation due to Frame Rate λ a 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 b c These slides are largely copied from Colin Ware, Perception for Design!

60 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 60

61 Transition Constraint Retain Orientation of Edges 61

62 Transition Constraint Retain Ordering of Neighbors 62

63 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 63