CogSysIII Lecture 2: Perception and Ergonomics

55
CogSysIII Lecture 2: Perception and Ergonomics Human Computer Interaction SS 2006 Ute Schmid (lecture) Emanuel Kitzelmann (practice) Applied Computer Science, Bamberg University CogSysIII Lecture 2: Perception and Ergonomics – p. 49

Transcript of CogSysIII Lecture 2: Perception and Ergonomics

Page 1: CogSysIII Lecture 2: Perception and Ergonomics

CogSysIII Lecture 2: Perception andErgonomics

Human Computer InteractionSS 2006

Ute Schmid (lecture)

Emanuel Kitzelmann (practice)

Applied Computer Science, Bamberg University

CogSysIII Lecture 2: Perception and Ergonomics – p. 49

Page 2: CogSysIII Lecture 2: Perception and Ergonomics

Perception

Information acquisition from the environment via senseorgans and transformation into experiences of objects,events, sounds, tastes, etc.

Vision as dominant and best researched of senses(followed by hearing and touch)

Perception is not passive: projection of informationfrom the environment on the retinabut: result of internal processes on the “raw data”!

bottom-up and top-down processes

CogSysIII Lecture 2: Perception and Ergonomics – p. 50

Page 3: CogSysIII Lecture 2: Perception and Ergonomics

Sense Organs

visuell

autitiv

haptisch

olfaktorisch

gustatorisch

CogSysIII Lecture 2: Perception and Ergonomics – p. 51

Page 4: CogSysIII Lecture 2: Perception and Ergonomics

Bottom-up and Top-down Processes

Early vision (mostly bottom-up):Encoding of orientation of lines, angels, colors

Strong influence of cognition, interpretation (top-down)Object identification

“middle ground”Perception of depth, distance, movement

CogSysIII Lecture 2: Perception and Ergonomics – p. 52

Page 5: CogSysIII Lecture 2: Perception and Ergonomics

Introduction to Visual Perception

Physiological basis of vision

Perceiving brightness and contrast

Color Perception

Perceiving depth

Object perception

E.Bruce Goldstein, Sensation and Perception

J. Müsseler, Visuelle Wahrnehmung, in Müsseler & Prinz,Allgemeine Psychologie

CogSysIII Lecture 2: Perception and Ergonomics – p. 53

Page 6: CogSysIII Lecture 2: Perception and Ergonomics

Stimuli for Vision

Visible light: 360 to 700 nm

Reflection of light from objects into our eyes

Distal stimulus: physical size and distance of an object

Proximal stimulus: stimulus located on the observersreceptors (retinal size and visual angle)

Projection on the retina is upside down!

Visual angle is determined by size and distance of anobject

CogSysIII Lecture 2: Perception and Ergonomics – p. 54

Page 7: CogSysIII Lecture 2: Perception and Ergonomics

Size Perception

CogSysIII Lecture 2: Perception and Ergonomics – p. 55

Page 8: CogSysIII Lecture 2: Perception and Ergonomics

Retina

ca. 126 Mio photo receptors in the retina

120 Mio rods (higher sensivity for light)

6 Mio cones (color vision, mostly near fovea)

positioned in the back of the eye

Receptive field of a neuron: area on the receptor surface (retina)that, when stimulated, affects the firing of that neuron

CogSysIII Lecture 2: Perception and Ergonomics – p. 56

Page 9: CogSysIII Lecture 2: Perception and Ergonomics

The Blind Spot

Where the optic nerve leaves the eye are no receptors(blind spot)

Usually, we are not aware of the blind spot – no “hole”in our perception

Seeing with two eyes: different blind spots, merging ofthe images of both eyes in higher cortical structures

blind spot is off to the side of our visual field, i.e. not infocus

Mechanism to “fill in” the blind spot

Demo: close right eye, focus cross with left eye, moveback an forth, circle disapears (replaced bycolor/pattern of surrounding area)

CogSysIII Lecture 2: Perception and Ergonomics – p. 57

Page 10: CogSysIII Lecture 2: Perception and Ergonomics

Demo “Blind Spot”

����������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������

����������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������

CogSysIII Lecture 2: Perception and Ergonomics – p. 58

