1. Spring 20116.813/6.831 User Interface Design and Implementation1 Lecture 2: Learnability

2. UI Hall of Fame or Shame? Spring 20116.813/6.831 User Interface Design and Implementation2 Source: Interface Hall of Shame

3. UI Hall of Shame! Spring 20116.813/6.831 User Interface Design and Implementation3 Source: Interface Hall of Shame

4. UI Hall of Shame Spring 20116.813/6.831 User Interface Design and Implementation4 mouse over Source: Interface Hall of Shame

5. Nanoquiz closed book, closed notes submit before time is up (paper or web) we’ll show a timer for the last 20 seconds

6. 1. Which of the following are NOT dimensions of usability? A. satisfaction B. reliability C. efficiency D. functionality E. learnability 2. For the anecdote below: An oil spill was caused by a helm lever on an oil tanker. The lever had three positions: Autopilot – Manual – Disconnected. In a tight passage off English coast, trying to maneuver in a narrow channel with fishing boats, the captain accidentally pushed the lever too far – past Manual to Disconnected. Since the supertanker turned very slowly anyway, the crew didn’t realize at first that they weren’t turning at all. Even then, they had so many other hypotheses for why the helm wasn’t responding (burned-out fuse, interconnect problem, etc.) that they didn’t think of the lever. The tanker hit the rocks, and a large oil spill resulted. Which dimensions of usability are relevant to the failure in this story? A. efficiency B. visibility C. learnability D. errors E. satisfaction 3. Why are user interfaces hard to design? (choose all good answers) A. People are hard to predict. B. Software engineers are different from most people. C. Usability is largely a matter of personal taste. D. It’s hard for designers to forget what they know. E. UI design is an aesthetic process and hard to approach objectively or scientifically. NQ1 2019181716151413121110 9 8 7 6 5 4 3 2 1 0

7. Today’s Topics Human memory Interaction styles User model vs. system model Learnability principles & design patterns

8. People Don't Learn Instantly 6.813/6.831 User Interface Design and Implementation Source: Interface Hall of Shame Spring 20118

9. 6.813/6.831 User Interface Design and Implementation9 Memory Working memory –Small: 7 ± 2 “ chunks ” –Short-lived: ~10 sec –Maintenance rehearsal fends off decay (but costs attention) Long-term memory –Practically infinite in size and duration –Elaborative rehearsal transfers chunks to long- term memory Long-term Memory Working Memory

10. Chunking “Chunk” is a unit of memory or perception –Depends both on presentation and on what you already know Hard: M W B C R A L O A B I M B F I Easier: MWB CRA LOA BIM BFI Easiest: BMW RCA AOL IBM FBI Spring 20116.813/6.831 User Interface Design and Implementation10

11. Recognition vs. Recall Recognition: remembering with the help of a visible cue –aka “Knowledge in the world” Recall: remembering with no help –aka “Knowledge in the head” Recognition is much easier –so menus are more learnable than command languages Spring 20116.813/6.831 User Interface Design and Implementation11

12. Gulfs of Execution and Evaluation Spring 20116.813/6.831 User Interface Design and Implementation Evaluation Interpretation Perception Intention Planning Execution User Goals System GULF OF EVALUATION GULF OF EXECUTION 12

13. Interaction Styles Command language Menus & forms Direct manipulation Spring 20116.813/6.831 User Interface Design and Implementation13

14. Command Language User types in commands in an artificial language Spring 20116.813/6.831 User Interface Design and Implementation14 ls -l *.java +6.831 site:mit.edu Unix shell search engine query URL http://www.mit.edu/admissions/

15. Menus and Forms User is prompted to choose from menus and fill in forms Spring 20116.813/6.831 User Interface Design and Implementation15

16. Direct Manipulation User interacts with visual representation of data objects –Continuous visual representation –Physical actions or labeled button presses –Rapid, incremental, reversible, immediately visible effects Spring 20116.813/6.831 User Interface Design and Implementation16 Files & folders on desktop Scrollbar Selection handles

17. Spring 20116.813/6.831 User Interface Design and Implementation17

