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

13
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
Opponent Process Theory: Color Channels
•  Input from the cones is processed into 3 distinct channels

15
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 ﬁne
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
Caveats to consider
Color Blindness

21
Caveats to consider
Color Blindness
Normal vision: no
number
Color blind vision:
“45”

22
Caveats to consider
Color Afterimage

23
Caveats to consider
Color Afterimage
.

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

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
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
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
Visual Attention

37
Visual Attention

38
Visual Attention

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
the display.
■  Mid-level directives

42
the display.
■  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
Examples (Hue)
•  Where is the red circle? Left or right?
•  Put your hand up as soon as you see it.

47
Examples (Hue)

48
Examples (Shape)

49
Examples (Shape)

50
Examples (Hue and Shape)

51

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

53
•  Where is the boundary?
Examples (Boundary?)

54

55
•  Left: Boundary detected based on hue regardless of shape
•  Right: Cannot do mixed color shapes pre-attentively

56
Summary
•  What does and does not pop out? Why?

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

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

Designing for Humans Lecture

Recommended

Recommended

More Related Content

Similar to Designing for Humans Lecture

Similar to Designing for Humans Lecture (20)

Recently uploaded

Recently uploaded (20)

Designing for Humans Lecture