1. stanford hci group / cs147 http://cs147.stanford.ed u 16 October 2007 Direct Manipulation and Mental Models Scott Klemmer tas: Marcello Bastea-Forte, Joel Brandt, Neil Patel, Leslie Wu, Mike Cammarano

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

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 Source: Norman, Don. The Design of Everyday Things. Currency, 1990. Examples

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

16. Example (bad): Refrigerator Controls What is your conceptual model? A B C D E 7 6 5 4 3 Normal SettingsC and 4 Colder Fresh FoodC and 5-6 Coldest Fresh FoodB and 7 Colder FreezerD and 6-7 Warmer Fresh FoodC and 3-1 OFF (both)0 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 A B C D E cooling unit 7 6 5 4 3 cooling unit 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? A B C D E7 6 5 4 3 cooling unit 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) Source: http://www.lilviv.com/motoring/cars/s500/seatcont.jpg Mercedes S500 Car Seat Controller

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.  Control should mirror real-world  Which is better for dashboard speaker front / back control? Dashboard Map Interface Controls

28. Evolution of Windows Source: Xerox, Apple, Microsoft, Wikipedia Xerox Star Windows 3.1 Mac OS Windows Vista

29. COMMAND LINE v. GUI

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

31. Paper Flight Strips visibility

32. E-Voting visibility

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. Medical Records thick practice

36. Final Scratch thick practice

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