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

Designing for Humans Lecture Outline

1.  Color perception and implications

2.  Perceptual Organization (Gestalt) and implications

3.  Visual Attention (Pop-out) and implications

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

•  Eyes

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

•  Brain

Color Perception Light Components

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

separated components that individually produce different color experience.

Color Perception Electromagnetic Spectrum

Color Perception Color Space

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

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

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

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.

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

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.

Theories of Color Vision Opponent Process Theory: Color Channels

•  Input from the cones is processed into 3 distinct channels

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.

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

Floor, Duomo di Siena

Bernhard Riecke

Caveats to consider Color Contrast

Diliara Nasirova | PSYC 579 | Jan 26, 2011

•  Colors are perceived relative to their overall context

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)

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

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

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

Color Perception Conclusion

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

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?

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

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

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

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”

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.

Visual Attention Change Blindness demo

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

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

•  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

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

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

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

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

1281768756138976546984506985604982826762 9809858458224509856458945098450980943585 9091030209905959595772564675050678904567 8845789809821677654876364908560912949686

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.

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

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

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

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

•  Where is the boundary?

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

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

Pre-attentive (tunable / biased) processing Summary

•  What does and does not pop out? Why?

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

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

Design

Designing A.I. - Week 1 - Intro Lecture

Designing Interactions / Experiences: Lecture #04

Lecture 2 Humans and Space Weather

Lecture 11 Designing Trusted Operating Systems

CS 268: Lecture 24 Designing for the Future

Lecture 12.2 Loop Invariants for Designing Array Algorithms

Designing Interactions / Experiences: Lecture #02

Advance Web Designing - Lecture 02 / 30

DESIGNING WEBSITE ARCHITECTURE WITH REAL HUMANS IN … · DESIGNING WEBSITE ARCHITECTURE WITH REAL HUMANS IN MIND. Think about a commercial/ad/ music video/soundtrack that has

Designing Interactions 2013-2: Lecture #01

Quality Management Lecture 07. Designing and Assuring Quality

Are Humans Rational? SymSys 100 Lecture April 7, 2009

TALAT Lecture 3403: Designing of Forgings

Designing Object Oriented Software - lecture slides 2013

Lecture 15 - Transport in Humans

Lecture 5 Designing Hrd Programs

Designing Interactions / Experiences: Lecture #03

426 lecture 7: Designing AR Interfaces

Designing for Humans - eecs.yorku.ca€¦ · Designing for Humans (Part I) Control-Display Relationships 1 1 Aka “mappings” Controls and Displays (1) “Control” An input device

3461 Designing for Humans Human limits and capabilities