H. Hussmann (LMU): Interface Design, Chapter 6
Chapter 2 - Perception• Sight and visual perception
–Physiology of visual perception –Perception of colors –Attentive und pre-attentive perception –Gestalt laws
• Hearing und auditive perception –Physiology of auditive perception –Specifics of auditive perception
• Feeling und proprioception • Perception of smell and taste
1SlideBased on Material by A. Butz & A. Krüger
H. Hussmann (LMU): Interface Design, Chapter 6
Chapter 2 - Perception• Sight and visual perception
–Physiology of visual perception –Perception of colors –Attentive und pre-attentive perception –Gestalt laws
• Hearing und auditive perception –Physiology of auditive perception –Specifics of auditive perception
• Feeling und proprioception • Perception of smell and taste
2SlideBased on Material by A. Butz & A. Krüger
H. Hussmann (LMU): Interface Design, Chapter 6
Cross-Sectional View of the Human Eye
3SlideBased on Material by A. Butz & A. Krüger
Lens
IrisFovea
Retina
Optic nerve
H. Hussmann (LMU): Interface Design, Chapter 6
Distribution of Sensor Cells within the Eye
4SlideBased on Material by A. Butz & A. Krüger
Rods
ConesD
ensi
ty o
f sen
sory
cel
ls
Deviation from optical axis in degrees0204060 20 40 60 80
Entrance ofoptic nerve,no cells
H. Hussmann (LMU): Interface Design, Chapter 6
Light Sensitivity of Sensor Cells in the Eye
5SlideBased on Material by A. Butz & A. Krüger
Violet Blue Turquoise Green Yellow Red400nm 500nm 600nm 700nm
LMS
420nm 498 534 564nm
Cones
Sens
itive
ness
Wave lengthColor
H. Hussmann (LMU): Interface Design, Chapter 6
Color Blindness• Frequent:
red-green deficiency • 8% of male population • Simulation using Photoshop
6SlideBased on Material by A. Butz & A. Krüger
H. Hussmann (LMU): Interface Design, Chapter 6
Saccades
7SlideBased on Material by A. Butz & A. Krüger
https://www.youtube.com/watch?v=alwcN2VN-98
http://www.microsoft.com/typography/ctfonts/science_of_word_recognition_files/Figure5.gif
http://images.scholarpedia.org/w/images/9/93/Readingskimming.jpg
Xingshan Li, Pingping Liu, Keith Rayner: Eye movement guidance in Chinese reading: Is there a preferred viewing location?Vision Res. 2011 May 25; 51(10): 1146–1156.
H. Hussmann (LMU): Interface Design, Chapter 6
Chapter 2 - Perception• Sight and visual perception
–Physiology of visual perception –Perception of colors –Attentive und pre-attentive perception –Gestalt laws
• Hearing und auditive perception –Physiology of auditive perception –Specifics of auditive perception
• Feeling und proprioception • Perception of smell and taste
8SlideBased on Material by A. Butz & A. Krüger
H. Hussmann (LMU): Interface Design, Chapter 6
Color Space: RGB
9SlideBased on Material by A. Butz & A. Krüger
H. Hussmann (LMU): Interface Design, Chapter 6
Color Space: HSV
10SlideBased on Material by A. Butz & A. Krüger
Hue(Farbton)
Saturation
Value (Brightness)
H. Hussmann (LMU): Interface Design, Chapter 6
From Spectrum to Color Circle
11SlideBased on Material by A. Butz & A. Krüger
H. Hussmann (LMU): Interface Design, Chapter 6
Color Circle According to Johannes Itten (1961)
12SlideBased on Material by A. Butz & A. Krüger
H. Hussmann (LMU): Interface Design, Chapter 6
Effect of Colors: cold/warm, bright/dark
13SlideBased on Material by A. Butz & A. Krüger
bright
dark
cold warm
H. Hussmann (LMU): Interface Design, Chapter 6
Pure und Non-Pure Colors
14SlideBased on Material by A. Butz & A. Krüger
H. Hussmann (LMU): Interface Design, Chapter 6
Color Contrasts
15SlideBased on Material by A. Butz & A. Krüger
Color-only-Contrast
Bright-Dark- Contrast
Cold-Warm-Contrast
Complementary Contrast
Complementary Contrast
Simultaneous Contrast
Quality Contrast
H. Hussmann (LMU): Interface Design, Chapter 6
Example Simultaneous Contrast
16SlideBased on Material by A. Butz & A. Krüger
H. Hussmann (LMU): Interface Design, Chapter 6
Chapter 2 - Perception• Sight and visual perception
–Physiology of visual perception –Perception of colors –Attentive und pre-attentive perception –Gestalt laws
• Hearing und auditive perception –Physiology of auditive perception –Specifics of auditive perception
• Feeling und proprioception • Perception of smell and taste
17SlideBased on Material by A. Butz & A. Krüger
H. Hussmann (LMU): Interface Design, Chapter 6
Which Object is Different from the Others?
• Color alone is perceived pre-attentively. • Shape alone is perceived pre-attentively. • Combinations of two properties are perceived attentively.
18SlideBased on Material by A. Butz & A. Krüger
a b ca b ca b c
H. Hussmann (LMU): Interface Design, Chapter 6
Further Pre-Attentively Perceived Properties
19SlideBased on Material by A. Butz & A. Krüger
http://visualizedd.wordpress.com/process-paragraph/
H. Hussmann (LMU): Interface Design, Chapter 6
Chapter 2 - Perception• Sight and visual perception
–Physiology of visual perception –Perception of colors –Attentive und pre-attentive perception –Gestalt laws
• Hearing und auditive perception –Physiology of auditive perception –Specifics of auditive perception
• Feeling und proprioception • Perception of smell and taste
20SlideBased on Material by A. Butz & A. Krüger
H. Hussmann (LMU): Interface Design, Chapter 6
Gestalt Laws
21SlideBased on Material by A. Butz & A. Krüger
a b c
a b c
H. Hussmann (LMU): Interface Design, Chapter 6
Gestalt Laws in Action ;-)
22SlideBased on Material by A. Butz & A. Krüger
H. Hussmann (LMU): Interface Design, Chapter 6
Gestalt Law Application in Design
23SlideBased on Material by A. Butz & A. Krüger
http://sixrevisions.com/web_design/gestalt-principles-applied-in-design/
H. Hussmann (LMU): Interface Design, Chapter 6
Gestalt Law Application in Design
24SlideBased on Material by A. Butz & A. Krüger
http://sixrevisions.com/web_design/gestalt-principles-applied-in-design/
US Presidential Campaign 2008
H. Hussmann (LMU): Interface Design, Chapter 6
Gestalt Law Application in Design
25SlideBased on Material by A. Butz & A. Krüger
http://sixrevisions.com/web_design/gestalt-principles-applied-in-design/
H. Hussmann (LMU): Interface Design, Chapter 6
The whole is other than the sum of its parts.
26SlideBased on Material by A. Butz & A. Krüger
Kurt Koffka
http://sixrevisions.com/web_design/gestalt-principles-applied-in-design/
H. Hussmann (LMU): Interface Design, Chapter 6
Chapter 2 - Perception• Sight and visual perception
–Physiology of visual perception –Perception of colors –Attentive und pre-attentive perception –Gestalt laws
• Hearing und auditive perception –Physiology of auditive perception –Specifics of auditive perception
• Feeling und proprioception • Perception of smell and taste
27SlideBased on Material by A. Butz & A. Krüger
H. Hussmann (LMU): Interface Design, Chapter 6
Chapter 2 - Perception• Sight and visual perception
–Physiology of visual perception –Perception of colors –Attentive und pre-attentive perception –Gestalt laws
• Hearing und auditive perception –Physiology of auditive perception –Specifics of auditive perception
• Feeling und proprioception • Perception of smell and taste
28SlideBased on Material by A. Butz & A. Krüger
H. Hussmann (LMU): Interface Design, Chapter 6
Human Ear
20kHz
5kHz
20Hz
1kHz
500Hz
29SlideBased on Material by A. Butz & A. Krüger
IncusMalleusNerves to brain
Ear-drum
Auditory canalCochlea
Ossicles Stapes Vestibular system
H. Hussmann (LMU): Interface Design, Chapter 6
Spatial Hearing through ITD and IID
30SlideBased on Material by A. Butz & A. Krüger
ITD
Sound
SoundShadow
H. Hussmann (LMU): Interface Design, Chapter 6
Chapter 2 - Perception• Sight and visual perception
–Physiology of visual perception –Perception of colors –Attentive und pre-attentive perception –Gestalt laws
• Hearing und auditive perception –Physiology of auditive perception –Specifics of auditive perception
• Feeling und proprioception • Perception of smell and taste
31SlideBased on Material by A. Butz & A. Krüger
H. Hussmann (LMU): Interface Design, Chapter 6
Phonological Loop
32SlideBased on Material by A. Butz & A. Krüger
a_terribly_long_word_in_German
two one eight zero four six five zero
ei awei awwer dabba debei do owwe
approx. 2 seconds
H. Hussmann (LMU): Interface Design, Chapter 6
Auditory Icons and Earcons• Auditory Icons
–Like visual icons –Represent an object or am operation –Often natural sounds
• Earcons –Abstract encoding of several values –E.g. in a melody –E.g. as speed-up of spoken language –Meaning has to be trained
33SlideBased on Material by A. Butz & A. Krüger
http://airparktoastmaster.files.wordpress.com/2010/02/bell.jpg http://creativebits.org/files/trash-osx.png
http://www.dcs.gla.ac.uk/~stephen/generalearcons/generalearcons2.shtml
H. Hussmann (LMU): Interface Design, Chapter 6
Chapter 2 - Perception• Sight and visual perception
–Physiology of visual perception –Perception of colors –Attentive und pre-attentive perception –Gestalt laws
• Hearing und auditive perception –Physiology of auditive perception –Specifics of auditive perception
• Feeling und proprioception • Perception of smell and taste
34SlideBased on Material by A. Butz & A. Krüger
H. Hussmann (LMU): Interface Design, Chapter 6
Physiology of Tactile Sense• http://www.gesundheit.de/sites/default/files/
images/anatomie-lexikon/haut.jpg
35SlideBased on Material by A. Butz & A. Krüger
http://www.br.de/fernsehen/br-alpha/sendungen/schulfernsehen/phaenomenal-tastsinn-sinne102~_v-image512_-6a0b0d9618fb94fd9ee05a84a1099a13ec9d3321.jpg?version=88609
http://www.cerebromente.org.br/n16/mente/large_skin.gif
H. Hussmann (LMU): Interface Design, Chapter 6
Weighted Processing of Sensory Information• http://upload.wikimedia.org/wikipedia/commons/thumb/
1/13/Sensory_Homunculus.png/879px-Sensory_Homunculus.png
36SlideBased on Material by A. Butz & A. Krüger
http://sciencedefined.wordpress.com/2012/01/31/the-skin-is-also-a-map/
H. Hussmann (LMU): Interface Design, Chapter 6
Proprioception• Proprioception • Kinesthesis
37SlideBased on Material by A. Butz & A. Krüger
http://quizlet.com/16208920/neurobiology-final01-somatosensory-system-flash-cards/
H. Hussmann (LMU): Interface Design, Chapter 6
Chapter 2 - Perception• Sight and visual perception
–Physiology of visual perception –Perception of colors –Attentive und pre-attentive perception –Gestalt laws
• Hearing und auditive perception –Physiology of auditive perception –Specifics of auditive perception
• Feeling und proprioception • Perception of smell and taste
38SlideBased on Material by A. Butz & A. Krüger
H. Hussmann (LMU): Interface Design, Chapter 6
Senses of Smell and Taste• Strong emotional effect • Can provide large number of facets
(assuming appropriate training) • Not reducable to small vector of basic values • Difficult to represent in technology
39SlideBased on Material by A. Butz & A. Krüger
http://www.cerebromente.org.br/n16/mente/senses1.html
H. Hussmann (LMU): Interface Design, Chapter 6
Discussion
40SlideBased on Material by A. Butz & A. Krüger
http://www.datex-perfekt.de/bewegungstalent.de/V1/uploads/Image/ampel.jpg
http://50jahreampelmann.de/wp-content/uploads/ampel-ost-deutschland.gifhttp://www.gymnasium-kerpen.eu/ampel08.jpg
http://50jahreampelmann.de/wp-content/uploads/ampel-usa-figur.gif
http://cdn.crn.de/thumbs/fileadmin/images/NYC_Ampel1.jpg.480x0.jpg
http://www.chinatraderonline.com/Files/Gifts-and-Crafts/Badge/LED-Traffic-Sign--Signal-Light-19442943470.jpg