Human Abilities: Perception James Landay John Kelleher

1 Typical Person :^) Do we really have limited memory capacity? Stay tuned

2 Interface Hall of Shame !

3 Basic Human Capabilities Do not change very rapidly Not like Moore’s law! Have limits, which are important to understand Our understanding of human capabilities does change, ie Cognitive neuroscience Theories of color perception Effect of groups and situation on how we act and react

4 Cognitive Psychology In order to design something for someone, we need to understand the capabilities and limitations of that person How humans perceive the world around them How humans store and process information and solve problems How humans physically manipulate objects

5 What we need to know about people Input Perceptual Systems Processing Memories Information Processes Skill Acquisition Learning Reasoning Problem Solving Output Motor Systems Speech

6 Outline Perception Human visual system Guidelines for design Cognition Models of human performance (MHP) Memory

7 Human I/O Channels Input via the senses Sight Hearing Touch Taste Smell Output via motor control Limbs (feet?) Fingers Eyes Head Voice

8 Human Visual System Light passes through lens Focussed on retina

9 Retina Retina covered with light-sensitive receptors rods primarily for night vision & perceiving movement sensitive to broad spectrum of light can’t discriminate between colors sense intensity or shades of gray cones used to sense color (contain photopigments)

10 Retina Center of retina has most of the cones  ? allows for high acuity of objects focused at center Edge of retina is dominated by rods  ? allows detecting motion of threats in periphery

11 Visible Spectrum

12 Rods Rods are very sensitive to light, and allow us to see under a very low level of illumination They give us our night vision, in shades of white, grey and black About 120 millions rods in one eye Located mainly towards the edges of the retina (so better for peripheral vision) Can’t resolve fine detail Subject to light saturation E.g. Leaving cinema during daytime

13 Cones - Color Perception Concentrated on fovea of retina 3 types each sensitive to different band of spectrum 64% red 32% green only about 2% blue other colors are perceived by combining stimulation Wavelengths not ‘coloured’ Color results from interaction with nervous system Different wavelengths focused at different distances behind lens Lens less sensitive to shorter wavelengths More sensitive to longer wavelengths

14 Color Sensitivity from: not as sensitive to blue lots of overlap

15 from Color Sensitivity

16 Distribution of Photopigments Not distributed evenly on retina – mainly around fovea – mainly reds (64%) & very few blues (4%)  ? insensitivity to short wavelengths (blue) No blue cones in retina center (high acuity)  ? “disappearance” of small blue objects you fixate on As we age lens (& aqueous humor) yellows & absorbs shorter wavelengths  ? sensitivity to blue is even more reduced Implication don’t rely on blue for text or small objects! good for background (sinks into distance) we hold different levels of sensitivity to shades of different colours

17 Color Sensitivity & Image Detection Most sensitive to the center of the spectrum blues & reds must be brighter than greens & yellows Brightness determined mainly by R+G Shapes detected by finding edges we use brightness & color differences Implication hard to deal w/ blue edges & shapes

18 Focus Different wavelengths of light focused at different distances behind eye’s lens need for constant refocusing  ? causes fatigue careful about color combinations Pure (saturated) colors require more focusing then less pure (desaturated) don’t use saturated colors in UIs unless you really need something to stand out (stop sign) hard to read text

19 Perception & Brightness Size & Depth Perception Visual angle (larger angle at same distance implies larger object) Visual acuity (fine detail perception) Measured by Snellen chart e.g. 20/200 Law of size constancy relies on cues - overlapping objects, size and height of object, familiarity with object. Brightness Subjective quantity; affected by luminance; contrast visual system adjusts to perceive in differing lighting; rods/cones visual acuity increases with luminance as does ‘flicker’

20 Shape Constancy

21 Graphical Representation at the Interface Use realistic graphics in interface effective too expensive often unnecessary Methods graphical modeling graphical coding

22 Graphical Modeling Represent 3D objects on 2D surface, requires depth cues Size - larger of two identical objects appears closer than the smaller one Interposition - a visually blocked object appears to be behind the blocking object Contrast, clarity and brightness - sharper, more distinct items appear nearer, duller appears far Shadows - indicate relative position Texture - as apparent distance increases texture of detailed surface becomes less grainy

23 3-D Cues

24 Depth cues, continued Motion parallax - move head side to side, objects displaced at different rates on screen: move camera so image on screen moves, following rules of motion parallax stereoscopic - two images, one per eye, shown from slightly different angles (used in VR head-mounted displays)

25 Perceptual Errors

26 Perception Errors