18. Comparison of Interaction Styles Knowledge in the head vs. world Error messages Efficiency User experience Synchrony Programming difficulty Accessibility Spring 20116.813/6.831 User Interface Design and Implementation18

19. Models Model of a system = how it works –its constituent parts and how they work together to do what the system does Implementation models –Pixel editing vs. structured graphics –Text file as single string vs. list of lines Interface models –RealCD ’ s online help as liner notes Spring 20116.813/6.831 User Interface Design and Implementation19

20. Models in UI Design Three models are relevant to UI design: Spring 20116.813/6.831 User Interface Design and Implementation20 User model Interface model System model

21. Interface Model Hides System Model Interface model should be: –Simple –Appropriate: reflect user ’ s model of the task –Well-communicated Spring 20116.813/6.831 User Interface Design and Implementation21

22. User Model May Be Wrong Sometimes harmless –Electricity as water Sometimes misleading –Thermostat as a valve Spring 20116.813/6.831 User Interface Design and Implementation22

23. Example: the Back Button Spring 20116.813/6.831 User Interface Design and Implementation23

24. Learnability Principles Cues that communicate the system model –Affordances –Natural mapping –Visibility –Feedback Consistency –Internal, external, metaphorical –Speak the user’s language –Metaphors –Platform standards Spring 20116.813/6.831 User Interface Design and Implementation24

25. Affordances Perceived and actual properties of a thing that determine how the thing could be used Perceived vs. actual Spring 20116.813/6.831 User Interface Design and Implementation25

26. Natural Mapping Physical arrangement of controls should match arrangement of function Best mapping is direct, but natural mappings don ’ t have to be direct –Light switches –Stove burners –Turn signals –Audio mixer Spring 20116.813/6.831 User Interface Design and Implementation26

27. Visibility Relevant parts of system should be visible –Not usually a problem in the real world –But takes extra effort in computer interfaces Availability of drag & drop is often invisible Spring 20116.813/6.831 User Interface Design and Implementation27 mouse over

28. Feedback Actions should have immediate, visible effects –Push buttons –Scrollbars –Drag & drop Kinds of feedback –Visual –Audio –Haptic Spring 20116.813/6.831 User Interface Design and Implementation28

29. Consistency Also called the “principle of least surprise” –Similar things should look and act similar –Different things should look different Kinds of consistency –Internal –External –Metaphorical Spring 20116.813/6.831 User Interface Design and Implementation29

30. Consistency of Layout Spring 20116.813/6.831 User Interface Design and Implementation30

31. Consistency in Wording Spring 20116.813/6.831 User Interface Design and Implementation31

32. Speak the User’s Language Use common words, not techie jargon –But use domain-specific terms where appropriate Allow aliases/synonyms in command languages Spring 20116.813/6.831 User Interface Design and Implementation32 Source: Interface Hall of Shame

33. Follow Platform Standards Follow platform standards –Apple Human Interface Guidelines –Windows Vista User Experience Guidelines –GNOME Human Interface Guidelines –KDE User Interface Guidelines –Java Look & Feel Design Guidelines Or imitate what the popular programs do Spring 20116.813/6.831 User Interface Design and Implementation33

34. Metaphors Advantages –Highly learnable when appropriate –Hooks into user’s existing mental models very easily Dangers –Often hard for designers to find –May be deceptive –May be constraining –Metaphor is usually broken somewhere –Use of a metaphor doesn ’ t excuse other bad design decisions Spring 20116.813/6.831 User Interface Design and Implementation34 Desktop metaphor Trashcan metaphor

35. Case Against Consistency (Grudin) Inconsistency is appropriate when context and task demand it –Arrow keys But if all else is (almost) equal, consistency wins –QWERTY vs. Dvorak –OK/Cancel button order Spring 20116.813/6.831 User Interface Design and Implementation35

36. Summary Learnable interfaces should clearly communicate the correct mental model to the user –Use affordances, natural mapping, visibility –Consider metaphors –Be consistent internally, externally, metaphorically –Prefer knowledge in the world over knowledge in the head Spring 20116.813/6.831 User Interface Design and Implementation36

37. Next Time: UI Hall of Fame or Shame? Spring 20116.813/6.831 User Interface Design and Implementation37 Suggested by Vishy Venugopalan