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 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 (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