Stanford hci group / cs147 u 14 October 2008 Direct Manipulation and Mental Models Scott Klemmer...
-
Upload
nora-wadhams -
Category
Documents
-
view
216 -
download
0
Transcript of Stanford hci group / cs147 u 14 October 2008 Direct Manipulation and Mental Models Scott Klemmer...
![Page 1: Stanford hci group / cs147 u 14 October 2008 Direct Manipulation and Mental Models Scott Klemmer tas: Amal dar Aziz, Mike Krieger,](https://reader036.fdocuments.in/reader036/viewer/2022081514/56649c885503460f94940f43/html5/thumbnails/1.jpg)
stanford hci group / cs147
http://cs147.stanford.edu14 October 2008
Direct Manipulationand Mental ModelsScott Klemmertas: Amal dar Aziz, Mike Krieger, Ranjitha Kumar,Steve Marmon, Neema Moraveji, Neil Patel
![Page 2: Stanford hci group / cs147 u 14 October 2008 Direct Manipulation and Mental Models Scott Klemmer tas: Amal dar Aziz, Mike Krieger,](https://reader036.fdocuments.in/reader036/viewer/2022081514/56649c885503460f94940f43/html5/thumbnails/2.jpg)
How do people learn interactive systems?
What makes an interface easy or hard to remember?
Why do people make errors? What makes an interface “natural”
![Page 3: Stanford hci group / cs147 u 14 October 2008 Direct Manipulation and Mental Models Scott Klemmer tas: Amal dar Aziz, Mike Krieger,](https://reader036.fdocuments.in/reader036/viewer/2022081514/56649c885503460f94940f43/html5/thumbnails/3.jpg)
![Page 4: Stanford hci group / cs147 u 14 October 2008 Direct Manipulation and Mental Models Scott Klemmer tas: Amal dar Aziz, Mike Krieger,](https://reader036.fdocuments.in/reader036/viewer/2022081514/56649c885503460f94940f43/html5/thumbnails/4.jpg)
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
![Page 5: Stanford hci group / cs147 u 14 October 2008 Direct Manipulation and Mental Models Scott Klemmer tas: Amal dar Aziz, Mike Krieger,](https://reader036.fdocuments.in/reader036/viewer/2022081514/56649c885503460f94940f43/html5/thumbnails/5.jpg)
Marr’s 3 Levels of Representation
Computational (semantic, content) Algorithmic (syntactic, form) Implementational (physical,
medium)
![Page 6: Stanford hci group / cs147 u 14 October 2008 Direct Manipulation and Mental Models Scott Klemmer tas: Amal dar Aziz, Mike Krieger,](https://reader036.fdocuments.in/reader036/viewer/2022081514/56649c885503460f94940f43/html5/thumbnails/6.jpg)
What is a Mental Model?
“defined inputs and outputs that lead to a believable process which operates on the inputs to produce outputs.”
![Page 7: Stanford hci group / cs147 u 14 October 2008 Direct Manipulation and Mental Models Scott Klemmer tas: Amal dar Aziz, Mike Krieger,](https://reader036.fdocuments.in/reader036/viewer/2022081514/56649c885503460f94940f43/html5/thumbnails/7.jpg)
What kinds of models?
My own behavior Someone else’s behavior A software application …or any information process that’s
mediated
![Page 8: Stanford hci group / cs147 u 14 October 2008 Direct Manipulation and Mental Models Scott Klemmer tas: Amal dar Aziz, Mike Krieger,](https://reader036.fdocuments.in/reader036/viewer/2022081514/56649c885503460f94940f43/html5/thumbnails/8.jpg)
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
![Page 9: Stanford hci group / cs147 u 14 October 2008 Direct Manipulation and Mental Models Scott Klemmer tas: Amal dar Aziz, Mike Krieger,](https://reader036.fdocuments.in/reader036/viewer/2022081514/56649c885503460f94940f43/html5/thumbnails/9.jpg)
The Design of Everyday Things
Source: Norman, Don. The Design of Everyday Things. Currency, 1990.
![Page 10: Stanford hci group / cs147 u 14 October 2008 Direct Manipulation and Mental Models Scott Klemmer tas: Amal dar Aziz, Mike Krieger,](https://reader036.fdocuments.in/reader036/viewer/2022081514/56649c885503460f94940f43/html5/thumbnails/10.jpg)
ON DOORS & AFFORDANCES
![Page 11: Stanford hci group / cs147 u 14 October 2008 Direct Manipulation and Mental Models Scott Klemmer tas: Amal dar Aziz, Mike Krieger,](https://reader036.fdocuments.in/reader036/viewer/2022081514/56649c885503460f94940f43/html5/thumbnails/11.jpg)
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.
![Page 12: Stanford hci group / cs147 u 14 October 2008 Direct Manipulation and Mental Models Scott Klemmer tas: Amal dar Aziz, Mike Krieger,](https://reader036.fdocuments.in/reader036/viewer/2022081514/56649c885503460f94940f43/html5/thumbnails/12.jpg)
Conceptual Model Mismatch
Mismatch between designer’s & user’s conceptual models leads to… Slow performance Errors Frustration ...
![Page 13: Stanford hci group / cs147 u 14 October 2008 Direct Manipulation and Mental Models Scott Klemmer tas: Amal dar Aziz, Mike Krieger,](https://reader036.fdocuments.in/reader036/viewer/2022081514/56649c885503460f94940f43/html5/thumbnails/13.jpg)
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.
![Page 14: Stanford hci group / cs147 u 14 October 2008 Direct Manipulation and Mental Models Scott Klemmer tas: Amal dar Aziz, Mike Krieger,](https://reader036.fdocuments.in/reader036/viewer/2022081514/56649c885503460f94940f43/html5/thumbnails/14.jpg)
Good design reduces the gaps
Source: Norman, Don. The Design of Everyday Things. Currency, 1990.
![Page 15: Stanford hci group / cs147 u 14 October 2008 Direct Manipulation and Mental Models Scott Klemmer tas: Amal dar Aziz, Mike Krieger,](https://reader036.fdocuments.in/reader036/viewer/2022081514/56649c885503460f94940f43/html5/thumbnails/15.jpg)
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.
![Page 16: Stanford hci group / cs147 u 14 October 2008 Direct Manipulation and Mental Models Scott Klemmer tas: Amal dar Aziz, Mike Krieger,](https://reader036.fdocuments.in/reader036/viewer/2022081514/56649c885503460f94940f43/html5/thumbnails/16.jpg)
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.
![Page 17: Stanford hci group / cs147 u 14 October 2008 Direct Manipulation and Mental Models Scott Klemmer tas: Amal dar Aziz, Mike Krieger,](https://reader036.fdocuments.in/reader036/viewer/2022081514/56649c885503460f94940f43/html5/thumbnails/17.jpg)
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.
![Page 18: Stanford hci group / cs147 u 14 October 2008 Direct Manipulation and Mental Models Scott Klemmer tas: Amal dar Aziz, Mike Krieger,](https://reader036.fdocuments.in/reader036/viewer/2022081514/56649c885503460f94940f43/html5/thumbnails/18.jpg)
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.
![Page 19: Stanford hci group / cs147 u 14 October 2008 Direct Manipulation and Mental Models Scott Klemmer tas: Amal dar Aziz, Mike Krieger,](https://reader036.fdocuments.in/reader036/viewer/2022081514/56649c885503460f94940f43/html5/thumbnails/19.jpg)
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.
![Page 20: Stanford hci group / cs147 u 14 October 2008 Direct Manipulation and Mental Models Scott Klemmer tas: Amal dar Aziz, Mike Krieger,](https://reader036.fdocuments.in/reader036/viewer/2022081514/56649c885503460f94940f43/html5/thumbnails/20.jpg)
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.
![Page 21: Stanford hci group / cs147 u 14 October 2008 Direct Manipulation and Mental Models Scott Klemmer tas: Amal dar Aziz, Mike Krieger,](https://reader036.fdocuments.in/reader036/viewer/2022081514/56649c885503460f94940f43/html5/thumbnails/21.jpg)
Notorious Example
![Page 22: Stanford hci group / cs147 u 14 October 2008 Direct Manipulation and Mental Models Scott Klemmer tas: Amal dar Aziz, Mike Krieger,](https://reader036.fdocuments.in/reader036/viewer/2022081514/56649c885503460f94940f43/html5/thumbnails/22.jpg)
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.
![Page 23: Stanford hci group / cs147 u 14 October 2008 Direct Manipulation and Mental Models Scott Klemmer tas: Amal dar Aziz, Mike Krieger,](https://reader036.fdocuments.in/reader036/viewer/2022081514/56649c885503460f94940f43/html5/thumbnails/23.jpg)
Example (good)
Source: http://www.lilviv.com/motoring/cars/s500/seatcont.jpg
Mercedes S500 Car Seat Controller
![Page 24: Stanford hci group / cs147 u 14 October 2008 Direct Manipulation and Mental Models Scott Klemmer tas: Amal dar Aziz, Mike Krieger,](https://reader036.fdocuments.in/reader036/viewer/2022081514/56649c885503460f94940f43/html5/thumbnails/24.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
![Page 25: Stanford hci group / cs147 u 14 October 2008 Direct Manipulation and Mental Models Scott Klemmer tas: Amal dar Aziz, Mike Krieger,](https://reader036.fdocuments.in/reader036/viewer/2022081514/56649c885503460f94940f43/html5/thumbnails/25.jpg)
Control should mirror real-world Which is better for dashboard speaker
front / back control?
Dashboard
Map Interface Controls
![Page 26: Stanford hci group / cs147 u 14 October 2008 Direct Manipulation and Mental Models Scott Klemmer tas: Amal dar Aziz, Mike Krieger,](https://reader036.fdocuments.in/reader036/viewer/2022081514/56649c885503460f94940f43/html5/thumbnails/26.jpg)
Map Interface Controls
![Page 27: Stanford hci group / cs147 u 14 October 2008 Direct Manipulation and Mental Models Scott Klemmer tas: Amal dar Aziz, Mike Krieger,](https://reader036.fdocuments.in/reader036/viewer/2022081514/56649c885503460f94940f43/html5/thumbnails/27.jpg)
Map Interface Controls
![Page 28: Stanford hci group / cs147 u 14 October 2008 Direct Manipulation and Mental Models Scott Klemmer tas: Amal dar Aziz, Mike Krieger,](https://reader036.fdocuments.in/reader036/viewer/2022081514/56649c885503460f94940f43/html5/thumbnails/28.jpg)
Evolution of Windows
Source: Xerox, Apple, Microsoft, Wikipedia
Xerox Star
Windows 3.1
Mac OS
WindowsVista
![Page 29: Stanford hci group / cs147 u 14 October 2008 Direct Manipulation and Mental Models Scott Klemmer tas: Amal dar Aziz, Mike Krieger,](https://reader036.fdocuments.in/reader036/viewer/2022081514/56649c885503460f94940f43/html5/thumbnails/29.jpg)
COMMAND LINE v. GUI
![Page 30: Stanford hci group / cs147 u 14 October 2008 Direct Manipulation and Mental Models Scott Klemmer tas: Amal dar Aziz, Mike Krieger,](https://reader036.fdocuments.in/reader036/viewer/2022081514/56649c885503460f94940f43/html5/thumbnails/30.jpg)
Desktop to mobile…
Source: Microsoft, Wikipedia
Original MicrosoftPalm PC
Windows Mobile 6
![Page 31: Stanford hci group / cs147 u 14 October 2008 Direct Manipulation and Mental Models Scott Klemmer tas: Amal dar Aziz, Mike Krieger,](https://reader036.fdocuments.in/reader036/viewer/2022081514/56649c885503460f94940f43/html5/thumbnails/31.jpg)
E-Votingvisibility
![Page 32: Stanford hci group / cs147 u 14 October 2008 Direct Manipulation and Mental Models Scott Klemmer tas: Amal dar Aziz, Mike Krieger,](https://reader036.fdocuments.in/reader036/viewer/2022081514/56649c885503460f94940f43/html5/thumbnails/32.jpg)
“If technology is to provide an advantage, the correspondence to the real world must break down at some point.”
- Jonathan Grudin
![Page 33: Stanford hci group / cs147 u 14 October 2008 Direct Manipulation and Mental Models Scott Klemmer tas: Amal dar Aziz, Mike Krieger,](https://reader036.fdocuments.in/reader036/viewer/2022081514/56649c885503460f94940f43/html5/thumbnails/33.jpg)
NEW TECHNOLOGY
minimize this distanceCURRENT
PRACTICE
![Page 34: Stanford hci group / cs147 u 14 October 2008 Direct Manipulation and Mental Models Scott Klemmer tas: Amal dar Aziz, Mike Krieger,](https://reader036.fdocuments.in/reader036/viewer/2022081514/56649c885503460f94940f43/html5/thumbnails/34.jpg)
Medical Recordsthick practice
![Page 35: Stanford hci group / cs147 u 14 October 2008 Direct Manipulation and Mental Models Scott Klemmer tas: Amal dar Aziz, Mike Krieger,](https://reader036.fdocuments.in/reader036/viewer/2022081514/56649c885503460f94940f43/html5/thumbnails/35.jpg)
Final Scratchthick practice
![Page 36: Stanford hci group / cs147 u 14 October 2008 Direct Manipulation and Mental Models Scott Klemmer tas: Amal dar Aziz, Mike Krieger,](https://reader036.fdocuments.in/reader036/viewer/2022081514/56649c885503460f94940f43/html5/thumbnails/36.jpg)
![Page 37: Stanford hci group / cs147 u 14 October 2008 Direct Manipulation and Mental Models Scott Klemmer tas: Amal dar Aziz, Mike Krieger,](https://reader036.fdocuments.in/reader036/viewer/2022081514/56649c885503460f94940f43/html5/thumbnails/37.jpg)
![Page 38: Stanford hci group / cs147 u 14 October 2008 Direct Manipulation and Mental Models Scott Klemmer tas: Amal dar Aziz, Mike Krieger,](https://reader036.fdocuments.in/reader036/viewer/2022081514/56649c885503460f94940f43/html5/thumbnails/38.jpg)
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