Page 11: CogSysIII Lecture 2: Perception and Ergonomics

Visual Pathway

from retina to lateral geniculate nucleus (LGN) (cross over to theopposite site in the cortex)

most nerve fibres go to the visual cortex (occipital lobe)

some go to the Superior colliculus (control of eye movement)

CogSysIII Lecture 2: Perception and Ergonomics – p. 59

Page 12: CogSysIII Lecture 2: Perception and Ergonomics

Spectral Sensitivity

Cones more sensitiv in light

Rods more sensitiv in dark

Rods have greater sensitivity in low ambientillumination

CogSysIII Lecture 2: Perception and Ergonomics – p. 60

Page 13: CogSysIII Lecture 2: Perception and Ergonomics

Measurement of Sensitivity

Psychophysics: Relation between physical stimuli and perception

Absolute threshold: smallest amount of stimulus energy needed foran observer to detect the stimulus

Method constant stimuli: present five to nine stimulty with themost intense clearly above threshold and least intense clearlybelow threshold, presentation in random order

Method of limits: presentation in ascending or descending order

Method of adjustment: intensity is slowly changed by observeror experimentor

Difference threshold: just noticable differences

Weber’s law: JND = K × S

S as size of a standard stimulus (e.g. weight of 100 gram)

Constant K: specific for different kinds of stimuli (e.g. 0.03 forweight in grams)

CogSysIII Lecture 2: Perception and Ergonomics – p. 61

Page 14: CogSysIII Lecture 2: Perception and Ergonomics

Perception of Brightness

Perception of intensity of light reflected from a surface

Intensity of illumination and reflectance of the surface

Mach bands, explanation by lateral inhibitionTo the left of the point where the figure just starts toget lighter people usually see a dark bar that isslightly darker that the area to the left of it.At the point where the brightness just stopsincreasing, people usually perceive a bright bar.

CogSysIII Lecture 2: Perception and Ergonomics – p. 62

Page 15: CogSysIII Lecture 2: Perception and Ergonomics

Mach Bands and Lateral Inhibition

CogSysIII Lecture 2: Perception and Ergonomics – p. 63

Page 16: CogSysIII Lecture 2: Perception and Ergonomics

Mach Bands and Lateral Inhibition

center-surround receptive field interactions

The receptive fields are represented as a disk (+) and annulus (-).

The center disk is an excitatory area and the annulus an inhibitoryarea. CogSysIII Lecture 2: Perception and Ergonomics – p. 64

Page 17: CogSysIII Lecture 2: Perception and Ergonomics

Lateral Inhibition

The receptive fields in the uniformly white and uniformly black areasreceive about the same stimulation in their excitatory centers andinhibitory surrounds.

Therefore the center excitations are in balance with the surroundinhibitions.

The receptive field over the bright Mach Band gives a strongerresponse in the center because part of the surround is in the darkerarea. Therefore it receives less inhibition from the surround than didthe center at the extreme left and right ends.

The receptive field over the dark band receives more surroundinhibition because part of the surround is in the brighter area.Therefore, the excitatory response is less and this results in ourseeing that the area as darker.

CogSysIII Lecture 2: Perception and Ergonomics – p. 65

Page 18: CogSysIII Lecture 2: Perception and Ergonomics

Perception of Contrast

Perception of brightness in two adjacent areas:simulatenous contrast

Physical contrast and perceptual contrast do notalways correspond!

A disc with blurred contours with a similar intensity asa surronding area will “disappear”!

CogSysIII Lecture 2: Perception and Ergonomics – p. 66

Page 19: CogSysIII Lecture 2: Perception and Ergonomics

Ergonomics

application of scientific information concerning humansto the design of objects, systems and environment forhuman use.

comes into everything which involves people: Worksystems, sports and leisure, health and safety shouldall embody ergonomics principles

incorporates elements from many subjects: anatomy,physiology, psychology and design

ensure that products and environments arecomfortable, safe and efficient for people to use

Ergonomic design: considering design options toensure that people’s capabilities and limitations aretaken into account; helps to ensure that the product isfit for use by the target users

CogSysIII Lecture 2: Perception and Ergonomics – p. 67

