designing for humans lecture

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


3

How do we see? How do our eyes move; focus?


•  Eyes

4

How do we see? How do our eyes move; focus?


•  Brain

5

Color Perception Light Components

•  Sir Isaac Newton, 1666 •  Light is made up of

separated components that individually produce different color experience.


6

Color Perception Electromagnetic Spectrum


7

Color Perception Color Space

•  All colors experiences can be described in terms of three dimensions: ■  Hue ■  Saturation (chroma) ■  Lightness (value)


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


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


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.


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.


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.


14

Theories of Color Vision Opponent Process Theory: Color Channels

•  Input from the cones is processed into 3 distinct channels


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.


16


•  Shape from shading: Form perception processed mainly through the luminance channel

Floor, Duomo di Siena


17


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



21



Normal vision: no number Color blind vision: “45”

22

Caveats to consider Color Afterimage


23



.

24


•  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


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


26

Color Perception Conclusion


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


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


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


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


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


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”


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.


35

Visual Attention Change Blindness demo

http://www.cs.ubc.ca/~rensink/flicker/download/Harborside.mov


36




37




38




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


40


•  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


Derren Brown - "Paying with Paper” http://www.youtube.com/watch?v=3Vz_YTNLn6w

41



•  Can be carried out in different ways: ■  High-level interest ■  Mid-level directives


42



•  Can be carried out in different ways: ■  High-level interest ■  Mid-level directives ■  Low-level salience (pop-out)


43

Pre-attentive (tunable / biased) processing Pop-out effect, example

•  Count the number ‘3’ in the following stream of numbers:

1281768756138976546984506985604982826762 9809858458224509856458945098450980943585 9091030209905959595772564675050678904567 8845789809821677654876364908560912949686


44



1281768756138976546984506985604982826762 9809858458224509856458945098450980943585 9091030209905959595772564675050678904567 8845789809821677654876364908560912949686


45


1281768756138976546984506985604982826762 9809858458224509856458945098450980943585 9091030209905959595772564675050678904567 8845789809821677654876364908560912949686



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.


47

Pre-attentive (tunable / biased) processing Examples (Hue)



48



Pre-attentive (tunable / biased) processing Examples (Shape)

49



Pre-attentive (tunable / biased) processing Examples (Shape)

50



Pre-attentive (tunable / biased) processing Examples (Hue and Shape)

51




52




■  Must perform conjunctive search ■  Conjunction of features (shape and hue) causes it

53

•  Where is the boundary?


Pre-attentive (tunable / biased) processing Examples (Boundary?)

54




55




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


57

Pre-attentive (tunable / biased) processing Summary

•  What does and does not pop out? Why?


•  No pop-out == V1 low level features cannot tune to it •  Conjunctive search, several fixations needed (by higher visual areas)

Taking control of attention Squinting test


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
