16 October 2007

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?

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/069ScottAdamsMeltdown.html

5. Marr’s 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 else’s behavior A software application …or any information process that’s 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 • 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.

12. Conceptual Model Mismatch • Mismatch between designer’s & user’s 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. freezer fresh food 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. Normal Settings C and 4 Colder Fresh Food C and 5-6 Coldest Fresh Food B and 7 Colder Freezer D and 6-7 Warmer Fresh Food C and 3-1 OFF (both) 0 A B C D E 7 6 5 4 3 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. A B C D E cooling unit 7 6 5 4 3 cooling unit 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. 7 6 5 4 3 cooling unit A B C D E 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/seatcont.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. visibility Paper Flight Strips

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. thick practice Final Scratch

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@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