View
3
Download
0
Category
Preview:
Citation preview
1
chapter 1
the human
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 humancapabilities
– Usability problems
• Design process should place emphasis on the user
• To supply theories, guidance and methods thatcan lead to the design of better interactiveproducts
Perception
• Process of acquiring, interpreting, selecting, andorganizing sensory information.
• Visual perception - the ability to interpretvisible 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
2
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 thehorizontal axis andvertical axis.
• A powerful focal point.
• The optical centre isslightly above thegeometric centre.
• The centre to thehuman eye.
Optical centreGeometriccentre
Gestalt theory of perception
• In search for patterns (Gestalt = form)Unifying forms and configurations that themind naturally creates, with properties thatare inevitably greater than the sum of theirparts.
• Implications for design:understanding gestaltic organizing principlescan be of considerable aid when designing thelayout of visual information.
Gestalt Principles
http://web.cecs.pdx.edu/~palms/HCI/lectures/Week4.ppt
Gestalt Principles
• Proximity: objects that are close to each other tend to beseen as a group
• Similarity: objects of the same shape or color are seenas belonging together
• Continuity: lines tend to be seen as continuous, even ifthey are interrupted
• Closure: missing parts of an object are filled in tocomplete it, so that it appears as a whole.
• Area: the smaller of two overlapping figures is perceivedas figure while the larger is regarded as ground
• Symmetry: regions bounded by symmetrical borderstend to be perceived as coherent figures
http://web.cecs.pdx.edu/~palms/HCI/lectures/Week4.ppt
Gestalt and Design
• Proximity
• Symmetry
• Similarity
• Closure
• Area
• Continuity
• Alignment
• Contrast
• Proximity
• Repetition
http://web.cecs.pdx.edu/~palms/HCI/lectures/Week4.ppt
Use design principles for graphical simplification:
visual information should be detected NOT constructed!
3
Alignment
http://web.cecs.pdx.edu/~palms/HCI/lectures/Week4.ppt
Choose one
Proximity
http://web.cecs.pdx.edu/~palms/HCI/lectures/Week4.ppt
Group related items together
Proximity
http://web.cecs.pdx.edu/~palms/HCI/lectures/Week4.ppt
Proximity
http://web.cecs.pdx.edu/~palms/HCI/lectures/Week4.ppt
RepetitionRepeat some aspects throughout Repetition
4
Contrast
http://units.english.uiuc.edu/ppw/prosem/2003/carp/index.html
If two items are not exactly the same, then make them different
Bad design
No organizationNo use of
contrast,repetition, or
otherorganizing
principles
Slide: Saul Greenberg
Good design Two-level hierarchy• indentation
• contrast
Grouping bywhite space
Alignment
connectsvisual
elements ina sequence
Slide: Saul Greenberg
Why?
Specific types of visual perception
• Size perception
• Depth perception
• Brightness perception
• Colour perception
• Visual illusions – complexity andambiguity 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
Monocular clues
• Motion parallax
• Aerial Perspective
• Linear Perspective
• Relative size
• Occlusion
• Colour vision
Binocular clues
• Stereoscopy
5
Depth cues
Monocular clues
• Motion parallax
• Aerial Perspective
• Linear Perspective
• Relative size
• Occlusion
• Colour vision
Binocular clues
• Stereoscopy
The apparentrelative motion ofstationary objectsagainst abackground whenthe observermoves.
Depth cues
Monocular clues
• Motion parallax
• Aerial Perspective
• Linear Perspective
• Relative size
• Occlusion
• Colour vision
Binocular clues
• Stereoscopy
Due to thescattering of bluelight in theatmosphere,distance objectsappear more blue.
Arial Perspective Arial Perspective
Depth cues
Monocular clues
• Motion parallax
• Aerial Perspective
• Linear Perspective
• Relative size
• Occlusion
• Colour vision
Binocular clues
• Stereoscopy
The property ofparallel linesconverging atinfinity.
Linear Perspective
6
Linear Perspective Depth cues
Monocular clues
• Motion parallax
• Aerial Perspective
• Linear Perspective
• Relative size
• Occlusion
• Colour vision
Binocular clues
• Stereoscopy
The apparentretinal image sizeallow us to judgedistance based onour past andpresent experienceand familiarity withsimilar objects
Relative size Relative size
Depth cues
Monocular clues
• Motion parallax
• Aerial Perspective
• Linear Perspective
• Relative size
• Occlusion
• Colour vision
Binocular clues
• Stereoscopy
The overlappedobject is consideredfurther away
Occlusion
7
Depth cues
Monocular clues
• Motion parallax
• Aerial Perspective
• Linear Perspective
• Relative size
• Occlusion
• Colour vision
Binocular clues
• Stereoscopy
Correct interpretationof colour, andespecially lightingcues, allows us todetermine the shapeof objects
Lights and shades
Depth cues
Monocular clues
• Motion parallax
• Aerial Perspective
• Linear Perspective
• Relative size
• Occlusion
• Colour vision
Binocular clues
• Stereoscopy
Three-dimensionalvision produced bythe fusion of twoslightly differentviews of a scene oneach retina
What depth cues we have here?
What depth cues we have here?
Arial perspective
Linearperspective
Relativesize &
Occlusion
Light &shades
What depth cues we have here?
8
Depth and Design
GUI - depth cues indicate importance/activity levelVE - 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 castingit 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 basedon 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
blue-yellow colour deficit
red-green colour deficit
hcibook/e3 home page
Interpreting the signal
• The visual system compensates for:
– movement of the image on the retina
• Integration is performed through automaticinferences in visual cortex
• Context is used to resolve ambiguity
• Optical illusions sometimes occur due to overcompensation
Optical Illusions
the Ponzo illusion the Muller Lyer illusion
9
Optical Illusions
the Ponzo illusion the Muller Lyer illusion
Belvedere’s Toy by M.C. Escher
• columns start in the front
and end in the back
• upper floor is rotated 90
degrees from the lowerfloor
• a ladder climbs from the
inside of the building tothe outside, yet remains
climbable
What is wrong?
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 withwritten 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/disabilityteachingguide.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 simplesentences, lines <=60-70 chars, line spacing betweenparagraphs, wide margins and headings, short paragraphs,left justify, bullet pts rather than continuous text
– Font: 14 point, lowercase, bold rather than underline oritalic, no hyphenation, avoid light text on dark background.
Other types of perception
• Auditory perception - hearing
• Haptic perception - touch
10
Auditory perception
• Provides information about environment:distances, directions, objects etc.
• Physical apparatus:– outer ear – protects inner and amplifies sound
– middle ear – transmits sound waves asvibrations to inner ear
– inner ear – chemical transmitters are releasedand 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 auser’s attention
• Attention: New sounds compete with existing environmentalsounds.
• Fatigue: Audio feedback should not become tired-soundingwhen we hear them often
• Emotion: Since sound is unavoidable it should also beinoffensive
• May be key sense for someone who is visually impaired
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.
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 canbe “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
11
Movement and Design• Fitts' Law describes the time taken to hit a
screen target:
Mt = a + b log2(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 possibledistances 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” numerousconversations in same vicinity and focus on just one
Divided attention
• the highest level of attention and it refers to the abilityto respond simultaneously to multiple tasks or multipletask demands.
• quickly accesses several information sources, switch ofactivities or contexts
• limited number of attentional tokens (4-7) -fundamental bottleneck in human processing
• interference between tasks
– can degrade performance if combined tasks exceedhuman abilities
Attention and Design
Information overload makes attention a scarce resource
• Make the relevant information salient, e.g. colour,ordering, spacing, underlining, sequencing andanimation
• Avoid cluttering the interface, e.g. google.com simpledesign
• Shifting the computer from the foreground of the user'sattention to the background, e.g. ubicomp.
• Interruptions - strategies for coordinating interruptionsin HCI, e.g. immediate, negotiated, mediated, andscheduled.
Exercise 1 – where should buttonsand 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 toquick motions.
– Finding a target in the middle of the screen requiresslowing down to keep from overshooting. This takesmore time, and uses mental energy inappropriately.
• Primary information should be located near the opticalcentre, with secondary information at the edges.
• For psychological continuity, orienting information shouldbe placed at the top or the bottom of the screen, dependingon 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 thecolour blue on the GUI, for backgroundor details?Blue is for background ... but not details.
• Fovea, where detailed vision occurs, has a lowsensitivity to the colour blue.
– it is very difficult, and very tiring, to distinguishdetails that are outlined in shades of pure blue.
– blue text, thin blue lines, and small blue thingsgenerally should be avoided.
• Blue makes an ideal background colour, however.
– registered by the rest of the retina, it provides anexcellent contrast to detailed central elements inanalogous or monochromatic shades.
http://www.math.duke.edu/education/ccp/resources/write/design/
12
Exercise3: what is the best use ofmotion 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 fovealvision
• Example of bad design: web pages with
animated ad banners.
Final remarks
• Psychology and the Design of InteractiveSystem
• A lot of knowledge has been distilled in:
– guidelines (chap 7)
– cognitive models (chap 12)
– experimental and analytic evaluationtechniques (chap 9)
• Correct application generally requires
understanding of context in psychology, andan understanding of particular experimental
conditions
Recommended