Upload
diliara-nasirova
View
370
Download
1
Embed Size (px)
DESCRIPTION
Lecture notes on HCI design & visual perception prepared for IAT 201 course @SIAT, SFU Spring 2012 semester
Citation preview
Diliara Nasirova | IAT 201 | March 07, 2012
Designing for Humans Human Computer Interaction + Cognition IAT 201 week 8 Lecture Diliara Nasirova
2
Designing for Humans Lecture Outline
1. Color perception and implications
2. Perceptual Organization (Gestalt) and implications
3. Visual Attention (Pop-out) and implications
Diliara Nasirova | IAT 201 | March 07, 2012
3
How do we see? How do our eyes move; focus?
Diliara Nasirova | IAT 201 | March 07, 2012
• Eyes
4
How do we see? How do our eyes move; focus?
Diliara Nasirova | IAT 201 | March 07, 2012
• Brain
5
Color Perception Light Components
• Sir Isaac Newton, 1666 • Light is made up of
separated components that individually produce different color experience.
Diliara Nasirova | IAT 201 | March 07, 2012
6
Color Perception Electromagnetic Spectrum
Diliara Nasirova | IAT 201 | March 07, 2012
7
Color Perception Color Space
• All colors experiences can be described in terms of three dimensions: ■ Hue ■ Saturation (chroma) ■ Lightness (value)
Diliara Nasirova | IAT 201 | March 07, 2012
8
Theories of Color Vision Trichromatic Theory
• Trichromacy: Three color receptors (cones) in retinas that are active at normal light levels
• Young-Helmholtz Trichromatic Theory
Cones in fovea
Diliara Nasirova | IAT 201 | March 07, 2012
9
The Physical Description of Light Spectral Diagram
• The plot shows how light of different wavelengths is absorbed by different receptors (cones).
• Receptors sensitive to ■ Short ■ Medium ■ Long
Diliara Nasirova | IAT 201 | March 07, 2012
10
The Physical Description of Light Spectral Diagram: implications for design
Blue text on a dark background is to be avoided. We have very few short-wavelength sensitive cones in the retina and they are not very sensitive.
Diliara Nasirova | IAT 201 | March 07, 2012
Yellow text on a white background is to be avoided. A pure yellow hue excites both middle- and long wavelength cones, making yellow the lightest of all pure hues.
11
The Physical Description of Light Spectral Diagram: implications for design
Blue text on a dark background is to be avoided. We have very few short-wavelength sensitive cones in the retina and they are not very sensitive.
Diliara Nasirova | IAT 201 | March 07, 2012
Yellow text on a white background is to be avoided. A pure yellow hue excites both middle- and long wavelength cones, making yellow the lightest of all pure hues.
12 Bernhard Riecke
13
Theories of Color Vision Opponent Process Theory
• Ewald Hering Opponent Process Theory
• Six elementary colors arranged as opponent pairs along three axes: ■ black-white, ■ red-green, ■ yellow-blue.
Diliara Nasirova | IAT 201 | March 07, 2012
14
Theories of Color Vision Opponent Process Theory: Color Channels
• Input from the cones is processed into 3 distinct channels
Diliara Nasirova | IAT 201 | March 07, 2012
15
Theories of Color Vision Opponent Process Theory: implications for design
• Chromatic channels carry ~1/3 the amount of detail carried by the black–white channel.
• Purely chromatic differences only are not suitable for displaying any kind of fine detail.
Diliara Nasirova | IAT 201 | March 07, 2012
16
Theories of Color Vision Opponent Process Theory: implications for design
• Shape from shading: Form perception processed mainly through the luminance channel
Floor, Duomo di Siena
Diliara Nasirova | IAT 201 | March 07, 2012
17
Theories of Color Vision Opponent Process Theory: implications for design
Bernhard Riecke
18
Caveats to consider Color Contrast
Diliara Nasirova | PSYC 579 | Jan 26, 2011
• Colors are perceived relative to their overall context
19
Caveats to consider Color Blindness
• ~10% of the male and ~1% of the female population have some form of color vision deficiency. Checkout: www.vischeck.com
Original
Deuteranope (r/g)
Protanope (r/g)
Tritanope (y/b)
20
Caveats to consider Color Blindness
Diliara Nasirova | PSYC 579 | Jan 26, 2011
21
Caveats to consider Color Blindness
Diliara Nasirova | PSYC 579 | Jan 26, 2011
Normal vision: no number Color blind vision: “45”
22
Caveats to consider Color Afterimage
Diliara Nasirova | PSYC 579 | Jan 26, 2011
23
Caveats to consider Color Afterimage
Diliara Nasirova | PSYC 579 | Jan 26, 2011
.
24
Caveats to consider Color Afterimage
• Commercial with color afterimage (makes viewers temporarily see the letters "BMW" when they close their eyes): http://www.huffingtonpost.com/2010/12/16/bmw-ad-vide-burns-logo-into-eyes-_n_797981.html
Diliara Nasirova | PSYC 579 | Jan 26, 2011
25
Application to Visual Design Color for Labeling
• Color can be extremely effective as a
nominal code (labeling)
• 12 colors recommended for use in coding
• Tool to help select good color schemes http://colorbrewer2.org/
• Conventions should be considered as well
Diliara Nasirova | IAT 201 | March 07, 2012
26
Color Perception Conclusion
Diliara Nasirova | IAT 201 | March 07, 2012
27
Perceptual organization How do organize / make sense of the World?
• We are “wired” to see patterns (“binding” / grouping mechanism) • Gestalt principles describe the way we see patterns in visual displays
Diliara Nasirova | IAT 201 | March 07, 2012
28
Gestalt principles (short list for the reference)
Bernhard Riecke
Gestalt Principles of Perceptual Grouping Proximity – If figures are near each other we tend to group them together Similarity – If figures are similar to each other we tend to group them
together Closure– When a familiar figure is interrupted we imagine the rest of the
figure (we finish the picture) Good continuation– We tend to perceive smooth, continuous patterns rather
than discontinuous ones Common Region– Elements located within some boundary tend to be
grouped together Common Fate – Sets of objects that are moving in the same direction and at
the same speed are perceived together (example: marching bands) Connectedness– When they are uniformed and linked, we perceive spots
and lines, etc. as a single unit Simplicity– People tend to group features of a stimulus in a way that
provides the simplest interpretation of the world
Diliara Nasirova | IAT 201 | March 07, 2012
What Gestalt principles can you observe here?
30
Perceptual organization Applications for Design • Intellectually related elements
should also be visually related through different Gestalt principles:
■ Proximity - grouping of items reduces the number of items to be searched
■ Similarity is useful for designing different patterns of elements for users to attend to
Diliara Nasirova | IAT 201 | March 07, 2012
31
Perceptual organization Applications for Design • Principle of visual interfaces
design aligned with Gestalt:
■ Contrast - brings out dominant elements and creates dynamism
■ Repetition - creates consistency and unity
■ Alignment - creates a visual flow and visually connects elements
■ Proximity - groups related elements and separates unrelated ones
Diliara Nasirova | IAT 201 | March 07, 2012
32
Visual Attention What do we have/keep in our mind?
• Dan Simons: The Monkey Business Illusion (1:42 min) ■ http://www.youtube.com/watch?v=IGQmdoK_ZfY
Diliara Nasirova | IAT 201 | March 07, 2012
33
Visual Attention Caveats to Consider • Inattentional Blindness:
• The failure to notice the presence of unattended stimuli, even when they are presented within an observer’s field of view
• Change Blindness: • The failure to see changes if they
are made during a visual disturbance
Simons and Chabris (1999) “Gorillas in Our Midst: Sustained Inattentional Blindness for Dynamic Events”
Diliara Nasirova | IAT 201 | March 07, 2012
34
Visual Attention Caveats to Consider
• Inattentional Blindness: • The failure to notice the presence
of unattended stimuli, even when they are presented within an observer’s field of view
• Change Blindness: • The failure to see changes if they
are made during a visual disturbance
Rensink RA (2002). Internal vs. external information in visual perception.
Diliara Nasirova | IAT 201 | March 07, 2012
35
Visual Attention Change Blindness demo
http://www.cs.ubc.ca/~rensink/flicker/download/Harborside.mov
Diliara Nasirova | IAT 201 | March 07, 2012
36
Visual Attention Change Blindness demo
http://www.cs.ubc.ca/~rensink/flicker/download/Harborside.mov
Diliara Nasirova | IAT 201 | March 07, 2012
37
Visual Attention Change Blindness demo
http://www.cs.ubc.ca/~rensink/flicker/download/Harborside.mov
Diliara Nasirova | IAT 201 | March 07, 2012
38
Visual Attention Change Blindness demo
http://www.cs.ubc.ca/~rensink/flicker/download/Harborside.mov
Diliara Nasirova | IAT 201 | March 07, 2012
39
Taking control of attention Application for Design
• Design of displays robust to change blindness:
■ Minimizing saccades (proximity; important information close together)
■ Minimizing number of dynamic events in the background & foreground
Diliara Nasirova | IAT 201 | March 07, 2012
40
Taking control of attention Application for Design
• Design can take control of attention and make the observer see (or not see) any given part of the display.
• Can be carried out in different ways: ■ High-level interest
Diliara Nasirova | IAT 201 | March 07, 2012
Derren Brown - "Paying with Paper” http://www.youtube.com/watch?v=3Vz_YTNLn6w
41
Taking control of attention Application for Design
• Design can take control of attention and make the observer see (or not see) any given part of the display.
• Can be carried out in different ways: ■ High-level interest ■ Mid-level directives
Diliara Nasirova | IAT 201 | March 07, 2012
42
Taking control of attention Application for Design
• Design can take control of attention and make the observer see (or not see) any given part of the display.
• Can be carried out in different ways: ■ High-level interest ■ Mid-level directives ■ Low-level salience (pop-out)
Diliara Nasirova | IAT 201 | March 07, 2012
43
Pre-attentive (tunable / biased) processing Pop-out effect, example
• Count the number ‘3’ in the following stream of numbers:
1281768756138976546984506985604982826762 9809858458224509856458945098450980943585 9091030209905959595772564675050678904567 8845789809821677654876364908560912949686
Diliara Nasirova | IAT 201 | March 07, 2012
44
Pre-attentive (tunable / biased) processing Pop-out effect, example
• Count the number ‘3’ in the following stream of numbers:
1281768756138976546984506985604982826762 9809858458224509856458945098450980943585 9091030209905959595772564675050678904567 8845789809821677654876364908560912949686
Diliara Nasirova | IAT 201 | March 07, 2012
45
• Count the number ‘3’ in the following stream of numbers:
1281768756138976546984506985604982826762 9809858458224509856458945098450980943585 9091030209905959595772564675050678904567 8845789809821677654876364908560912949686
Diliara Nasirova | IAT 201 | March 07, 2012
Pre-attentive (tunable / biased) processing Pop-out effect, example
46
Pre-attentive (tunable / biased) processing Examples (Hue)
• Where is the red circle? Left or right? • Put your hand up as soon as you see it.
Diliara Nasirova | IAT 201 | March 07, 2012
47
Pre-attentive (tunable / biased) processing Examples (Hue)
• Where is the red circle? Left or right? • Put your hand up as soon as you see it.
Diliara Nasirova | IAT 201 | March 07, 2012
48
• Where is the red circle? Left or right? • Put your hand up as soon as you see it.
Diliara Nasirova | IAT 201 | March 07, 2012
Pre-attentive (tunable / biased) processing Examples (Shape)
49
• Where is the red circle? Left or right? • Put your hand up as soon as you see it.
Diliara Nasirova | IAT 201 | March 07, 2012
Pre-attentive (tunable / biased) processing Examples (Shape)
50
• Where is the red circle? Left or right? • Put your hand up as soon as you see it.
Diliara Nasirova | IAT 201 | March 07, 2012
Pre-attentive (tunable / biased) processing Examples (Hue and Shape)
51
• Where is the red circle? Left or right? • Put your hand up as soon as you see it.
Diliara Nasirova | IAT 201 | March 07, 2012
Pre-attentive (tunable / biased) processing Examples (Hue and Shape)
52
• Where is the red circle? Left or right? • Put your hand up as soon as you see it.
Diliara Nasirova | IAT 201 | March 07, 2012
Pre-attentive (tunable / biased) processing Examples (Hue and Shape)
■ Must perform conjunctive search ■ Conjunction of features (shape and hue) causes it
53
• Where is the boundary?
Diliara Nasirova | IAT 201 | March 07, 2012
Pre-attentive (tunable / biased) processing Examples (Boundary?)
54
• Where is the boundary?
Diliara Nasirova | IAT 201 | March 07, 2012
Pre-attentive (tunable / biased) processing Examples (Boundary?)
55
• Where is the boundary?
Diliara Nasirova | IAT 201 | March 07, 2012
Pre-attentive (tunable / biased) processing Examples (Boundary?)
• Left: Boundary detected based on hue regardless of shape • Right: Cannot do mixed color shapes pre-attentively
56
Pre-attentive (tunable / biased) processing Summary
• What does and does not pop out? Why?
Diliara Nasirova | IAT 201 | March 07, 2012
57
Pre-attentive (tunable / biased) processing Summary
• What does and does not pop out? Why?
Diliara Nasirova | IAT 201 | March 07, 2012
• No pop-out == V1 low level features cannot tune to it • Conjunctive search, several fixations needed (by higher visual areas)
Diliara Nasirova | IAT 201 | March 07, 2012
Taking control of attention Squinting test
Diliara Nasirova | IAT 201 | March 07, 2012
Purpose:
• get a high-level view of the visual hierarchy of your work
• see what a new user would see in the first few seconds of the experience
• checkout “pop-out”, Gestalt
60
References
• “Visual thinking for Design” (2008) by Colin Ware; Morgan Kaufmann, ISBN: 0123708966
• “Information Visualization” (2nd edition), Colin Ware • “The Design of Everyday Things” (2002) by D. Norman; Harper Collins;
ISBN 0465067107 • "The Dynamic Representation of Scenes”, Rensink • "Internal vs External Information in Visual Perception”, Rensink • "Unseen and Unaware: Implications of Recent Research on Failures of
Visual Awareness for Human-Computer Interface Design”, Varakin et al. • “Vision Science”, Stephen E. Palmer
• http://www.pc.rhul.ac.uk/staff/J.Zanker/PS1061/L1/PS1061_1.htm
Diliara Nasirova | IAT 201 | March 07, 2012