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

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”

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.

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

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

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