View
216
Download
0
Category
Tags:
Preview:
Citation preview
stanford hci group / cs147
http://cs147.stanford.edu16 October 2007
Direct Manipulationand Mental ModelsScott Klemmertas: Marcello Bastea-Forte, Joel Brandt,Neil Patel, Leslie Wu, Mike 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.
Source: Toggazini, Bruce. “The Scott Adams Meltdown: Anatomy of a Disaster”. http://www.asktog.com/columns/069ScottAdamsMeltdown.html
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
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
Source: Norman, Don. The Design of Everyday Things. Currency, 1990.
Examples
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
Problem: freezer too cold, but fresh food just right
freezer
fresh food
Source: Norman, Don. The Design of Everyday Things. Currency, 1990. James Landay, CS160 UC Berkeley, Mental Models Lecture.
Example (bad): Refrigerator Controls
What is your conceptual model?
A B C D E 7 6 5 4 3
Normal Settings C and 4Colder Fresh Food C and 5-6Coldest Fresh Food B and 7Colder Freezer D and 6-7Warmer Fresh Food C and 3-1OFF (both) 0
Source: Norman, Don. The Design of Everyday Things. Currency, 1990. James Landay, CS160 UC Berkeley, Mental Models Lecture.
Example (bad): Most Likely Conceptual Model
i.e., independent controls
A B C D Ecooling
unit
7 6 5 4 3
coolingunit
Source: Norman, Don. The Design of Everyday Things. Currency, 1990. James Landay, CS160 UC Berkeley, Mental Models Lecture.
Example (bad): Actual Conceptual Model
Now can you fix the problem?
A B C D E
7 6 5 4 3
coolingunit
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 beyond programming 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)
Source: http://www.lilviv.com/motoring/cars/s500/seatcont.jpg
Mercedes S500 Car Seat Controller
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
Control should mirror real-world Which is better for dashboard speaker
front / back control?
Dashboard
Map Interface Controls
Map Interface Controls
Map Interface Controls
Evolution of Windows
Source: Xerox, Apple, Microsoft, Wikipedia
Xerox Star
Windows 3.1
Mac OS
WindowsVista
COMMAND LINE v. GUI
Desktop to mobile…
Source: Microsoft, Wikipedia
Original MicrosoftPalm PC
Windows Mobile 6
Paper Flight Stripsvisibility
E-Votingvisibility
“If technology is to provide an advantage, the correspondence to the real world must break down at some point.”
- Jonathan Grudin
NEW TECHNOLOGY
minimize this distanceCURRENT
PRACTICE
Medical Recordsthick practice
Final Scratchthick practice
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 shifting)
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
Recommended