27 Optical IllusionsIllusions Upside down T Ponzo Effect Tichener

28

29

30 Color Guidelines Avoid simultaneous display of highly saturated, spectrally extreme colors e.g., no cyans/blues at the same time as reds, why? refocusing! desaturated combinations are better  pastels Colour not detectable in peripheral vision most accurate in foveal vision

31 Using the Hue Circle Pick non-adjacent colors opponent colors go well together (red & green) or (yellow & blue)

32 Color Components Hue property of the wavelengths of light (i.e., “color”) Lightness (or value) how much light appears to be reflected from a surface some hues are inherently lighter or darker Saturation purity of the hue e.g., red is more saturated than pink color is mixture of pure hue & achromatic color portion of pure hue is the degree of saturation

33 Color Components (cont.) Lightness Saturation from

34 Color Red Text Appears to lie in one depth plane And blue text appears to lie in a different plane Red Text Appears to lie in one depth plane And blue text appears to lie in a different plane Red Text Appears to lie in one depth plane And blue text appears to lie in a different plane Red Text Appears to lie in one depth plane And blue text appears to lie in a different plane Color Stereoscopy: Blue and Red text appear to be in different planes.

35 Color Guidelines Size of detectable changes in color varies hard to detect changes in reds, purples, & greens easier to detect changes in yellows & blue-greens older users need higher brightness levels Hard to focus on edges created by only color use both brightness & color differences Avoid red & green in the periphery ( no RG cones ) Avoid pure blue for text, lines, & small shapes also avoid adjacent colors that differ only in blue Avoid single-color distinctions mixtures of colors should differ in 2 or 3 colors helps color-deficient observers Older operators need higher brightness levels to distinguish colors.

36 Colour Guidelines (contd.) Use strong light/dark contrasts, not medium/medium contrasts. Remember international differences in colour associations 71% of Hong Kong Chinese associate “white” with “cold 96% of Americans associate “blue” with “cold” Chinese associate “red” with happiness Colour is a powerful attention-getter - use sparingly! Stick to a mainly neutral palette, with occasional use of colour for emphasis Don’t over-use colour (the “Las Vegas” effect) Let users customise their colours but don’t pick poor ones in the first place!

37 Why Study Color? 1) Color can be a powerful tool to improve user interfaces by communicating key information 2) Inappropriate use of color can severely reduce the performance of systems we build

38 Color Coding Powerful way of dividing display into separate regions Useful for searching for information spotting an object in a list, but of less use for tasks requiring categorization or memorization too many colors (>5±2) will increase search times More effective with inexperienced users

39 Reading Stages Perception of visual pattern of word Decoded by reference to internal patterns Interpreted using knowledge of syntax, semantics, pragmatics Pattern detection saccades followed by fixations followed by regressions VDU reading poorer than paper - reasons? negative screen contrast (dark on light) increases luminance and acuity

40

41 Pattern detection

42 Hearing Physical Characteristics Outer ear visible, protection, temperature constancy, amplifies, pinna & auditory canal Middle ear small cavity linked to outer ear by ear drum and inner ear by cochlea cavity contains ossicles which concentrates and amplifies vibrations to cochlea Inner ear fluid filled for better transmission of signal delicate hair cells (cilia) within cochlea release chemical transmission along auditory nerve Processing sound Characteristics of sound: Pitch – frequency (20-20,000 Hz) Loudness - proportional to amplitude of sound wave (30 – 100dB) Timbre - sound generated by different instruments Stereoscopy of sound Location (5 0 arc for locating direction) Cocktail party effect (Cherry)

43 Haptic Sense May be key sense for someone who is visually impaired. Stimulus received via receptors in the skin Pressure (normal) Intense pressure (heat/pain) Temperature (hot/cold) Sensitivity, Dexterity, Flexibility, Speed Where important? Mouse, Other I/O, VR, surgery

44 Movement Time taken to respond to stimulus: reaction time plus movement time Movement time: dependent on age, fitness etc Reaction time: dependent on stimulus type Visual: 200 ms Auditory: 150 ms Pain: 700 ms

45 CS / PSYCH Work Station Ergonomics – to Facilitate I/O

46 Color: Edward Tufte Variation in hue

47 Color: Edward Tufte Variation in luminance better

48 Movement Increasing reaction time decreases accuracy in the unskilled operator but not in the skilled operator. Fitt's Law describes the time taken to hit a screen target Mt = a + b log_2(D/S + 1) where a and b are empirically determined constants, Mt is movement time, D is distance and S is size Targets in general should be large as possible and the distances as small as possible