Direct Manipulation Mental Models How do people learn

Direct Manipulation & Mental Models

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”

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

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 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 freezer fresh food Problem: freezer too cold, but fresh food just right Source: Norman, Don. The Design of Everyday Things. Currency, 1990. James Landay, CS 160 UC Berkeley, Mental Models Lecture.

Example (bad): Refrigerator Controls Normal Settings Colder Fresh Food Coldest Fresh Food Colder Freezer Warmer Fresh Food OFF (both) C and 4 A B C D E 7 C and 5 -6 B and 7 D and 6 -7 C and 3 -1 0 6 5 4 3 What is your conceptual model? Source: Norman, Don. The Design of Everyday Things. Currency, 1990. James Landay, CS 160 UC Berkeley, Mental Models Lecture.

Example (bad): Most Likely Conceptual Model A B C D E 7 6 5 4 cooling unit 3 cooling unit i. e. , independent controls Source: Norman, Don. The Design of Everyday Things. Currency, 1990. James Landay, CS 160 UC Berkeley, Mental Models Lecture.

Example (bad): Actual Conceptual Model 7 6 5 4 3 cooling unit A B C D E Now can you fix the problem? Source: Norman, Don. The Design of Everyday Things. Currency, 1990. James Landay, CS 160 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) Mercedes S 500 Car Seat Controller Source: http: //www. lilviv. com/motoring/cars/s 500/seatcont. 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

Map Interface Controls Control should mirror real-world Which is better for dashboard speaker front / back control? Dashboard

Map Interface Controls

Map Interface Controls

Evolution of Windows Xerox Star Windows 3. 1 Source: Xerox, Apple, Microsoft, Wikipedia Mac OS Windows Vista

COMMAND LINE v. GUI

Desktop to mobile… Original Microsoft Palm PC Source: Microsoft, Wikipedia Windows Mobile 6

visibility E-Voting

“If technology is to provide an advantage, the correspondence to the real world must break down at some point. ” - Jonathan Grudin

NEW TECHNOLOGY CURRENT PRACTICE minimize this distance

thick practice Medical Records

thick practice Final Scratch

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