Spring 2011 6.813/6.831 User Interface Design and Implementation 1
Lecture 2: Learnability
UI Hall of Fame or Shame?
Spring 2011 6.813/6.831 User Interface Design and Implementation 2
Source: Interface Hall of Shame
UI Hall of Shame!
Spring 2011 6.813/6.831 User Interface Design and Implementation 3
Source: Interface Hall of Shame
UI Hall of Shame
Spring 2011 6.813/6.831 User Interface Design and Implementation 4
mouse overSource: Interface Hall of Shame
Nanoquiz
• closed book, closed notes• submit before time is up (paper or web)• we’ll show a timer for the last 20 seconds
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
Today’s Topics
• Human memory• Interaction styles• User model vs. system model• Learnability principles & design patterns
People Don't Learn Instantly
6.813/6.831 User Interface Design and Implementation
Source: Interface Hall of Shame
Spring 2011 8
Spring 2011 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
Long-termMemory
WorkingMemory
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 IEasier: MWB CRA LOA BIM BFIEasiest: BMW RCA AOL IBM FBI
Spring 2011 6.813/6.831 User Interface Design and Implementation 10
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 2011 6.813/6.831 User Interface Design and Implementation 11
Gulfs of Execution and Evaluation
Spring 2011 6.813/6.831 User Interface Design and Implementation
Evaluation
Interpretation
Perception
Intention
Planning
Execution
UserGoals
System
GULF OFEVALUATION
GULF OF EXECUTION
12
Interaction Styles
• Command language• Menus & forms• Direct manipulation
Spring 2011 6.813/6.831 User Interface Design and Implementation 13
Command Language
• User types in commands in an artificial language
Spring 2011 6.813/6.831 User Interface Design and Implementation 14
ls -l *.java
+6.831 site:mit.eduUnix shell
search engine query
URLhttp://www.mit.edu/admissions/
Menus and Forms
• User is prompted to choose from menus and fill in forms
Spring 2011 6.813/6.831 User Interface Design and Implementation 15
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 2011 6.813/6.831 User Interface Design and Implementation 16
Files & folders on desktop
Scrollbar
Selection handles
Spring 2011 6.813/6.831 User Interface Design and Implementation 17
Comparison of Interaction Styles
• Knowledge in the head vs. world• Error messages• Efficiency• User experience• Synchrony• Programming difficulty• Accessibility
Spring 2011 6.813/6.831 User Interface Design and Implementation 18
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 2011 6.813/6.831 User Interface Design and Implementation 19
Models in UI Design
• Three models are relevant to UI design:
Spring 2011 6.813/6.831 User Interface Design and Implementation 20
Usermodel
Interfacemodel
Systemmodel
Interface Model Hides System Model
• Interface model should be:– Simple– Appropriate: reflect user’s model of the task– Well-communicated
Spring 2011 6.813/6.831 User Interface Design and Implementation 21
User Model May Be Wrong
• Sometimes harmless– Electricity as water
• Sometimes misleading– Thermostat as a valve
Spring 2011 6.813/6.831 User Interface Design and Implementation 22
Example: the Back Button
Spring 2011 6.813/6.831 User Interface Design and Implementation 23
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 2011 6.813/6.831 User Interface Design and Implementation 24
Affordances
• Perceived and actual properties of a thing that determine how the thing could be used
• Perceived vs. actual
Spring 2011 6.813/6.831 User Interface Design and Implementation 25
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 2011 6.813/6.831 User Interface Design and Implementation 26
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 invisibleSpring 2011 6.813/6.831 User Interface Design and Implementation 27
mouse over
Feedback
• Actions should have immediate, visible effects– Push buttons– Scrollbars– Drag & drop
• Kinds of feedback– Visual– Audio– Haptic
Spring 2011 6.813/6.831 User Interface Design and Implementation 28
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 2011 6.813/6.831 User Interface Design and Implementation 29
Consistency of Layout
Spring 2011 6.813/6.831 User Interface Design and Implementation 30
Consistency in Wording
Spring 2011 6.813/6.831 User Interface Design and Implementation 31
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 2011 6.813/6.831 User Interface Design and Implementation 32
Source: Interface Hall of Shame
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 2011 6.813/6.831 User Interface Design and Implementation 33
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 decisionsSpring 2011 6.813/6.831 User Interface Design and Implementation 34
Desktop metaphor
Trashcan metaphor
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 2011 6.813/6.831 User Interface Design and Implementation 35
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 2011 6.813/6.831 User Interface Design and Implementation 36
Next Time: UI Hall of Fame or Shame?
Spring 2011 6.813/6.831 User Interface Design and Implementation 37
Suggested by Vishy Venugopalan