Page 20: CogSysIII Lecture 2: Perception and Ergonomics

Cognitive Ergonomics

focuses on the fit between human cognitive abilitiesand limitations and the machine, task, environment,etc.

Example applications:designing a software interface to be "easy to use"designing a sign so that the majority of people willunderstand and act in the intended mannerdesigning an airplane cockpit or nuclear powerplant control system so that the operators will notmake catastrophic errors

CogSysIII Lecture 2: Perception and Ergonomics – p. 68

Page 21: CogSysIII Lecture 2: Perception and Ergonomics

Consequences for Design

Be aware of simultaneous contrast effects (also incolor)

Make differences in brightness prominent

CogSysIII Lecture 2: Perception and Ergonomics – p. 69

Page 22: CogSysIII Lecture 2: Perception and Ergonomics

Color Perception

Definition of color in terms of spectral composition:wavelength

Our eyes have three sets of sensors with peaksensitivities at light frequencies that we call red (580nm), green (540 nm) and blue (450 nm)

Light at any wavelength in the visual spectrum rangefrom 400 to 700 nanometres will excite one or more ofthese three types of sensors

Our perception of which color we are seeing isdetermined by which combination of sensors areexcited and by how much

Humans can perceive about 150 different hues

CogSysIII Lecture 2: Perception and Ergonomics – p. 70

Page 23: CogSysIII Lecture 2: Perception and Ergonomics

Color Wheel

In combination with saturation (perc. of color in white) andbrightness (perc. of black), we can perceive about 7 Mio colors

There exist 7500 different names for colors (National Bureau ofStandards, USA)

Additive color mixture (wavelength); mixing red, green, blue resultsin white

Subtractive color mixture (mixing paints), reflection of wavelengthscommon two mixed colors; mixing red, green, blue results in black

CogSysIII Lecture 2: Perception and Ergonomics – p. 71

Page 24: CogSysIII Lecture 2: Perception and Ergonomics

Visible Hues

CogSysIII Lecture 2: Perception and Ergonomics – p. 72

Page 25: CogSysIII Lecture 2: Perception and Ergonomics

Color Blindness

Some people have a visual anomaly referred to ascolor blindness and have trouble distinguishingbetween certain colors.

Red-green color blindness could occur if the Rho andGamma sensor curves exactly overlapped or if therewere an insufficient number of either rho or gammasensors.

A person with this affliction might have trouble tellingred from green, especially at lower illumination levels.

CogSysIII Lecture 2: Perception and Ergonomics – p. 73

Page 26: CogSysIII Lecture 2: Perception and Ergonomics

Color as a Private Experience

Experiments show that color perception is stable forone observer but that there exist significant differencesbetween observers

E.g.: show the purest green (500 nm, 505 nm)

CogSysIII Lecture 2: Perception and Ergonomics – p. 74

Page 27: CogSysIII Lecture 2: Perception and Ergonomics

Successive Contrast/Afterimage

CogSysIII Lecture 2: Perception and Ergonomics – p. 75

Page 28: CogSysIII Lecture 2: Perception and Ergonomics

Successive Contrast/Afterimage

effect of previously-viewed color fields on theappearance of the currently-viewed test field.

Demo: pay attention to only the colors of thebackground fields, stare at the top left blue square onthe green background for 5-10 seconds, then look atthe small outline square below. You should clearly seethe aftereffect of the green and magenta backgroundfields as faint magenta and green fields, respectively.Now repeat the 5-10 seconds to build up theafterimage again and then look at the upper left squareon the pastel green and magenta backgrounds (upperright panel). The afterimage should be strong enoughto make these backgrounds look gray or even reversetheir appearances, with a pale magenta appearanceon the left and pale green on the right.

CogSysIII Lecture 2: Perception and Ergonomics – p. 76

Page 29: CogSysIII Lecture 2: Perception and Ergonomics

Consequences for Design of Graphics

see: http://colorusage.arc.nasa.gov

find two different physical colors for two test fields ondifferent backgrounds that have the same appearance

