• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Information visualization: perception and principles
 

Information visualization: perception and principles

on

  • 805 views

 

Statistics

Views

Total Views
805
Views on SlideShare
756
Embed Views
49

Actions

Likes
0
Downloads
32
Comments
0

1 Embed 49

http://pointcarre.vub.ac.be 49

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Information visualization: perception and principles Information visualization: perception and principles Presentation Transcript

    • Information visualization lecture 2 perception and principles Katrien Verbert Department of Computer Science Faculty of Science Vrije Universiteit Brussel katrien.verbert@vub.ac.be 27/02/14 pag. 1
    • perception how our brain perceives and interprets visuals 27/02/14 pag. 2
    • Moving Illusions h"p://www.youtube.com/watch?v=Iw8idyw_N6Q   Watch  00:00  –  07:23     27/02/14 pag. 5
    • pre-attentive processing How do we make things pop-out? 27/02/14 pag. 6
    • Where is Waldo? 27/02/14 pag. 7
    • How many 3’s? 1281768756138976546984506985604982826762 9809858458224509856458945098450980943585 9091030209905959595772564675050678904567 8845789809821677654876364908560912949686 27/02/14 pag. 8
    • How many 3’s? 1281768756138976546984506985604982826762 9809858458224509856458945098450980943585 9091030209905959595772564675050678904567 8845789809821677654876364908560912949686 27/02/14 pag. 9
    • Pre-attentive vs. attentive Differences in speed of perception Pre-attentive ≤500 ms ≤10 ms parallel processing Slide  adapted  from  Michael  Porath       Attentive task individual object >500 ms >10 ms sequential processing 27/02/14 pag. 10
    • Pre-attentive processing “An understanding of what is processed pre-attentively is probably the most important contribution that visual science can make to data visualization” (Ware, 2004, p. 19) 27/02/14 pag. 11
    • Different shapes can often pop out Shape 27/02/14 pag. 12
    • A single lack of enclosure can quickly be identified pre-attentively Enclosure 27/02/14 pag. 13
    • Pre-attentive processing: ‘things that pop out’ Orientation The  ‘odd  one  out’  can  quickly  be   idenJfied,  by  pre-­‐a"enJve  processing     27/02/14 pag. 14
    • A different colour can be pre-attentively identified Colour 27/02/14 pag. 15
    • Did you notice the red square? 27/02/14 pag. 16
    • With conjunction encoding the red square is not pre-attentively identified 27/02/14 pag. 17
    • But multiple pop-outs are possible Usage load Forced termination rate Number of users Direction of growth Predominant frequency New call blockage rate Call signal strength RepresentaJon  of  a"ributes  associated  with  a  mobile  telephone  network  cell  [Irani  and   pag. 18 27/02/14 Eskicioglu,  2003]  
    • Multiple pop-outs RepresentaJon  of  a"ributes   associated  with  a  network  of   mobile  telephone  cells,   averaged  over  one  hour   27/02/14 pag. 19
    • 27/02/14 pag. 20
    • Pre-attentive features 27/02/14 pag. 21
    • Where is Waldo? Slide  adapted  from  Michael  Porath       27/02/14 pag. 22
    • Where is Waldo? Slide  adapted  from  Michael  Porath       27/02/14 pag. 23
    • encoding methods 27/02/14 pag. 24
    • Magnitude estimation How much bigger is the lower bar? Slide  adapted  from  Michael  Porath       27/02/14 pag. 25
    • Magnitude estimation How much bigger is the lower bar? X  4   Slide  adapted  from  Michael  Porath       27/02/14 pag. 26
    • Magnitude estimation How much bigger is the right circle? Slide  adapted  from  Michael  Porath       27/02/14 pag. 27
    • Magnitude estimation How much bigger is the right circle? X  5   Slide  adapted  from  Michael  Porath       27/02/14 pag. 28
    • Magnitude estimation How much bigger is the right circle? Slide  adapted  from  Michael  Porath       27/02/14 pag. 29
    • Magnitude estimation How much bigger is the right circle? X  9   Slide  adapted  from  Michael  Porath       27/02/14 pag. 30
    • Apparent magnitude curves Slide  adapted  from  Michael  Porath       h"p://makingmaps.net/2007/08/28/ perceptual-­‐scaling-­‐of-­‐map-­‐symbols/   27/02/14   pag. 31
    • Which one is more accurate? Slide  adapted  from  Michael  Porath       27/02/14 pag. 32
    • Perceptual or apparent scaling Compensating magnitude to match perception Slide  adapted  from  Michael  Porath       27/02/14 pag. 33
    • Accuracy of judgement of encoded quantitative data Position Most accurate Length Angle Slope Area Volume Colour Density Least accurate Cleveland  and  McGill  (1984)     27/02/14 pag. 34
    • Association The marks can be perceived as SIMILAR Size Value Texture Colour Orientation Shape Selection Order The marks are perceived as DIFFERENT, forming families The marks are perceived as ORDERED Quantity The marks are perceived as PROPORTIONAL to each other Choice  of  encoding     •  Bertin’s guidance •  suitability of various encoding methods •  to support common tasks  
    • Example application that uses different encoding methods User query Osteoporosis Prevention Research First  the  user  specifies  three  topics  of  interest   27/02/14 pag. 36
    • TileBar: which encoding methods are used for which purposes? ‘Recent  advances  in  the  world  of  drugs’       Fortunately, scientific knowledge about this desease has grown, and there is reason for hope. Research is revealing that prevention may be achieved through estrogen replacement therapy for older women and through adequate calcium intake and regular weight-bearing exercise     for people of all ages. New approaches to diagnosis and treatment are also under active investigation. For this work to continue and for use to take advantage of the knowledge we have already gained, public awareness of osteoporosis and of the importance of further scientific research is essential.       (top)  The  TileBar  representaJon  of  the  relevance  of  paragraphs  to  the  topic  words:   pag. 37 27/02/14 (bo"om)  a  selected  paragraph  with  topic  words  highlighted  
    • Quantitative, ordinal and categorical data Quantitative Position Length Angle Slope Area Volume Density Shape Treble Ordinal Categorical Position Density Colour saturation Colour hue Texture Connection Containment Length Angle Slope Area Volume Position Colour hue Texture Connection Containment Density Colour saturation Shape Length Angle Slope Area Volume Bass Guidance  for  the  encoding  of  quanJtaJve,  ordinal  and  categorical  data  (Mackinlay  1986)   pag. 38 27/02/14  
    • Gestalt grouping 27/02/14 pag. 39
    • h"p://www.youtube.com/watch?v=ZWucNQawpWY   27/02/14 pag. 40
    • Principles: figure and ground Slide  adapted  from  Michael  Porath       27/02/14 pag. 41
    • Principles: proximity Slide  adapted  from  Michael  Porath       27/02/14 pag. 42
    • Principles: proximity Slide  adapted  from  Michael  Porath       27/02/14 pag. 43
    • Principles: similarity Slide  adapted  from  Michael  Porath       27/02/14 pag. 44
    • Principles: connectedness Slide  adapted  from  Michael  Porath       27/02/14 pag. 45
    • Principles: continuity Slide  adapted  from  Michael  Porath       27/02/14 pag. 46
    • Principles: continuity Slide  adapted  from  Michael  Porath       27/02/14 pag. 47
    • Principles: continuity Slide  adapted  from  Michael  Porath       27/02/14 pag. 48
    • Principles: closure Slide  adapted  from  Michael  Porath       27/02/14 pag. 49
    • Principles: closure Slide  adapted  from  Michael  Porath       27/02/14 pag. 50
    • Principles: closure Slide  adapted  from  Michael  Porath       27/02/14 pag. 51
    • Principles: closure Slide  adapted  from  Michael  Porath       27/02/14 pag. 52
    • Principles: smallness Slide  adapted  from  Michael  Porath       27/02/14 pag. 53
    • Principles: smallness Slide  adapted  from  Michael  Porath       27/02/14 pag. 54
    • Principles: surroundedness Slide  adapted  from  Michael  Porath       27/02/14 pag. 55
    • Principles: surroundness Slide  adapted  from  Michael  Porath       27/02/14 pag. 56
    • Guideline Use a combination of closure, common region and layout to ensure that data entities are represented by graphical patterns that will be perceived as figure, not ground. 27/02/14 pag. 57
    • Application h"p://www.youtube.com/watch?v=LlzuJqZ797U  (watch  3:39-­‐5:09)     27/02/14 pag. 58
    • Color 27/02/14 pag. 59
    • Find the cherries “Color  helps  us  break  camouflage”   [Ware,  2013]   Slide  adapted  from  S.  Hsiao   27/02/14 pag. 60
    • Snow white may be color blind? Slide  adapted  from  S.  Hsiao   27/02/14 pag. 61
    • Ready to eat Slide  adapted  from  S.  Hsiao   27/02/14 pag. 62
    • How we see color h"p://www.youtube.com/watch?v=l8_fZPHasdo     27/02/14 pag. 63
    • Our eyes 27/02/14 pag. 64
    • Trichromacy Theory: 3 color cones sensitivity functions Slide  adapted  from  S.  Hsiao   27/02/14 pag. 65
    • 10%CAUCASIAN MALE IS COLOR BLIND! Slide  adapted  from  S.  Hsiao   27/02/14 pag. 66
    • Color Tests •  The individual with normal color vision will see a 5 revealed in the dot pattern. •  An individual with Red/Green (the most common) color blindness will see a 2 revealed in the dots. http://www.visibone.com/colorblind/ Information Visualization Course, Katy Börner, Indiana University 27/02/14 pag. 67
    • Color blindness 27/02/14 pag. 68
    • We often take color for granted •  How do blind people learn colours? •  How do colourblind people drive? Slide  adapted  from  S.  Hsiao   27/02/14 pag. 69
    • Color blindness: consequences 27/02/14 pag. 70
    • Colors have meaning! 27/02/14 pag. 71
    • 27/02/14 pag. 72
    • How to use colors •  hue: categorical •  saturation: ordinal and quantitative •  luminance: ordinal and quantitative 27/02/14 pag. 73
    • Sequential color schemes 27/02/14 pag. 74
    • Diverging color schemes 27/02/14 pag. 75
    • Qualitative color schemes 27/02/14 pag. 76
    • ColorBrewer2.org 27/02/14 pag. 77
    • Adobe Kuler: Focus on aesthetics Good  Color  Scales     h"p://kuler.adobe.com   pag. 78 27/02/14  
    • Good or bad use of colors? 27/02/14 pag. 79
    • h"p://eagereyes.org/basics/rainbow-­‐color-­‐map     27/02/14 pag. 80
    • Interaction of color 27/02/14 pag. 81
    • Interaction of color 27/02/14 pag. 82
    • Relative differences 27/02/14 pag. 83
    • Interaction of color 27/02/14 pag. 84
    • Simultaneous contrast 27/02/14 pag. 85
    • Simultaneous contrast 27/02/14 pag. 86
    • Simultaneous contrast 27/02/14 pag. 87
    • Simultaneous contrast 27/02/14 pag. 88
    • Simultaneous brightness contrast [Ware,  1988]   27/02/14 pag. 89
    • The Chevreul illusion 27/02/14 pag. 90
    • Simultaneous contrast and errors in reading maps Gravity  map  of  the  North  AtlanJc  Ocean.  Large  errors  occur  when  gray-­‐scale  maps  are  read   using  a  key                20%  error  of  the  enJre  scale  [Ware,  1988]     27/02/14 pag. 91
    • Guideline Avoid using gray scales as a method for representing more than a few (two to four) numerical values [Ware, 2013] 27/02/14 pag. 92
    • All colors are equal …but they are not perceived as the same 27/02/14 pag. 93
    • All colors are equal …but they are not perceived as the same Luminance Value Perceived lightness 27/02/14 pag. 94
    • Luminance values Src:  h>p://www.workwithcolor.com/color-­‐luminance-­‐2233.htm   27/02/14 pag. 95
    • Color decisions need to consider luminance / contrast Slide  adapted  from  S.  Hsiao   27/02/14 pag. 96
    • Test a composition for contrast h"p://www.workwithcolor.com/to-­‐black-­‐and-­‐white-­‐picture-­‐converter-­‐01.htm     27/02/14 pag. 97
    • HSL color picker h"p://www.workwithcolor.com/hsl-­‐color-­‐picker-­‐01.htm     27/02/14 pag. 98
    • Haloing effect •  Enhancing the edges •  Luminance contrast as a highlighting method [Ware,  2013]   Slide  adapted  from  S.  Hsiao   27/02/14 pag. 99
    • Saturation Slide  adapted  from  S.  Hsiao   27/02/14 pag. 100
    • Highlighting: make small subset clearly distinct from the rest same principles apply to the highlighting of text or other features Slide  adapted  from  S.  Hsiao   27/02/14 pag. 101
    • Guidelines •  Use more saturated colors for small symbols, thin lines, or small areas. •  Use less saturated colors for large areas. 27/02/14 pag. 102
    • Cross-cultural naming More than 100 languages showed that primary color terms are consistent across cultures (Berlin & Kay, 1969) Slide  adapted  from  S.  Hsiao   27/02/14 pag. 103
    • Ware’s Recommended Colors for Labeling Red, Green, Yellow, Blue, Black, White, Pink, Cyan, Gray, Orange, Brown, Purple. The entire set corresponds to the eleven color names found to be the most common in a cross-cultural study, plus cyan (Berlin and Kay) Slide  adapted  from  Terrance  Brooke   27/02/14 pag. 104
    • Guideline Use easy-to-remember and consistent color codes in color pallets Red, green, blue and yellow are hard-wired into the brain as primaries. If it is necessary to remember a color coding, these colors are the first that should be considered. 27/02/14 pag. 105
    • Chromostereopsis Slide  adapted  from  S.  Hsiao   27/02/14 pag. 106
    • How we used to think it works Old  model:  Light  of  different  wavelengths  is  focused  differently  by  the  eye.   Src:  h>p://luminanze.com/wriMngs/chromostereopsis_in_ux_design.html   27/02/14 pag. 107
    • What we know   Current  model:  Light  of  different  wavelengths  is  refracted  differently  by  the  eye.   Src:  h>p://luminanze.com/wriMngs/chromostereopsis_in_ux_design.html   27/02/14 pag. 108
    • chromostereopsis If we use in the same image two far pure colors the eye is not able to focus both of them 27/02/14 pag. 109
    • Easy to read? 27/02/14 pag. 110
    • Easy to read? 27/02/14 pag. 111
    • How to use chromostereopsis 27/02/14 pag. 112
    • How to use chromostereopsis 27/02/14 pag. 113
    • Good or bad? 27/02/14 pag. 114
    • Good or bad? 27/02/14 pag. 115
    • Solution: use colors that are less saturated 27/02/14 pag. 116
    • Guidelines •  Beware of interactions between some colors (e.g. red/blue) •  Use can be good: for highlighting, creating 3D effect, etc. •  Resolve if unintended by: –  using  colors  that  are  less  saturated     –  surrounding  the  contrasMng  colors  with  a  background  that  moderates  the   effect  of  their  different  wavelengths   –  separa.ng  the  contrasMng  colors.     h>p://desdag.blogspot.be/2012/05/chromostereopsis-­‐design-­‐fails-­‐due-­‐to.html   27/02/14 pag. 117
    • We are drawn by colors! 27/02/14 pag. 118
    • Do different colors affect mood? h"p://www.factmonster.com/spot/colors1.html     27/02/14 pag. 119
    • Moodjam.com 27/02/14 pag. 120
    • some examples 27/02/14 pag. 121
    • Good or bad us of colors? 27/02/14 pag. 122
    • Good or bad use of colors? 27/02/14 pag. 123
    • Good or bad? 27/02/14 pag. 124
    • Good or bad? 27/02/14 pag. 125
    • 27/02/14 pag. 126
    • Good or bad use of colors? 27/02/14 pag. 127
    • 27/02/14 pag. 128
    • 27/02/14 pag. 129
    • Some take away messages •  •  •  •  •  •  •  •  Color is excellent for labeling and categorization. (However, only small number of colors can be used effectively) To show detail in visualization, always have considerable luminance contrast between background and foreground. Simultaneous contrast with background colors can dramatically alter color appearance, making color look like another. Beware of interaction between colors (e.g. red/blue). Small color coded objects should be given high saturation. Red, green, blue and yellow are hard-wired into the brain as primaries. If it is necessary to remember a color coding, these colors are the first that should be considered. Remember that colors have meanings: use appropriate color palettes for qualitative, quantitative and ordinal data. Respect the color blind. 27/02/14 pag. 130
    • Readings Required •  Harrower, M., & Brewer, C. A. (2003). ColorBrewer. org: an online tool for selecting colour schemes for maps. Cartographic Journal, The, 40(1), 27-37. Available at: http://www.albany.edu/faculty/fboscoe/papers/harrower2003.pdf Optional •  Ware, C. (2013). Information visualization: Perception for design. Chapter 3: Lightness, Brightness, Contrast, and Constancy. Available at: http://www.diliaranasirova.com/assets/PSYC579/pdfs/01.1Ware.pdf   27/02/14 pag. 131
    • Optical Illusions •  Joy of Visual Perception by Pete Kaiser 132 Information Visualization Course, Katy Börner, Indiana University 27/02/14 pag. 132
    • Questions? 27/02/14 pag. 133
    • References •  Pourang Irani and Rasit Eskicioglu. (2003). A Space-filling Visualization Technique for Cellular Network Data. In International Conference on Knowledge Management (IKNOW-03), 115-120 http://hci.cs.umanitoba.ca/assets/publication_files/2003Irani-IKNOW-CellularViz.pdf •  Ware, C. (2013). Information visualization: Perception for design. Chapter 3-5 •  Mackinlay, J. (1986). Automating the design of graphical presentations of relational information. ACM Transactions on Graphics (TOG), 5(2), 110-141. 27/02/14 pag. 134
    • evaluation experiment 27/02/14 pag. 135
    • learning dashboards: visualizing emotion, time spent and distractions 27/02/14 pag. 136
    • Learning analytics dashboards Govaerts,  S.,  Verbert,  K.,  Duval,  E.,  Abelardo,  P.  (2012).  The  student  acJvity  meter  for  awareness  and   self-­‐reflecJon.  In  :  CHI  EA  '12   27/02/14 pag. 137
    • h"p://bit.ly/I7hve   Santos JL, Verbert K, Govaerts S, Duval E (2013) Addressing learner issues with StepUp!: an Evaluation. In 138 27/02/14 pag. 138 Proceedings of LAK 13
    • GLASS: visualization of emotions 27/02/14 pag. 139
    • Data collection •  https://docs.google.com/forms/d/ 1gHwVWHZLzWdSz1F37jA1Gungrl56bT215M6FYW3YqGY/ viewform Or •  bit.ly/N6JTyD Anonymous! Choose your own ID. •  Report data once a week: preferably on Thursdays. 27/02/14 pag. 140
    • Dashboard •  Dashboard that visualizes your data and enables comparison with data from other students will be made available. •  Login with the same ID as the one you use for data collection. •  Will be made available one of the following weeks. 27/02/14 pag. 141
    • participation much appreciated! 27/02/14 pag. 142