SIMS 213:
User Interface Design & Development
Marti Hearst
Thurs, Feb 7, 2002
Cognitive Considerations
From Don Norman’s book, The Psychology
(Design) of Everyday Things
– Affordances, Constraints, and Mappings
– Mental Models
– Action Cycle and Gulf of Execution
Computer psychopathologies
from InfoWorld, Dec ’86
– “London—
An inexperienced computer operator
pressed the wrong key on a terminal in
early December, causing chaos at the
London Stock Exchange. The error at [the
stockbrokers office] led to systems staff
working through the night in an attempt to
cure the problem”
Slide adapted from Saul Greenberg
Computer psychopathologies
From Science magazine
– In 1988, the Soviet Union’s Phobos 1 satellite was lost
on its way to Mars, when it went into a tumble from
which it never recovered.
“… Not long after the launch, a ground
controller omitted a single letter in a series of
digital commands sent to the spacecraft. And
by malignant bad luck, that omission caused
the code to be mistranslated in such a way as
to trigger the [ROM] test sequence [that was
intended to be used only during checkout of
the spacecraft on the ground]”
Slide adapted from Saul Greenberg
Affordance
The perceived and actual properties of an
object that determine how it could possibly be
used.
Affordances of a Teapot?
Slide adapted from Saul Greenberg
Affordances
Affordance: The perceived and actual properties of an
object that determine how it could possibly be used.
– Knobs are for turning
– Buttons are for pushing
Some affordances are obvious, some learned
– Glass can be seen through
– Glass breaks easily
Sometimes visual plus physical feedback
– Floppy disk example
• Rectangular – can’t insert sideways
• Tabs on the disk prevent the drive from letting it be fully inserted
backwards
Affordances
Perceived can differ from real affordance
– Chair: real affordance
• Affords sitting
• Affords standing for changing a lightbulb
• Affords jamming a door open
– Chair: false affordance
• Can be moved, but not if bolted down
See the Strauss Mouse video
Based on slide by Saul Greenberg
Affordances in Screen-Based Interfaces
Designer only has control over perceived
affordances
– Display screen, pointing device, selection buttons,
keyboard
– These afford touching, pointing, looking, clicking on
every pixel of the display.
Based on slide by Saul Greenberg
Affordances in Screen-Based Interfaces
Most of this affordance is not used
– Example: if the display is not touch-sensitive, even
though the screen affords touching, touching has no
effect.
– Example:
• does a graphical object on the screen afford clicking?
• yes, but the real question is does the user perceive this
affordance; does the user recognize that clicking on the
icon is a meaningful, useful action?
Based on slide by Saul Greenberg
Visual affordances of a scrollbar
Mappings
Mapping:
– Relationships between two things
• Between controls and their results
– Related to metaphor discussion
– Related to affordances
Slide adapted from Saul Greenberg
Mapping controls to physical outcomes
arbitrary
back
right
front back front
left
left right
24 possibilities, requires:
-visible labels
-memory
paired
back front
front back
2 possibilities per side
=4 total possibilities
full mapping
Mappings
For devices, appliances
– Natural mappings use constraints and correspondences in
the physical world
• Controls on a stove
• Controls on a car
– Radio volume
» Knob goes left to right to control volume
» Should also go in and out for front to rear speakers
For computer UI design
– Mapping between controls and their actions on the computer
• Controls on a digital watch
• Controls on a word processor program
Transfer Effects
People transfer their expectations from familiar
objects to similar new ones
– positive transfer: previous experience applies to new
situation
– negative transfer: previous experience conflicts with
new situation
Based on slide by Saul Greenberg
Cultural Associations
Groups of people learn idioms
– red = danger, green = go
But these differ in different places
– Light switches
• America: down is off
• Britain: down is on
– Faucets
• America: counter-clockwise is on
• Britain: counter-clockwise is off
Based on slide by Saul Greenberg
Mental Models
People have mental models of how things work:
– how does your car start?
– how does an ATM machine work?
– how does your computer boot?
Allows people to make predictions about how
things will work
Based on slide by Saul Greenberg
Mental Models
Mental models built from
–
–
–
–
–
–
–
affordances
constraints
mappings
positive transfer
cultural associations/standards
instructions
interactions
Mental models are often wrong!
Based on slide by Saul Greenberg
Our mental models of how bicycles work
can “simulate” this to know it won’t work
Slide adapted from Saul Greenberg
People are always trying to
make sense of things
Mental models often extracted from fragmentary
evidence
People find ways to explain things
– Computer terminal breaks when accessing the
library catalog
– Certain you’re driving on the correct road
Norman’s Action Cycle
Human action has two primary aspects
– Execution: doing something
– Evaluation: comparison of what happened to what
was desired
Action Cycle
start here
Goals
Execution
Evaluation
The World
Action Cycle
start here
Goals
Execution
Evaluation
Intention to act
Evaluation of interpretations
Sequence of actions
Interpreting the perception
Execution of seq uence of actions
Perceiving the state of the world
The World
Norman’s Action Cycle
Execution has three stages:
– Start with a goal
– Translate into an intention
– Translate into a sequence of actions
Now execute the actions
Evaluation has three stages:
– Perceive world
– Interpret what was perceived
– Compare with respect to original intentions
Gulf of Evaluation
The amount of effort a person must exert to
interpret
– the physical state of the system
– how well the expectations and intentions have been
met
We want a small gulf!
Example
Scissors
– affordances:
• holes for insertion of fingers
• blades for cutting
– constraints
• big hole for several fingers, small hole for thumb
– mapping
• between holes and fingers suggested and constrained by appearance
– positive transfer
• learnt when young
– conceptual model
• implications clear of how the operating parts work
Based on slide by Saul Greenberg
Bad Example
Digital Watch
– affordances
• four push buttons, not clear what they do
– contraints and mapping unknown
• no visible relation between buttons and the end-result of their actions
– negative transfer
• little association with analog watches
– cultural standards
• somewhat standardized functionality, but highly variable
– conceptual model
• must be taught; not obvious
Based on slide by Saul Greenberg
Digital Watch Redesigned for Affordances
(Rachna Dhamija)
Digital Watch Redesigned for Affordances
(Ping Yee)
Interface Metaphors Revisited
Definition of Metaphor
– application of name or descriptive term to an object to which it is not
literally applicable
Purpose
– function as natural models
– leverages our knowledge of familiar, concrete objects/experiences to
understand abstract computer and task concepts
Problem
– metaphor may portray inaccurate or naive conceptual model of the system
A presentation tool
is like
Slide adapted from Saul aGreenberg
slide projector
Interface Metaphors
Use metaphors that matches user's task
– desktop metaphor for office workers
– paintbrush metaphor for artists...
Given a choice, choose the metaphor close to the way the system
works
Ensure emotional tone is appropriate to users
E.g., file deletion metaphors
•
•
•
•
•
trashcan
black hole
paper shredder
pit bull terrier Slide adapted from Saul Greenberg
nuclear disposal unit...
Metaphors continued
Caveat
– metaphors can be overdone!
Common pitfalls
– overly literal
• unnecessary fidelity
• excessive interactions
– overly cute
• novelty quickly wears off
– mismatched
• does not match user’s
task and/or thinking
Slide adapted from Saul Greenberg
The Metaphor of Direct Manipulation
Direct Engagement
– the feeling of working directly on the task
Direct Manipulation
– An interface that behaves as though the interaction was with
a real-world object rather than with an abstract system
Central ideas
–
–
–
–
visibility of the objects of interest
rapid, reversible, incremental actions
manipulation by pointing and moving
immediate and continuous display of results
Almost always based on a metaphor
– mapped onto some facet of the real world task semantics)
Object-Action vs Action-Object
Select object, then do action
– interface emphasizes 'nouns' (visible objects) rather than 'verbs' (actions)
Advantages
– closer to real world
– modeless interaction
– actions always within context of object
move
my.doc
• inappropriate ones can be hidden
– generic commands
• the same type of action can be performed on the object
• eg drag ‘n drop:
Slide adapted from Saul Greenberg
Direct manipulation
Representation directly determines what can manipulated
Slide adapted from Saul Greenberg
Phone list
List metaphor
Rolodex metaphor
Slide adapted from Saul Greenberg
Games
Slide adapted from Saul Greenberg
Direct Manipulation
Xerox Star: pioneered in early '80s, copied by almost
everyone
– simulates desktop with icons
•
•
•
•
•
in and out baskets
file folders and documents
calculators
printers
blank forms for letters and memos
– small number of generic actions applicable system wide
• move, copy, delete, show properties, again, undo, help
– eg same way to move text, documents, etc
• property sheets
Slide adapted from Saul Greenberg
– pop-up form, alterable by user
Is direct manipulation the way to go?
Some Disadvantages
– Ill-suited for abstract operations
• spell-checker?
Tedium
• manually search large database vs query
Task domain may not have adequate physical/visual metaphor
Metaphor may be overly-restrictive
Solution: Most systems combine direct manipulation and
abstractions
• word processor:
– WYSIWYG document (direct manipulation)
– buttons, menus, dialog boxes (abstractions, but direct manipulation “in
the small”)
Slide adapted from Saul Greenberg
Guidelines for Design
Provide a good conceptual model
– allows users to predict consequences of actions
– communicated thorugh the image of the system
Make things visible
– relations between user’s intentions, required actions, and
results should be
• sensible
• consistent
• meaningful (non-arbitrary)
– make use of visible affordances, mappings, and constraints
– remind person of Based
whatoncan
and how to do it
slide bybe
Sauldone
Greenberg
Summary
Good Representations
– captures essential elements of the event / world
– deliberately leaves out / mutes the irrelevant
– appropriate for the person, their task, and their interpretation
Metaphors
– uses our knowledge of the familiar and concrete to represent abstract concepts
– need not be literal
– has limitations that must be understood
Direct manipulation
– visibility of the objects of interest
– rapid, reversible, incremental actions
– manipulation by pointing and moving
– immediate and continuous display of results