Transcript L02-learnabilityx

Lecture 2: Learnability
Spring 2011
6.813/6.831 User Interface Design and Implementation
1
UI Hall of Fame or Shame?
Source: Interface Hall of Shame
Spring 2011
6.813/6.831 User Interface Design and Implementation
2
UI Hall of Shame!
Source: Interface Hall of Shame
Spring 2011
6.813/6.831 User Interface Design and Implementation
3
UI Hall of Shame
Source: Interface Hall of Shame
mouse over
Spring 2011
6.813/6.831 User Interface Design and Implementation
4
Nanoquiz
• closed book, closed notes
• submit before time is up (paper or web)
• we’ll show a timer for the last 20 seconds
NQ1
1. Which of the following are NOT dimensions of usability?
A. satisfaction B. reliability C. efficiency D. functionality E. learnability
10
11
12
13
14
15
16
17
18
19
20
0
1
2
3
4
5
6
7
8
9
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.
Today’s Topics
•
•
•
•
Human memory
Interaction styles
User model vs. system model
Learnability principles & design patterns
People Don't Learn Instantly
Source: Interface Hall of Shame
Spring 2011
6.813/6.831 User Interface Design and Implementation
8
Memory
• Working memory
Working
Memory
Long-term
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 longterm memory
Spring 2011
6.813/6.831 User Interface Design and Implementation
9
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 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
GULF OF
EVALUATION
Evaluation
User
Goals
Spring 2011
GULF OF
EXECUTION
Planning
Interpretation
Perception
Intention
System
Execution
6.813/6.831 User Interface Design and Implementation
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
ls -l *.java
Unix shell
+6.831 site:mit.edu
search engine query
http://www.mit.edu/admissions/
URL
Spring 2011
6.813/6.831 User Interface Design and Implementation
14
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
Scrollbar
Files & folders on desktop
Spring 2011
Selection handles
6.813/6.831 User Interface Design and Implementation
16
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:
Interface
model
User
model
System
model
Spring 2011
6.813/6.831 User Interface Design and Implementation
20
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
–
–
–
–
Spring 2011
Internal, external, metaphorical
Speak the user’s language
Metaphors
Platform standards
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
–
–
–
–
Spring 2011
Light switches
Stove burners
Turn signals
Audio mixer
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
mouse over
• Availability of drag & drop is often invisible
Spring 2011
6.813/6.831 User Interface Design and Implementation
27
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
Source: Interface Hall of Shame
Spring 2011
6.813/6.831 User Interface Design and Implementation
32
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
Desktop metaphor
models very easily
• Dangers
–
–
–
–
–
Spring 2011
Often hard for designers to find
Trashcan metaphor
May be deceptive
May be constraining
Metaphor is usually broken somewhere
Use of a metaphor doesn’t excuse other bad
design decisions
6.813/6.831 User Interface Design and Implementation
34
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
–
–
–
–
Spring 2011
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
36
Next Time: UI Hall of Fame or Shame?
Suggested by Vishy Venugopalan
Spring 2011
6.813/6.831 User Interface Design and Implementation
37