stanford hci group
/ cs147
Direct
Manipulation
and Mental
Scott Klemmer
Models
tas: Marcello Bastea-Forte,
Joel Brandt,
Neil Patel, Leslie Wu, Mike
http://cs147.stanford.ed
16
October
Cammarano
 How do people learn interactive systems?
 What makes an interface easy or hard to
remember?
 Why do people make errors?
Scott Adams deletes all 500
comments in blog





Dear Tog:
Scott Adams moderated 500
comments to his blog and then
deleted them permanently despite
prominent warnings about permanent
deletion. Whose fault was it?
~Veky
Not Scott
A chain of five errors led to Scott
Adams losing his work. Not one of
those errors was his. They had been
made months and even years before
Scott Adams ever started work on his
blog. His was an accident waiting to
happen, an accident that has almost
certainly befallen a large number of
other individuals who have had the
misfortune to use the same software.









Error One: User Model didn't reflect the
Design Model
Scott Adams believed that there were two
documents holding his comments… there was
only one database.
Error Two: Misleading metaphor
“Publish” [used to mean]… the mass replication
and distribution of a document…. [some
developers] decided to drastically redefine
“publish” to “set a little flag.”
Error Three: Confirmation Dialogs
Ambiguous
dialogs kept warning Scott Adams about
destroying what he considered now-useless
information. Of course, he Okayed them.
Error Four: Confirmation Substituted for
Undo
Often, developers wanting to avoid undo will
throw in a confirmation dialog instead…. The only
effect of such dialogs is to make the developers
feel good: “The users may be screwing up, but
we warned them, so it is their own fault.”
Error Five: No Usability Evaluation
Source: Toggazini, Bruce. “The Scott Adams Meltdown: Anatomy of a Disaster”. http://www.asktog.com/columns/069ScottAdamsMeltdown.html
Marr’s 3 Levels of
Representation
 Computational (semantic, content)
 Algorithmic (syntactic, form)
 Implementational (physical, medium)
What is a Mental Model?
 “defined inputs and outputs that lead to a
believable process which operates on the
inputs to produce outputs.”
What kinds of models?




My own behavior
Someone else’s behavior
A software application
…or any information process that’s
mediated
Learning Mental Models
 “A text processor is a typewriter”
 “Indeed, the models that learners
spontaneously form are incomplete,
inconsistent, unstable in time, and often
rife with superstition”
 Olson and Carroll
The Design of Everyday
Things
Examples
Source: Norman, Don. The Design of Everyday Things. Currency, 1990.
ON DOORS &
AFFORDANCES
Users / designers communicate
through their mental models
 Designer’s model = mental/conceptual
model of the system
 User’s model = mental model developed
through interaction with the system
 Designer expects user’s model to be the
same as the designer’s model
 But often it isn’t!
Source: Norman, Don. The Design of Everyday Things. Currency, 1990.
Conceptual Model Mismatch
 Mismatch between designer’s & user’s
conceptual models leads to…




Slow performance
Errors
Frustration
...
The gap : the gulfs of
execution & evaluation
 The right mental model can reduce the
gulfs
Source: Norman, Don. The Design of Everyday Things. Currency, 1990.
Good design reduces the
gaps
Source: Norman, Don. The Design of Everyday Things. Currency, 1990.
Examples (Bad) : Old
Refrigerator
freezer
fresh food
Problem: freezer too cold, but fresh food just right
Source: Norman, Don. The Design of Everyday Things. Currency, 1990. James Landay, CS160 UC Berkeley, Mental Models Lecture.
Example (bad): Refrigerator
Controls
Normal Settings
Colder Fresh Food
Coldest Fresh Food
Colder Freezer
Warmer Fresh Food
OFF (both)
C and 4
A B C D E
7 6
C and 5-6
B and 7
D and 6-7
C and 3-1
0
5 4 3
What is your conceptual model?
Source: Norman, Don. The Design of Everyday Things. Currency, 1990. James Landay, CS160 UC Berkeley, Mental Models Lecture.
Example (bad): Most Likely
Conceptual Model
A B C D E
7 6
cooling
unit
5 4 3
cooling
unit
i.e., independent controls
Source: Norman, Don. The Design of Everyday Things. Currency, 1990. James Landay, CS160 UC Berkeley, Mental Models Lecture.
Example (bad): Actual
Conceptual Model
7 6
5 4 3
cooling
unit
A B C D E
Now can you fix the problem?
Source: Norman, Don. The Design of Everyday Things. Currency, 1990. James Landay, CS160 UC Berkeley, Mental Models Lecture.
Principles of mental models
 Controls mapped to actions in an
understandable way
 affordances disclose how to performing an
action
 sense making: user problem solving allows the
user to make sense of the interface
 analogies / examples play a key role in
communicating how a design works
Source: Norman, Don. The Design of Everyday Things. Currency, 1990. Klemmer, Scott, Examples Research.
Direct manipulation
 Immediate feedback on actions
 Continuous representations of objects
 Real world metaphors / mental models
 Direct manipulation can minimize the gap
Source: Hutchins, Edwin L.. James D. Hollan, and Donald Norman.Direct manipulation interfaces. (1985). Shneiderman, Ben. "Direct manipulation: a step beyon
languages," IEEE Computer 16(8) (August 1983), 57-69.
Notorious Example
What happens in good
designs
 Good idea of how each object works and
how to control it
 Interface itself discloses how it is used
 The art in design is to translate users
cognitive capabilities and existing mental
models into interfaces that work!
Source: Norman, Don. The Design of Everyday Things. Currency, 1990.
Example (good)
Mercedes S500 Car Seat Controller
Source: http://www.lilviv.com/motoring/cars/s500/seatcont.jpg
Make Things Visible
 Refrigerator (?)
 make the A..E dial something about percentage of
cooling between the two compartments?
 Controls available on watch w/ 3 buttons?
 too many and they are not visible!
 Compare to controls on simple car radio
 #controls = #functions
 controls are labeled (?) and grouped together
Map Interface Controls
 Control should mirror real-world
 Which is better for dashboard speaker front /
back control?
Dashboard
Map Interface Controls
Map Interface Controls
Evolution of Windows
Xerox
Star
Windows
3.1
Source: Xerox, Apple, Microsoft, Wikipedia
Mac
OS
Windows
Vista
COMMAND LINE v. GUI
Desktop to mobile…
Original Microsoft
Palm PC
Source: Microsoft, Wikipedia
Windows Mobile 6
visibility
Paper Flight Strips
visibility
E-Voting
“If technology is to
provide an advantage,
the correspondence to
the real world must
break down at some
point.”
- Jonathan Grudin
NEW
TECHNOLOGY
CURRENT
PRACTICE
minimize
this distance
thick practice
Medical Records
thick practice
Final Scratch
Announcements
 Individual grades and aggregate statistics
are posted for assignments 1 & 2
 Attendance is posted for studios 1-3
 Assignment 3 grades will be posted
tomorrow
 You can view all of this on the studio
page
 Email cs147@cs with any questions
(errors are most likely due to studio
Further Reading
 Mental Models
 Olson and Carroll 1984
 Gentner and Stevens, Mental Models
 Errors
 Norman, Design of Everyday Things (chapter _)
 Norman, Things that Make Us Smart (chapter 5)
 Norman, Design Rules based on analyses of human
error
 James Reason, Human Error
 Direct Manipulation
 Shneiderman
 Hutchins, Hollan, Norman