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