CS 725/825 Information Visualization Fall 2013 Human Perception Dr. Michele C. Weigle http://www.cs.odu.edu/~mweigle/cs725-f13/ Topic Objectives! Define perception! Distinguish between rods and cones in the human visual system.! Define preattentive processing! Describe four preattentive visual tasks.! Distinguish between a preattentive feature and a feature that cannot be detected preattentively.! Explain why knowledge of the feature hierarchy and visual interference is important for visualization designers.! Explain change blindness and the implication for visualization designers.! Explain why perceptual balance and distinguishability are important characteristics in choosing colors.! Describe the three main types of memory! Explain the implication of Weber's Law for visualizations.! Explain the implication of Stevens' Law for visualizations.! Describe methods that could be used to expand humans' ability to perceive information accurately. 2
Outline! What is Perception?! Physiology! Perceptual Processing! Perception in Visualization Reading Assignment (due today): Ch 3 - Human Perception and Information Processing! Metrics Homework Assignment: http://www.cs.odu.edu/~mweigle/cs725-f13/hw4 Due next Tuesday 3 What is perception?! Recognizing! Organizing! Interpreting! Perception is how we interpret the world around us 4
Visual representations can be misinterpreted WGK, Fig 3.2 WGK, Fig 3.3 5 Our visual system is often not under our full control WGK, Fig 3.6a WGK, Fig 3.6b 6
There's more to our visual system than meets the eye WGK, Fig 3.7a WGK, Fig 3.7b 7 Studying Perception! Measures - used to build a model! Models - predict future outcomes, which can be measured 8
Outline! What is Perception?! Physiology! Perceptual Processing! Perception in Visualization! Metrics 9 Electromagnetic Spectrum By Philip Ronan, Gringer [CC-BY-SA-3.0 (http://creativecommons.org/ licenses/by-sa/3.0)], via Wikimedia Commons 10
Human Eye via Wikimedia Commons 11 How Light Travels Through the Eye http://lvp.lockyersmid.dorset.sch.uk/pluginfile.php/3230/mod_resource/ content/0/content/html/portal_ks2science/pg000886.htm 12
The Retina - Rods and Cones via Wikimedia Commons 13 The Blind Spot http://www.skybrary.aero/index.php/vision_(oghfa_bn) 14
Eye Movements Smooth Pursuit Saccadic "Types of Eye Movements and Their Functions", Neuroscience. 2nd edition. Purves D, Augustine GJ, Fitzpatrick D, et al., editors. Sunderland (MA): Sinauer Associates; 2001. 15 Outline! What is Perception?! Physiology! Perceptual Processing! Perception in Visualization! Metrics 16
One Model of Perceptual Processing! Three stage process! Parallel extraction of low-level properties of scene! Pattern perception! Sequential goal-directed processing Stage 1 Features Stage 2 "What" system "Action" system Stage 3 Visual Working Memory Ware, Information Visualization 17 Preattentive Processing! How does human visual system analyze images?! Some things seem to be done preattentively, without the need for focused attention! Generally less than 200-250 ms (eye movements take 200 ms)! Seems to be done in parallel by low-level vision system 18
How Many 3s? 128176875613897654698450698560498282676 298098584582245098564589450984509809435 859091030209905959595772564675050678904 567884578980982167765487636490856091294 9686 19 How Many 3s? 128176875613897654698450698560498282676 298098584582245098564589450984509809435 859091030209905959595772564675050678904 567884578980982167765487636490856091294 9686 20
Example! Determine if a red circle is present 21 Hue http://www.csc.ncsu.edu/faculty/healey/pp/index.html! Can be done rapidly (preattentively) by people! Surrounding objects called distractors 22
Example! Determine if a red circle is present 23 Shape http://www.csc.ncsu.edu/faculty/healey/pp/index.html! Can be done preattentively 24
Example! Determine if a red circle is present 25 Hue and Shape http://www.csc.ncsu.edu/faculty/healey/pp/index.html! Cannot be done preattentively! Must perform a sequential search! Conjunction of features (shape and hue) causes it 26
Example! Is there a boundary in the display? 27 Hue and Shape - Boundary Edition http://www.csc.ncsu.edu/faculty/healey/pp/index.html! Left: Can be done preattentively since each group contains one unique feature! Right: Cannot (there is a boundary!) since the two features are mixed (hue and shape) 28
Example! Is there a boundary in the display? 29 Hue vs. Shape http://www.csc.ncsu.edu/faculty/healey/pp/index.html! Both can be detected preattentively because of difference in hue 30
Christopher Healey at NC State! Nice on-line tutorial, table of preattentive feature examples, and example applet http://www.csc.ncsu.edu/faculty/healey/pp/index.html 31 Potential Preattentive Features http://www.csc.ncsu.edu/faculty/healey/pp/index.html#table_1 32
Potential Preattentive Features http://www.csc.ncsu.edu/faculty/healey/pp/index.html#table_1 33 Potential Preattentive Features http://www.csc.ncsu.edu/faculty/healey/pp/index.html#table_1 34
Preattentive Visual Tasks! Target detection! is something there?! Boundary detection! can the elements be grouped?! Region tracking! is there a set of items moving together?! Counting and estimation! how many elements of a certain type are present? 35 Theories of Preattentive Processing! Five theories of preattentive processing! Critical role that the viewer's state of mind plays in determining what is seen! Presents studies in which human perception has influenced the development of new methods in visualization and graphics 36
Postattentive Vision http://www.csc.ncsu.edu/faculty/healey/pp/index.html 37 Feature Hierarchy http://www.csc.ncsu.edu/faculty/healey/pp/index.html 38
Change Blindness 39 Gestalt Laws, or Principles of Perceptual Organization http://en.wikipedia.org/wiki/file:gestalt_principles_composition.jpg 40
Gestalt Laws! Proximity! Things close together are perceptually grouped together! Similarity! Similar elements get grouped together! Connectedness! Connecting different objects by lines unifies them! Continuity! More likely to construct visual entities out of smooth, continuous visual elements Figures from wikipedia. http://psychology.about.com/, and http://www.vanseodesign.com/ 41 Gestalt Laws! Symmetry! Symmetrical patterns are perceived more as a whole! Closure! A closed contour is seen as an object! Parallelism! Elements that are parallel to each other appear more related than elements not parallel to each other! Figure & Ground! Figure is foreground, ground is behind Figures from wikipedia, http://www.vanseodesign.com/ 42
Outline! What is Perception?! Physiology! Perceptual Processing! Perception in Visualization! Metrics 43 Color Goals! Perceptual balance! Distinguishability! Flexibility 44
Color Models - RGB http://ww.colorcodehex.com/rgb-colors.jpeg 45 Color Models - HSV http://resumbrae.com/ub/dms423_f07/04/! Hue - what people think of as color! Saturation - intensity, ranges hue!" gray! Value (or brightness) - light/dark, ranges black!" white 46
Color Models - CIE LUV http://en.wikipedia.org/wiki/cieluv 47 Color Models - CIE Lab! L * a * b! L = luminance! a = red to green! b = blue to yellow Images from http://www.colorcodehex.com/color-model.html and http://www.cmpg.org/ 48
Texture! Appears to be combination of! orientation! scale! contrast 49 Weigle et al. (with Enns, Healey), Proceedings of Graphics Interface, 2000. Motion Flicker Direction of Motion Velocity of Motion http://www.csc.ncsu.edu/faculty/healey/pp/index.html 50
Memory Issues! sensory memory! "muscle memory"! short-term memory! limited to 30 seconds! chunking! long-term memory! theoretically limitless! access is slow and unreliable 51 Can you read this? Rinadeg Oedrr Aoccdrnig to a rscarhee at Cigdmabre Uinervtisy, it deosn't mtetar in waht oredr the ltteers in a wrod are, the olny iprmoatnt tihng is taht the fnst and lsat ltteer be at the rghit pclae. The rset can be a taotl mses and you can sit11 raed it wouthit porbelm. Tihs is bcuseae the huamn mnid deos not raed ervey lteter by istlef, but the wrod as a wlohe. 52
Outline! What is Perception?! Physiology! Perceptual Processing! Perception in Visualization! Metrics 53 Human Limitations! What graphical entities can be accurately measured by humans?! How many distinct entities can be used in a visualization without confusion?! With what level of accuracy do we perceive various primitives?! How do we combine primitives to recognize complex phenomena?! How should color be used to present information? 54
The Magical Number Seven http://www.musanim.com/miller1956/! Used information theory to explain results! number of levels that can be perceived mapped to bits of information! levels = 2 bits 55 Absolute Judgment of 1D Stimuli! Position on a line - 10-15 levels! Sizes of squares - 4-5 levels! Color - 10 levels of hue, 5 levels of brightness! Line length - 6-8 levels! Line orientation - 7-10 levels! Line curvature - 4.5 levels! In general, only about 6-7 levels of data value with accuracy for 1D signals 56
Absolute Judgment of Multidimensional Stimuli! Unfortunately, this is not additive! Dot in a square - 24 levels! Hue and saturation - 12 levels! additive - 39 levels! Size, brightness, and hue - 17 levels! additive - 194 levels 57 Relative Judgment WGK, Figs 3.33 a,b 58
Perception Accuracy - Tested length area angle volume slope hue position on common scale position on nonaligned scales WGK, Fig 3.34 59 Perception Accuracy - Increasing Error position on common scale position on nonaligned scales length angle, slope area volume 60 hue, saturation, density WGK, Fig 3.34
Two Laws Weber's Law Stevens' Law WGK, Fig 3.35 61 So, what can we do?! Require relative judgments instead of absolute! tick marks, grid lines can help! Increase dimensionality! but, only up to a point! Reconfigure problem! series of absolute judgments instead of simultaneous 62
Recoding! Short-term memory chunks data! ~6 chunks of varying complexity! Remember these 5 numbers:! 0 1 0 1 1! Now, remember these 5 numbers:! 01 10 11 00 10 63 Role of Focus and Expectation http://www.csc.ncsu.edu/faculty/healey/pp/index.html 64
Was there a red horizontal? 65 Role of Focus and Expectation http://www.csc.ncsu.edu/faculty/healey/pp/index.html 66
Outline! What is Perception?! Physiology! Perceptual Processing! Perception in Visualization! Metrics 67