not a universal solution:difficult to apply in dynamic graphics, e.g., movingmaps, in which the symbols move from onebackground color to another. The physical color ofeach symbol would have to be changed to adifferent color when it moved to a new background.The appearance may not match if there arechanges in viewing conditions, e.g., smalldifferences in display equipment.

CogSysIII Lecture 2: Perception and Ergonomics – p. 77

Page 30: CogSysIII Lecture 2: Perception and Ergonomics

Consquences cont.

see: Kosslyn, Elements of Graph Design

Adjacent colors should have different brightness (p.165)

visual system has difficulty registering a boundarythat is defined by two colors of same brightnesspsychological impression of intensitysame objective intensity: we see blue as brightest,followed by red, green, yellow and white

CogSysIII Lecture 2: Perception and Ergonomics – p. 78

Page 31: CogSysIII Lecture 2: Perception and Ergonomics

Example

CogSysIII Lecture 2: Perception and Ergonomics – p. 79

Page 32: CogSysIII Lecture 2: Perception and Ergonomics

Consequences cont.

Avoid using red and blue in adjacent regionsLens of the eye cannot focus on two very differentwavelengths at the same time

Avoid cobald blue which is a mixture of blue and red(eye cannot accomodate to both frequencies at thesame time)

This is red on blue.

CogSysIII Lecture 2: Perception and Ergonomics – p. 80

Page 33: CogSysIII Lecture 2: Perception and Ergonomics

Consequences cont.

Avoid using hue to represent quantity information(hues are not a psychological continuum, p. 169)

CogSysIII Lecture 2: Perception and Ergonomics – p. 81

Page 34: CogSysIII Lecture 2: Perception and Ergonomics

Consequences cont.

Use deeper saturations and greater intensities toindicate greater amounts

CogSysIII Lecture 2: Perception and Ergonomics – p. 82

Page 35: CogSysIII Lecture 2: Perception and Ergonomics

Perceiving Depth

Two approachesCue TheoryInformation processing approachInformation for depth in the retinal imageEcological Approach (J.J. Gibson)Information about depth in the environment(not discussed here)

CogSysIII Lecture 2: Perception and Ergonomics – p. 83

Page 36: CogSysIII Lecture 2: Perception and Ergonomics

Cues

Occulomotor: information from the muscles of the eye;convergence (focusing on something near) anddivergence

Pictorial: overlap, size and height in the field of view,atmospheric perspective, familiar size, Linearperspective

Movement-produced: motion parallax, deletion andaccretion

Binocular disparity

CogSysIII Lecture 2: Perception and Ergonomics – p. 84

Page 37: CogSysIII Lecture 2: Perception and Ergonomics

Height in the Field of View

Objects below horizon: heigher in the field of view,CogSysIII Lecture 2: Perception and Ergonomics – p. 85

Page 38: CogSysIII Lecture 2: Perception and Ergonomics

Linear Perspective

vanishing point

CogSysIII Lecture 2: Perception and Ergonomics – p. 86

Page 39: CogSysIII Lecture 2: Perception and Ergonomics

Motion Parallax

Helmholtz pointed to the role of motion in depthperception.

As the observer moves relative to the environmentnearer surfaces move further and faster in the retinalimage than do distant surface and this motion parallaxcue provides information about distance.

Demo:http://psych.hanover.edu/Krantz/MotionParallax/MotionParallax.html

CogSysIII Lecture 2: Perception and Ergonomics – p. 87

Page 40: CogSysIII Lecture 2: Perception and Ergonomics

Binocular Disparity

All other cues: monocular

Demo: With only your right eye open hold one fingerupright about 6 inches in front of you. Then position afinger from your other hand about 6 inches fartherback, so that it is completely hidden by the front finger.Now close your right eye and open your left eye, andthe rear finger becomes visible.

Left eye sees from a different point of view!

Stereoscopic photographs (holograms)

CogSysIII Lecture 2: Perception and Ergonomics – p. 88

Page 41: CogSysIII Lecture 2: Perception and Ergonomics

Binocular Disparity cont.

CogSysIII Lecture 2: Perception and Ergonomics – p. 89

Page 42: CogSysIII Lecture 2: Perception and Ergonomics

Perceiving Seize

Visual angle (size and distance)

