human perception, attention, and memory cse 491 michigan state university september 25, 2007 kraemer
Post on 20-Dec-2015
215 views
TRANSCRIPT
Human perception, attention, and memory
CSE 491
Michigan State University
September 25, 2007
Kraemer
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 quantitative 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
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
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
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, has to be learned
Design principles: icons
Appropriate for context of use Appropriate for task
Iconic representations
A) resemblance – depict the underlying
concept through analogous image (rocks falling)
B) exemplar – - a typical example
(silverware -> restaurant) C) symbolic
– conveys underlying meaning more abstract than image (cracked wine glass -> fragile)
D) arbitrary– bear no relation to
underlying concept
Iconic representations
Concrete icons more easily interpreted than abstract ones
Thus: object icons easier than action icons
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?
Also - is the icon aesthetically pleasing?
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
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,
Icons: example 1
packing crate icons
Icons: example2
Desktop icons
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
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
Underlying concept
Concrete objects easiest to represent warnings, operations more difficult
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
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
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
Version 1 Version 2
Examples of structured info
DC metro map
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, coffee cup on flap handle
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
Example
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