1 / 37

Lecture 2: Learnability

Lecture 2: Learnability. UI Hall of Fame or Shame?. Source: Interface Hall of Shame. UI Hall of Shame!. Source: Interface Hall of Shame. UI Hall of Shame. Source: Interface Hall of Shame. mouse over. Nanoquiz. closed book, closed notes submit before time is up (paper or web)

kitra
Download Presentation

Lecture 2: Learnability

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Lecture 2: Learnability 6.813/6.831 User Interface Design and Implementation

  2. UI Hall of Fame or Shame? Source: Interface Hall of Shame 6.813/6.831 User Interface Design and Implementation

  3. UI Hall of Shame! Source: Interface Hall of Shame 6.813/6.831 User Interface Design and Implementation

  4. UI Hall of Shame Source: Interface Hall of Shame mouse over 6.813/6.831 User Interface Design and Implementation

  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. 11 20 19 18 17 16 15 14 13 12 10 7 1 9 8 0 2 5 4 3 6 NQ1 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.

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

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

  9. 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 Working Memory Long-term Memory 6.813/6.831 User Interface Design and Implementation

  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 6.813/6.831 User Interface Design and Implementation

  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 6.813/6.831 User Interface Design and Implementation

  12. Gulfs of Execution and Evaluation Intention UserGoals Evaluation GULF OFEVALUATION GULF OF EXECUTION Planning Interpretation System Execution Perception 6.813/6.831 User Interface Design and Implementation

  13. Interaction Styles • Command language • Menus & forms • Direct manipulation 6.813/6.831 User Interface Design and Implementation

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

  15. Menus and Forms • User is prompted to choose from menus and fill in forms 6.813/6.831 User Interface Design and Implementation

  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 Scrollbar Files & folders on desktop Selection handles 6.813/6.831 User Interface Design and Implementation

  17. 6.813/6.831 User Interface Design and Implementation

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

  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 6.813/6.831 User Interface Design and Implementation

  20. Models in UI Design • Three models are relevant to UI design: Usermodel Interfacemodel Systemmodel 6.813/6.831 User Interface Design and Implementation

  21. Interface Model Hides System Model • Interface model should be: • Simple • Appropriate: reflect user’s model of the task • Well-communicated 6.813/6.831 User Interface Design and Implementation

  22. User Model May Be Wrong • Sometimes harmless • Electricity as water • Sometimes misleading • Thermostat as a valve 6.813/6.831 User Interface Design and Implementation

  23. Example: the Back Button 6.813/6.831 User Interface Design and Implementation

  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 6.813/6.831 User Interface Design and Implementation

  25. Affordances • Perceived and actual properties of a thing that determine how the thing could be used • Perceived vs. actual 6.813/6.831 User Interface Design and Implementation

  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 6.813/6.831 User Interface Design and Implementation

  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 mouse over 6.813/6.831 User Interface Design and Implementation

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

  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 6.813/6.831 User Interface Design and Implementation

  30. Consistency of Layout 6.813/6.831 User Interface Design and Implementation

  31. Consistency in Wording 6.813/6.831 User Interface Design and Implementation

  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 Source: Interface Hall of Shame 6.813/6.831 User Interface Design and Implementation

  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 6.813/6.831 User Interface Design and Implementation

  34. Metaphors • Advantages • Highly learnable when appropriate • Hooks into user’s existing mentalmodels 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 Desktop metaphor Trashcan metaphor 6.813/6.831 User Interface Design and Implementation

  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 6.813/6.831 User Interface Design and Implementation

  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 6.813/6.831 User Interface Design and Implementation

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

More Related