CS376 Introduction

1
Direct Manipulationand Mental Models
Scott Klemmertas Marcello Bastea-Forte, Joel
Brandt,Neil Patel, Leslie Wu, Mike Cammarano
16 October 2007
2

• How do people learn interactive systems?
• What makes an interface easy or hard to remember?
• Why do people make errors?

3
(No Transcript)
4
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/069ScottAdamsMeltdow
n.html
5
Marrs 3 Levels of Representation

• Computational (semantic, content)
• Algorithmic (syntactic, form)
• Implementational (physical, medium)

6
What is a Mental Model?

• defined inputs and outputs that lead to a
  believable process which operates on the inputs
  to produce outputs.

7
What kinds of models?

• My own behavior
• Someone elses behavior
• A software application
• or any information process thats mediated

8
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

9
The Design of Everyday Things
Examples
Source Norman, Don. The Design of Everyday
Things. Currency, 1990.
10
ON DOORS AFFORDANCES
11
Users / designers communicate through their
mental models

• Designers model mental/conceptual model of the
  system
• Users model mental model developed through
  interaction with the system
• Designer expects users model to be the same as
  the designers model
• But often it isnt!

Source Norman, Don. The Design of Everyday
Things. Currency, 1990.
12
Conceptual Model Mismatch

• Mismatch between designers users conceptual
  models leads to
• Slow performance
• Errors
• Frustration
• ...

13
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.
14
Good design reduces the gaps
Source Norman, Don. The Design of Everyday
Things. Currency, 1990.
15
Examples (Bad) Old Refrigerator

• 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.
16
Example (bad) Refrigerator Controls

• What is your conceptual model?

Source Norman, Don. The Design of Everyday
Things. Currency, 1990. James Landay, CS160 UC
Berkeley, Mental Models Lecture.
17
Example (bad) Most Likely Conceptual Model

• i.e., independent controls

Source Norman, Don. The Design of Everyday
Things. Currency, 1990. James Landay, CS160 UC
Berkeley, Mental Models Lecture.
18
Example (bad) Actual Conceptual Model

• Now can you fix the problem?

Source Norman, Don. The Design of Everyday
Things. Currency, 1990. James Landay, CS160 UC
Berkeley, Mental Models Lecture.
19
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.
20
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.
21
Notorious Example
22
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.
23
Example (good)
Mercedes S500 Car Seat Controller
Source http//www.lilviv.com/motoring/cars/s500/s
eatcont.jpg
24
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

25
Map Interface Controls

• Control should mirror real-world
• Which is better for dashboard speaker front /
  back control?

Dashboard
26
Map Interface Controls
27
Map Interface Controls
28
Evolution of Windows
Xerox Star
Mac OS
Windows 3.1
Windows Vista
Source Xerox, Apple, Microsoft, Wikipedia
29
COMMAND LINE v. GUI
30
Desktop to mobile
Original Microsoft Palm PC
Windows Mobile 6
Source Microsoft, Wikipedia
31
Paper Flight Strips
visibility
32
visibility
E-Voting
33
If technology is to provide an advantage, the
correspondence to the real world must break down
at some point. - Jonathan Grudin
34
NEW TECHNOLOGY
minimize this distance
CURRENT PRACTICE
35
thick practice
Medical Records
36
Final Scratch
thick practice
37
(No Transcript)
38
(No Transcript)
39
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_at_cs with any questions(errors are
  most likely due to studio shifting)

40
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