Size illusions due to erroneous depth perception, e.g.Ames room

Size illusions due to misapplied size constancy (size ofan object is perceived constant over differentdistances), e.g. Müller-Lyer illusion

CogSysIII Lecture 2: Perception and Ergonomics – p. 90

Page 43: CogSysIII Lecture 2: Perception and Ergonomics

Ames Room

CogSysIII Lecture 2: Perception and Ergonomics – p. 91

Page 44: CogSysIII Lecture 2: Perception and Ergonomics

Müller-Lyer Illusion

CogSysIII Lecture 2: Perception and Ergonomics – p. 92

Page 45: CogSysIII Lecture 2: Perception and Ergonomics

Object Perception

Perceptual organization: Gestalt principlesMax Wertheimer, Wolfgang Köhler und Kurt Kofka,1920iesto be found on every design webpage

Information Processing:Two-stage model (Treisman)Recognition by components (Biederman)Marr’s vision system

CogSysIII Lecture 2: Perception and Ergonomics – p. 93

Page 46: CogSysIII Lecture 2: Perception and Ergonomics

Laws of Organization

Prägnanz (law of good figure): Every stimulus is seen in such

a way that the resulting structure is as simple as possible

Law of similarity: similar things seem to be grouped together

Law of good continuation: points that, when connected, result

in straight or smoothly curving lines are seen as belonging

together, and lines tend to be seen in such a way as to folloe

the smoothest path

Law of proximity: things that are near to each other appear to

be grouped together

Law of common fate: things that are moving in the same

direction appear to be grouped together

Law of familiarity: things are more likely to form groups if the

groups appear familiar or meaningful CogSysIII Lecture 2: Perception and Ergonomics – p. 94

Page 47: CogSysIII Lecture 2: Perception and Ergonomics

Examples

CogSysIII Lecture 2: Perception and Ergonomics – p. 95

Page 48: CogSysIII Lecture 2: Perception and Ergonomics

Figure-Ground Separation

Rubin (1915)

Figure more thinglike and memorable than ground

Figure seen as being in front

Ground seen as unformed, seems to extend behindfigure

Contour separating figure from ground seems tobelong to figure

Symmetry, convexity (outward bulbing)

CogSysIII Lecture 2: Perception and Ergonomics – p. 96

Page 49: CogSysIII Lecture 2: Perception and Ergonomics

Modern Exensions of Gestalt Psych

Traditional: Rejection of the idea that perception isconstructed from basic sensations; stimulus must beconsidered as a whole; example based approach; lookand see for yourself (descriptive not explanatory)

Modern experimental approach: e.g., what stimulusproperties are responsible for grouping

Example: Law of similarity (form or orientation)

CogSysIII Lecture 2: Perception and Ergonomics – p. 97

Page 50: CogSysIII Lecture 2: Perception and Ergonomics

Olson and Attneave 1970

Difference in orientation helps for grouping (RT 0.86 sec vs.4.09 sec to decide where the odd stimuli are)

CogSysIII Lecture 2: Perception and Ergonomics – p. 98

Page 51: CogSysIII Lecture 2: Perception and Ergonomics

Implications for Design

(Kosslyn, Elements of Graph Design)

Do not use a 3D framework to exaggerate size (p. 217)

Help to convey accurate representations of the relationbetween two lines (p. 67)

Background elements should not be salient (p. 187)

Background elements must not group with contentelements (p. 189)

CogSysIII Lecture 2: Perception and Ergonomics – p. 99

Page 52: CogSysIII Lecture 2: Perception and Ergonomics

3D Example

CogSysIII Lecture 2: Perception and Ergonomics – p. 100

Page 53: CogSysIII Lecture 2: Perception and Ergonomics

Relation between Lines

CogSysIII Lecture 2: Perception and Ergonomics – p. 101

Page 54: CogSysIII Lecture 2: Perception and Ergonomics

No Salient Background

CogSysIII Lecture 2: Perception and Ergonomics – p. 102

Page 55: CogSysIII Lecture 2: Perception and Ergonomics

No Grouping of BG with Content

CogSysIII Lecture 2: Perception and Ergonomics – p. 103