the human chapter 1 the human Information i/o visual, auditory, haptic, movement Information stored in memory sensory, short-term, long-term Information processed and applied problem solving Emotion influences human capabilities Each person is different Overview Visual perception Gestalt Depth and size Colour and brightness Visual illusions Reading Auditory perception Haptic perception Movement Attention Exercises Final remarks Limitations of poor interface design Any thoughts? Task learning: poor Task efficiency: poor Risk of accidents: high Training: costly Emotions: frustration, confusion, anxiety Why do we need to understand users? Bad design contradicts facts pertaining to human capabilities Usability problems Design process should place emphasis on the user To supply theories, guidance and methods that can lead to the design of better interactive products Perception Process of acquiring, interpreting, selecting, and organizing sensory information. Visual perception - the ability to interpret visible light information reaching the eyes which is then made available for planning and action. Two stages in vision physical reception of stimulus processing and interpretation of stimulus 1
Visual perception the eye Rods Black white vision Highly sensitive to light Edges of retina peripheral vision Cones Colour-vision long-wavelength light (red) middle-wavelength light (green) short-wavelength light (blue) On the fovea 2mm diameter clear vision Ganglion cells X-cells on fovea, early detection of patterns Y cells distributed, early detection of movement Optical centre The geometric centre: the intersection of the horizontal axis and vertical axis. A powerful focal point. The optical centre is slightly above the geometric centre. The centre to the human eye. Optical centre Geometric centre Gestalt theory of perception Gestalt Principles In search for patterns (Gestalt = form) Unifying forms and configurations that the mind naturally creates, with properties that are inevitably greater than the sum of their parts. Implications for design: understanding gestaltic organizing principles can be of considerable aid when designing the layout of visual information. Gestalt Principles Proximity: objects that are close to each other tend to be seen as a group Similarity: objects of the same shape or color are seen as belonging together Continuity: lines tend to be seen as continuous, even if they are interrupted Closure: missing parts of an object are filled in to complete it, so that it appears as a whole. Area: the smaller of two overlapping figures is perceived as figure while the larger is regarded as ground Symmetry: regions bounded by symmetrical borders tend to be perceived as coherent figures Gestalt and Design Use design principles for graphical simplification: visual information should be detected NOT constructed! Proximity Symmetry Similarity Closure Area Continuity Alignment Contrast Proximity Repetition 2
Alignment Choose one Proximity Group related items together Proximity Proximity Repetition Repeat some aspects throughout Repetition 3
Contrast If two items are not exactly the same, then make them different Bad design No organization No use of contrast, repetition, or other organizing principles http://units.english.uiuc.edu/ppw/prosem/2003/carp/index.html Slide: Saul Greenberg Good design Why? Alignment connects visual elements in a sequence Slide: Saul Greenberg Two-level hierarchy indentation contrast Grouping by white space Specific types of visual perception Size perception Depth perception Brightness perception Colour perception Visual illusions complexity and ambiguity of visual perception Size and depth perception visual angle indicates how much of view object occupies relates to size and distance from eye size constancy familiar objects perceived as constant size in spite of changes in visual angle when far away cues help perception of size and depth Depth cues 4
Depth cues Depth cues The apparent relative motion of stationary objects against a background when the observer moves. Due to the scattering of blue light in the atmosphere, distance objects appear more blue. Arial Perspective Arial Perspective Depth cues Linear Perspective The property of parallel lines converging at infinity. 5
Linear Perspective Depth cues The apparent retinal image size allow us to judge distance based on our past and present experience and familiarity with similar objects Relative size Relative size Depth cues Occlusion The overlapped object is considered further away 6
Depth cues Lights and shades Correct interpretation of colour, and especially lighting cues, allows us to determine the shape of objects Depth cues What depth cues we have here? Three-dimensional vision produced by the fusion of two slightly different views of a scene on each retina What depth cues we have here? What depth cues we have here? Arial perspective Linear perspective Light & shades Relative size & Occlusion 7
Depth and Design GUI - depth cues indicate importance/activity level VE - depth cues are widely used Size: larger objects appear closer. Interposition: overlapping objects appear closer. Contrast, Clarity, Brightness, Texture: increasing any of these makes an object appear closer. Shadow: generating a shadow of a foreground object and casting it on the background objects. Brightness and colour perception Brightness subjective reaction to levels of light affected by luminance of object (light emitted) visual acuity increases with luminance as does flicker where is flicker more noticeable? Colour made up of hue (wavelength) intensity (brightness), saturation (amount of whiteness) cones sensitive to colour wavelengths long-wavelength light (red) middle-wavelength light (green) short-wavelength light (blue) blue acuity is lowest 8% males and 1% females colour blind Colour and Design Use colour as a redundant cue, e.g. hyperlink text and background are distinguishable based on contrast & colour diagrams are distinguishable based on contrast, line style and colour Good design rues for non colour blind users poor light conditions black and white printer Colour and Design hcibook/e3 home page red-green colour deficit blue-yellow colour deficit Interpreting the signal Optical Illusions The visual system compensates for: movement of the image on the retina Integration is performed through automatic inferences in visual cortex Context is used to resolve ambiguity Optical illusions sometimes occur due to over compensation the Ponzo illusion the Muller Lyer illusion 8
Optical Illusions What is wrong? columns start in the front and end in the back upper floor is rotated 90 degrees from the lower floor a ladder climbs from the inside of the building to the outside, yet remains climbable the Ponzo illusion the Muller Lyer illusion Belvedere s Toy by M.C. Escher http://www.fink.com/papers/impossible.html Reading major role of visual perception Several stages: Perception of the visual pattern of the world decoded using internal representation of language interpreted using knowledge of syntax and semantics Reading involves saccades and fixations Perception occurs during fixations Average: 250 words per min shape recognition Reading: visual perception problems Dyslexia Learning disability manifesting as a difficulty with written language, particularly with reading and spelling. confuse letters either when reading or when writing, i.e. b and d. reverse words in reading or writing, i.e. no for on, or pot for top. http://www.lancs.ac.uk/disabilities/dyslexiaguide.htm http://www.lancs.ac.uk/studentsupport/staff/disabilityt eachingguide.htm Reading and Design Readability Font colour/brightness and the background Font size, 9, 12 pts. Word shape is important to recognition Negative contrast Size of the interline spacing Font type reflecting the content Information organisation Language difficulty Dyslexia Writing and presentation style: short and simple sentences, lines <=60-70 chars, line spacing between paragraphs, wide margins and headings, short paragraphs, left justify, bullet pts rather than continuous text Font: 14 point, lowercase, bold rather than underline or italic, no hyphenation, avoid light text on dark background. Other types of perception Auditory perception - hearing Haptic perception - touch 9
Auditory perception Provides information about environment: distances, directions, objects etc. Physical apparatus: outer ear protects inner and amplifies sound middle ear transmits sound waves as vibrations to inner ear inner ear chemical transmitters are released and cause impulses in auditory nerve Sound pitch sound frequency loudness amplitude timbre type or quality Auditory perception Humans can hear frequencies from 20Hz to 15kHz less accurate distinguishing high frequencies than low. more sensitive to changing patterns Loudness of between 20-70 decibels (db) constitutes comfortable hearing. Loud band 160 db Shouting 100 db Conversation 50dB Whisper 20 db Auditory system filters sounds can attend to sounds over background noise, e.g. the cocktail party phenomenon. Auditory perception and Design The remarkable amount of information conveyed by sound could be more extensively used in interface design Audio feedback: warning, notification, affirmative feedback List 3 situations when sound is a useful means of attracting a user s attention Attention: New sounds compete with existing environmental sounds. Fatigue: Audio feedback should not become tired-sounding when we hear them often Emotion: Since sound is unavoidable it should also be inoffensive Haptic perception Stimulus received via receptors in the skin: thermoreceptors heat and cold nociceptors pain mechanoreceptors pressure & vibrations - tactile sensing Stimulus received via receptors beneath the skin, in muscles, tendons, joints: kinaesthetic sensing - limb position and movement - awareness of body position - affects comfort and performance Some areas more sensitive than others e.g. fingers. May be key sense for someone who is visually impaired Haptic perception and Design Intersensory integration Haptics favour material properties, e.g. surface: roughness, slipperiness, warmth; substance: weight. Vision favours geometric properties, e.g. size (2-D, 3-D), shape, pointiness Vision and haptics can compensate each other: one sense can be fooled by the other - coarse visual textures make surfaces feel rougher; visual curves make haptic edges feel rounder Haptic interface design May be key sense for someone who is visually impaired Movement Time taken to respond to stimulus: reaction time + movement time Movement time dependent on age, fitness etc. Reaction time - dependent on stimulus type: visual ~ 200ms auditory ~ 150 ms pain ~ 700ms 10
Movement and Design Fitts' 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 S is Size of target targets as large as possible distances as small as possible Targets at screen edge are easy to hit Linear popup menus vs pie menus Attention Cognitive process of selectively concentrating on one aspect of the environment while ignoring other things Focused attention ability to respond discretely to specific stimuli single locus of attention pick one thing to focus on, amongst many possibilities eye movement to item of interest head movement to sounds of interest cocktail party effect: ability to tune out numerous conversations in same vicinity and focus on just one Divided attention the highest level of attention and it refers to the ability to respond simultaneously to multiple tasks or multiple task demands. quickly accesses several information sources, switch of activities or contexts limited number of attentional tokens (4-7) - fundamental bottleneck in human processing interference between tasks can degrade performance if combined tasks exceed human abilities Attention and Design Information overload makes attention a scarce resource Make the relevant information salient, e.g. colour, ordering, spacing, underlining, sequencing and animation Avoid cluttering the interface, e.g. google.com simple design Shifting the computer from the foreground of the user's attention to the background, e.g. ubicomp. Interruptions - strategies for coordinating interruptions in HCI, e.g. immediate, negotiated, mediated, and scheduled. Exercise 1 where should buttons and menus be placed on the screen? At the edge of the screen Fitt s law: faster move of the mouse to a target at the edge The boundary of the display acts as a visual bumper to quick motions. Finding a target in the middle of the screen requires slowing down to keep from overshooting. This takes more time, and uses mental energy inappropriately. Primary information should be located near the optical centre, with secondary information at the edges. For psychological continuity, orienting information should be placed at the top or the bottom of the screen, depending on whether it relates to the preceding or following screen, respectively. http://www.math.duke.edu/education/ccp/resources/write/design/ Exercise 2: what is the best use of the colour blue on the GUI, for background or details? Blue is for background... but not details. Fovea, where detailed vision occurs, has a low sensitivity to the colour blue. it is very difficult, and very tiring, to distinguish details that are outlined in shades of pure blue. blue text, thin blue lines, and small blue things generally should be avoided. Blue makes an ideal background colour, however. registered by the rest of the retina, it provides an excellent contrast to detailed central elements in analogous or monochromatic shades. http://www.math.duke.edu/education/ccp/resources/write/design/ 11
Exercise3: what is the best use of motion in GUI? Only for capturing and maintaining the user's attention. Peripheral vision is more sensitive to motion (e.g., animation and blinking) than is foveal vision Example of bad design: web pages with animated ad banners. Final remarks Psychology and the Design of Interactive System A lot of knowledge has been distilled in: guidelines (chap 7) cognitive models (chap 12) experimental and analytic evaluation techniques (chap 9) Correct application generally requires understanding of context in psychology, and an understanding of particular experimental conditions 12