Post on 13-Jan-2016
description
transcript
Human-Computer Interaction
Human perception, attention, memory
Visual perception
Humans capable of obtaining information from displays varying considerably in size and other features
but not uniformly across the spectrum nor at all speeds
Theories
Constructive theorists: the process of seeing is active; view of the world constructed from info in environment and previously stored knowledge
Ecological theorists: perception involves the process of picking up info from the environment; doesn’t require construction or elaboration
Visual perception
How long did it take to recognize the Dalmation? Only after you knew what you were looking for? After recognizing the Dalmation, what else could you
see? Interpretation of the scene is possible because we
know what Dalmations, trees, etc. look like -- active construction of the image.
Constructivist approach
Perception involves intervention of representations and memories
not like the image a camera would produce -- instead, a model that is transformed, enhanced, distorted, and portions discarded
ability to perceive objects on a screen is a result of prior knowledge and expectations + image on retina
Effect of context on perception
When presented with ambiguous stimuli, our knowledge of the world helps us to make sense of it -- same with ambiguous info on computer screen
Constructive process also involves decomposing images into recognizable entities: figure and background
Gestalt psychologists
Believed that our ability to interpret the meaning of scenes and objects is based on innate human laws of organization
Gestalt laws of perceptual organization Proximity - dots appear as groups rather than a
random cluster of elements Similarity - tendency for elements of same shape or
color to be seen as belonging together Closure - missing parts of the figure are filled in to
complete it, so that it appears as a whole circle Continuity - the stimulus appears to be made of two
lines of dots, traversing each other, rather than a random set of dots
Symmetry - regions bounded by symmetrical borders tend to perceived as coherent figures
Figure and Ground
Figure – similar elements
Ground – contrasting, dissimilar elements
Figure and Ground
White horses Black horses?
Escher art often plays with figure/ground
Camouflage
Figure so similar to ground that it tends to disappear
Similarity
Things that share visual characteristics like shape, size, color, texture, orientation seen as belonging together
Similarity
Larger circles seen as belonging together
Proximity/Contiguity
Things that are closer are seen as belonging together
See vertical vs. horizontal lines
See two groups of two
Continuity
Tend to see figures as continuous
Closure
Tend to see complete figures, even when part of info is missing
Closure
What do you see?
Area
The smaller of two overlapping figures is perceived as figure while larger is perceived as ground
Area
Can reverse effect with shading
Symmetry
Whole figure is perceived rather than individual parts
What do you see?
Ecological approach
Perception is a direct process; information is detected not constructed
humans will actively engage in activities that provide the necessary info to achieve goals
affordances: our understanding of the behavior of a system is what is afforded or permitted by the system– obvious -> easy to interact with– ambiguous -> more mistakes
– examples: door handles, scroll bars
Graphical Representation at the Interface Use realistic graphics in interface
– effective– too expensive– often unnecessary
Methods– graphical modeling– graphical coding
Graphical modeling
Represent 3D objects on 2D surface, requires depth cues– size - larger of two otherwise identical objects appears
closer than smaller one– interposition - blocked object perceived as behind blocking
object– contrast, clarity, brightness - sharper and more distinct
indicates near, duller appear far– shadow - cues re: relative position– texture - as apparent distance increases texture of detailed
surface becomes less grainy
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)
Solid modeling v. wireframe
Solid modeling: color and shading used to achieve high-fidelity – more info about from, shape, surface– compute-intensive
Wireframe - schematic line drawings– good for showing internal structure– cheaper to compute
Applications of 3D
Design of buildings, cars, aircraft virtual reality molecular modeling
Graphical coding
Symbols, colors, other attributes represent state of system
Examples:– reverse video to represent current status of files
– abstract shapes to represent different objects
– color represents options
– alphanumerics represent data object
– size of icon maps to file size
– wastebin image for deletion capability
Coding Methods
Alphanumerics– unlimited number of codes– versatile; self-evident meaning; location time often
higher than for graphic coding Shapes
– 10-20 codes– effective if code matches object or operation
represented
Coding Methods
Color– 4-11– attractive, efficient; excessive use is confusing– limited value for the color-blind
Line angle– 8-11– good in special cases (e.g., wind direction)
Line length– 3-4– good, but can clutter display if many codes shown
Coding Methods
Line width– 2-3– good
Line style– 5-9– good
Object size– 3-5– fair; can take up considerable space– location time longer than for shape and color
Coding Methods
Brightness– 2-4– fatigue can result w/ poor screen contrast
Blink– 2-4– good for getting attention; should be suppressible
afterward; annoying if overused; limit to small fields
Coding Methods
Reverse video– no data– effective for making data stand out; can emphasize
flicker Underlining
– no data– useful, but can reduce text legibility
Combinations of codes– unlimited– can reinforce coding; complex combos confusing
Graphical coding for quant. data
Advantage is that graphs make it easier to perceive– relationships between multidimensional
data– trends in data that is constantly changing– defects in patterns of real-time data
Types of graphs
You know ….
Color coding
Good for structuring info and creating pleasing look
excessive use can lead to “color pollution”
experiments performed to determine effectiveness of using color coding in cognitive tasks, emphasis on identifying target stimuli from crowded displays, categorizing, memorizing
Results
Segmentation– color good for dividing display into regions; areas that
“belong together” should have the same color Amount of color
– too many colors increases search times; use conservatively Task demands
– color most powerful for search tasks, less useful for categorization and memorization tasks
Experience of user– in search tasks color benefits inexperienced more
Guidelines for using color
to distinguish layers to make items of interest stand out use dark or dim backgrounds
Color and text
White text w/out intervening space is difficult to read; color can help if used to separate boundaries of words
red and blue words appear to lie in different planes -- can be used to attract attention, or may cause problems (color stereoscopy)
Color v. monochrome
Alphanumeric coding superior to color coding for identification tasks (Christ, ‘75)
No difference in response time or accuracy for ID of objects based on b&w line drawing v. full color photos
Color
8% of male population is color-blind redundant coding suggested -- both color and
some other feature – e.g., traffic lights -- both color and order
Good visual representations:
Classic example: Minard’s map of Napoleon’s march on Moscow
Icons
Small pictorial images used to represent system objects, applications, utilities, commands
Assumption: icons can reduce complexity of the system, making it easier to learn and use
Problem: distinguishing among a large number of icons– Solution -- icon to show type; color shape, or size
to distinguish among elements of same type
Icons: Pros
Recognition v. recall = low memory load International symbols Compact Support direct manipulation
Icons: Cons
Arbitrary icons not intuitive Designing good icons is an art Limited number can be recalled Context dependent
Meaning of icons
Mapping from computer icon to function it represents is often arbitrary, must be learned
Design principles: icons
Appropriate for context of use Appropriate for task
Mapping form to concept
Resemblance icons– depict the underlying concept through analogous
image (rocks falling) Exemplar icons
– a typical example (silverware -> restaurant) Symbolic icons
– conveys underlying meaning more abstract than image (cracked wine glass -> fragile)
Arbitrary icons– bear no relation to underlying concept
Iconic representations
A) resemblance B) exemplary C) symbolic D) arbitrary
Iconic representations
Concrete icons more easily interpreted than abstract ones
Thus: object icons easier than action icons
Implementing icons
Does the graphic represent the concept?
Is the icon aesthetically pleasing? Is the icon distinguishable from others
on the same screen?
Evaluating icons
Graphic legibility – what objects does the icon show, graphic resolution?
Interpretation accuracy – does the icon suggest the right concept?
Interpretation strength – does the icon suggest the right concept first?
Contrast set distinction – does each icon stand out from the family?
Contrast set inclusion – do the icons in a family group together?
Icons: add’l considerations
Icons may be used to represent multiple states of an object– Mailbox empty/full– Agent waiting/busy
Need to test icons in each state, against whole family
Folder doesn’t stand out
Icon design
Context Function Representational Form Underlying Concept
Function
Text better than graphics for retrieving verbal information
Icons better when:– recognition plays a major part in task
• select type of restaurant, method of payment
– tasks require manipulative operations• drawing, painting
Representational Forms
Concrete objects abstract symbols(lines, circles, dots, arrows) combination
most meaningful icons use a combined form of representation, provided users are familiar with conventions depicted by abstract symbols
Underlying concept
Concrete objects easiest to represent warnings, operations more difficult
Icon screen design issues
Allow for different icon states Avoid jaggy lines Be aware of background patterns Stick to platform’s graphical style Design for lowest screen quality Color: subtle, small palette, redundancy,
Combination
Users less likely to forget icon meaning than to forget name of command
redundancy often used– pro: text makes meaning clear; icon easier to
remember– con: more screen space
Animated icons
Effectively portray complex and abstract processes
must focus on key aspects of function bad ones confusing selection a problem mode (animation v selection) a problem
Recognition v. recall
Recognition superior to recall reduce recall requirements
– menus, icons
Your job now …
Break into groups of 3-4
Group A:– Design icons to represent:
• Move a block of text• Copy a block of text• View text in temp storage• Insert a block of text
– Sketch 3 solutions for each – use color if you can– Evaluate your solutions– Revise– Demonstrate
Group B
Design signage for new high-speed train that will travel Europe-Russia-Asia
Signs for:– Baggage– Sleeping cars– Diapering station– Dining
Same procedure as for group A.
Attention and Memory Constraints “Everyone knows what attention is. It is the taking
possession of mind, in clear and vivid form, of one out of what seem several simultaneously possible objects or trains of thought … It requires withdrawal from some things in order to deal effectively with others.”– W. James, 1890
“cocktail party phenomenon”
Ability to focus on one activity, while tuning out others
can be distracted from one task if attention called to another
Objectives
Know importance of designing for attentional and memory constraints
Know what are meaningful and memorable interfaces
Apply techniques to structuring interfaces that are attention-grabbing and require minimal effort to learn and remember
Attention
Focused attention -- ability to attend to one event from a mass of competing stimuli
Divided attention -- attempt to attend to more than one thing at a time
Focusing attention at the interface Structuring information
– structure interface so it is easy to navigate through
– “right amount” of info per screen– grouped and ordered into meaningful parts
(See Gestalt laws of perceptual grouping)
Exercise: structuring information
Phone number of HoJo in Columbia? Name of hotel with double for $46
Phone number of Holiday House? Name of hotel with double for $27
Typically…
Screen 1: 3.2 seconds Screen 2: 5.5 seconds
Why? Both have same density…
Techniques for guiding attention
Spatial and temporal cues color alerting -- flashing, reverse video,
auditory warnings… windowing
Note that:
Info needing immediate attention should be displayed in a prominent place
less urgent info to less prominent place, but in a specific location
info needed intermittently shouldn’t be displayed unless requested
Multitasking and interruptions
People are interrupted while working, and often carry out several tasks at once…
Primary v. secondary task, suspend and resume
Problem: resume from wrong point Common solution: cognitive aid
– lists, post-its, – Pilot who puts coffee cup on flap handle to
remember to reduce electrical load before lowering wing flaps
Cognitive Aids
Goal: design system to provide information systematically about status of an activity - what has been done, what needs to be done
Exercise - Stroop Effect
ZYP
QKELF
SUWRG
XCIDB
WOPR
ZYP
QKELF
XCIDB
SUWRG
WOPR
SUWRG
Stroop Effect ….
RED
BLACK
YELLOW
GREEN
BLUE
RED
GREEN
BLUE
BLACK
RED
YELLOW
Cognitive Processes
Automatic– fast; demand minimal attention; don’t interfere
with other activities– unavailable to consciousness– hard to change once learned
Controlled– limited capacity; require attention and
conscious control– easier to change
Effect on UI design decisions
Interactions that have become automatic are difficult to unlearn
Consistency across versions, tools can help avoid this problem
Memory constraints
Some things easy to learn; others hard Levels of processing theory:
– extent to which new material can be remembered depends on its meaningfulness
– analysis of stimulus ranges from shallow - deep– meaningfulness determines depth of analysis which
affects how well remembered Meaningfulness
– familiarity– imagery
Effect on UI design decisions
Items that need to be remembered should be as meaningful as possible
Problem: familiar names need to make sense in computer domain
Computer science: names often abstract or arbitrary
Unix commands
Cat grep lint mv pr lpr
Paper of interest
Donald A. Norman, The trouble with UNIX: the user interface is horrid. Datamation, 27(12), 139-50, November 1981.
-- extended critique of UNIX commands
Guidelines
consider contextual, cultural, and user characteristics when choosing command names
design meaningful icons