Download - 16 October 2007
![Page 1: 16 October 2007](https://reader035.vdocuments.net/reader035/viewer/2022062408/56813e18550346895da7fb61/html5/thumbnails/1.jpg)
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
![Page 2: 16 October 2007](https://reader035.vdocuments.net/reader035/viewer/2022062408/56813e18550346895da7fb61/html5/thumbnails/2.jpg)
How do people learn interactive systems?
What makes an interface easy or hard to remember?
Why do people make errors?
![Page 3: 16 October 2007](https://reader035.vdocuments.net/reader035/viewer/2022062408/56813e18550346895da7fb61/html5/thumbnails/3.jpg)
![Page 4: 16 October 2007](https://reader035.vdocuments.net/reader035/viewer/2022062408/56813e18550346895da7fb61/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: 16 October 2007](https://reader035.vdocuments.net/reader035/viewer/2022062408/56813e18550346895da7fb61/html5/thumbnails/5.jpg)
Marr’s 3 Levels of Representation
Computational (semantic, content) Algorithmic (syntactic, form) Implementational (physical,
medium)
![Page 6: 16 October 2007](https://reader035.vdocuments.net/reader035/viewer/2022062408/56813e18550346895da7fb61/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: 16 October 2007](https://reader035.vdocuments.net/reader035/viewer/2022062408/56813e18550346895da7fb61/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: 16 October 2007](https://reader035.vdocuments.net/reader035/viewer/2022062408/56813e18550346895da7fb61/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: 16 October 2007](https://reader035.vdocuments.net/reader035/viewer/2022062408/56813e18550346895da7fb61/html5/thumbnails/9.jpg)
The Design of Everyday Things
Source: Norman, Don. The Design of Everyday Things. Currency, 1990.
Examples
![Page 10: 16 October 2007](https://reader035.vdocuments.net/reader035/viewer/2022062408/56813e18550346895da7fb61/html5/thumbnails/10.jpg)
ON DOORS & AFFORDANCES
![Page 11: 16 October 2007](https://reader035.vdocuments.net/reader035/viewer/2022062408/56813e18550346895da7fb61/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: 16 October 2007](https://reader035.vdocuments.net/reader035/viewer/2022062408/56813e18550346895da7fb61/html5/thumbnails/12.jpg)
Conceptual Model Mismatch
Mismatch between designer’s & user’s conceptual models leads to… Slow performance Errors Frustration ...
![Page 13: 16 October 2007](https://reader035.vdocuments.net/reader035/viewer/2022062408/56813e18550346895da7fb61/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: 16 October 2007](https://reader035.vdocuments.net/reader035/viewer/2022062408/56813e18550346895da7fb61/html5/thumbnails/14.jpg)
Good design reduces the gaps
Source: Norman, Don. The Design of Everyday Things. Currency, 1990.
![Page 15: 16 October 2007](https://reader035.vdocuments.net/reader035/viewer/2022062408/56813e18550346895da7fb61/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: 16 October 2007](https://reader035.vdocuments.net/reader035/viewer/2022062408/56813e18550346895da7fb61/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: 16 October 2007](https://reader035.vdocuments.net/reader035/viewer/2022062408/56813e18550346895da7fb61/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: 16 October 2007](https://reader035.vdocuments.net/reader035/viewer/2022062408/56813e18550346895da7fb61/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: 16 October 2007](https://reader035.vdocuments.net/reader035/viewer/2022062408/56813e18550346895da7fb61/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: 16 October 2007](https://reader035.vdocuments.net/reader035/viewer/2022062408/56813e18550346895da7fb61/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: 16 October 2007](https://reader035.vdocuments.net/reader035/viewer/2022062408/56813e18550346895da7fb61/html5/thumbnails/21.jpg)
Notorious Example
![Page 22: 16 October 2007](https://reader035.vdocuments.net/reader035/viewer/2022062408/56813e18550346895da7fb61/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: 16 October 2007](https://reader035.vdocuments.net/reader035/viewer/2022062408/56813e18550346895da7fb61/html5/thumbnails/23.jpg)
Example (good)
Source: http://www.lilviv.com/motoring/cars/s500/seatcont.jpg
Mercedes S500 Car Seat Controller
![Page 24: 16 October 2007](https://reader035.vdocuments.net/reader035/viewer/2022062408/56813e18550346895da7fb61/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: 16 October 2007](https://reader035.vdocuments.net/reader035/viewer/2022062408/56813e18550346895da7fb61/html5/thumbnails/25.jpg)
Control should mirror real-world Which is better for dashboard speaker
front / back control?
Dashboard
Map Interface Controls
![Page 26: 16 October 2007](https://reader035.vdocuments.net/reader035/viewer/2022062408/56813e18550346895da7fb61/html5/thumbnails/26.jpg)
Map Interface Controls
![Page 27: 16 October 2007](https://reader035.vdocuments.net/reader035/viewer/2022062408/56813e18550346895da7fb61/html5/thumbnails/27.jpg)
Map Interface Controls
![Page 28: 16 October 2007](https://reader035.vdocuments.net/reader035/viewer/2022062408/56813e18550346895da7fb61/html5/thumbnails/28.jpg)
Evolution of Windows
Source: Xerox, Apple, Microsoft, Wikipedia
Xerox Star
Windows 3.1
Mac OS
WindowsVista
![Page 29: 16 October 2007](https://reader035.vdocuments.net/reader035/viewer/2022062408/56813e18550346895da7fb61/html5/thumbnails/29.jpg)
COMMAND LINE v. GUI
![Page 30: 16 October 2007](https://reader035.vdocuments.net/reader035/viewer/2022062408/56813e18550346895da7fb61/html5/thumbnails/30.jpg)
Desktop to mobile…
Source: Microsoft, Wikipedia
Original MicrosoftPalm PC
Windows Mobile 6
![Page 31: 16 October 2007](https://reader035.vdocuments.net/reader035/viewer/2022062408/56813e18550346895da7fb61/html5/thumbnails/31.jpg)
Paper Flight Stripsvisibility
![Page 32: 16 October 2007](https://reader035.vdocuments.net/reader035/viewer/2022062408/56813e18550346895da7fb61/html5/thumbnails/32.jpg)
E-Votingvisibility
![Page 33: 16 October 2007](https://reader035.vdocuments.net/reader035/viewer/2022062408/56813e18550346895da7fb61/html5/thumbnails/33.jpg)
“If technology is to provide an advantage, the correspondence to the real world must break down at some point.”
- Jonathan Grudin
![Page 34: 16 October 2007](https://reader035.vdocuments.net/reader035/viewer/2022062408/56813e18550346895da7fb61/html5/thumbnails/34.jpg)
NEW TECHNOLOGY
minimize this distanceCURRENT
PRACTICE
![Page 35: 16 October 2007](https://reader035.vdocuments.net/reader035/viewer/2022062408/56813e18550346895da7fb61/html5/thumbnails/35.jpg)
Medical Recordsthick practice
![Page 36: 16 October 2007](https://reader035.vdocuments.net/reader035/viewer/2022062408/56813e18550346895da7fb61/html5/thumbnails/36.jpg)
Final Scratchthick practice
![Page 37: 16 October 2007](https://reader035.vdocuments.net/reader035/viewer/2022062408/56813e18550346895da7fb61/html5/thumbnails/37.jpg)
![Page 38: 16 October 2007](https://reader035.vdocuments.net/reader035/viewer/2022062408/56813e18550346895da7fb61/html5/thumbnails/38.jpg)
![Page 39: 16 October 2007](https://reader035.vdocuments.net/reader035/viewer/2022062408/56813e18550346895da7fb61/html5/thumbnails/39.jpg)
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)
![Page 40: 16 October 2007](https://reader035.vdocuments.net/reader035/viewer/2022062408/56813e18550346895da7fb61/html5/thumbnails/40.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