ui design - learnability
DESCRIPTION
Learnability lecture notes from MIT 6.813 - UI Design and ImplementationTRANSCRIPT
1
L2: Learnability
Spring 2013 6.813/6.831 User Interface Design and Implementation
UI Hall of Fame or Shame?
Spring 2013 6.813/6.831 User Interface Design and Implementation 2
Source: Interface Hall of Shame
UI Hall of Shame!
Spring 2013 6.813/6.831 User Interface Design and Implementation 3
Source: Interface Hall of Shame
UI Hall of Shame
Spring 2013 6.813/6.831 User Interface Design and Implementation 4
mouse over
Source: Interface Hall of Shame
5
Topics
• Learning approaches• Interaction styles• Conceptual models of UIs
Spring 2013 6.813/6.831 User Interface Design and Implementation
6
LEARNING APPROACHES
Spring 2013 6.813/6.831 User Interface Design and Implementation
7
How We Learn a New User Interface
Spring 2013 6.813/6.831 User Interface Design and Implementation
Not by reading a manual* Not by taking a class*
* Standard caveat: “it depends”Not by reading the help first*
8
Learning by Doing
• User has a goal to achieve– “Get rid of the redeye from my photo.”
• User explores interface for features that satisfy the goal
Spring 2013 6.813/6.831 User Interface Design and Implementation
9
Seeking Help
• User resorts to seeking help when they get stuck– So they already have a problem when they arrive,
and they’re usually looking for concrete solutions to it
Spring 2013 6.813/6.831 User Interface Design and Implementation
10
Lessons for Designers
• Know the user’s goals when we design• User interface should communicate how it
works and how to use it• Help must be searchable and goal-directed
Spring 2013 6.813/6.831 User Interface Design and Implementation
11
Try It: Google Autosuggest to Find Learnability Problems
• Look at the suggested queries for prefixes like:– photoshop how to– powerpoint how to– iphone how to– android how to
• What kinds of goals do you see? • What kinds of goals don’t appear?• What does it say about the learnability of the UI for that task?
Spring 2013 6.813/6.831 User Interface Design and Implementation
12
Learning by Watching
Spring 2013 6.813/6.831 User Interface Design and Implementation
How did you learn Alt-Tab?
13
Picoquiz
Consider the new Google Glass UI. (Search the web if you haven’t heard of it.) Which of the following learning approaches should its designers focus on? (choose one)
A. learning by reading a manual
B. learning by taking a class
C. learning by doing
D. learning by watching
Spring 2013 6.813/6.831 User Interface Design and Implementation
14
INTERACTION STYLES
Spring 2013 6.813/6.831 User Interface Design and Implementation
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!
Spring 2013 6.813/6.831 User Interface Design and Implementation 15
Interaction Style #1: Command Language
• User types in commands in an artificial language– all knowledge in the head; low learnability
Spring 2013 6.813/6.831 User Interface Design and Implementation 16
ls -l *.java
+6.831 site:mit.edu
Unix shell
search engine query
URLhttp://www.mit.edu/admissions/
Interaction Style #2: Menus and Forms
• User is prompted to choose from menus and fill in forms– all knowledge in the world: far more learnable
Spring 2013 6.813/6.831 User Interface Design and Implementation 17
Interaction Style #3: 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 2013 6.813/6.831 User Interface Design and Implementation 18
Files & folders on desktop
Scrollbar
Selection handles
19
Interaction Style #4: Speech Dialog
• User speaks in natural language, and system responds the same way
Spring 2013 6.813/6.831 User Interface Design and Implementation
I would like to fly from Boston to London.
Flights from Boston to London. What date will you be travelling?
Next Friday in the evening.
Okay. flights from Boston to London departing between 5:00 pm and midnight on June 25. Can you provide a departure or arrival time?
User
System
Comparison of Interaction Styles
• Knowledge in the head vs. world• Error messages• Efficiency• User experience• Synchrony• Programming difficulty• Accessibility
Spring 2010 6.813/6.831 User Interface Design and Implementation 20
21
Using Multiple Interaction Styles
Spring 2013 6.813/6.831 User Interface Design and Implementation
22
Example: Twitter’s Tweet-Creation UI
Spring 2013 6.813/6.831 User Interface Design and Implementation
What aspects of this UI use knowledge in the head?What aspects use knowledge in the world?
Self-Disclosure
Spring 2013 6.813/6.831 User Interface Design and Implementation 23
24
Picoquiz
Which of the following interaction styles uses knowledge-in-the-world heavily? (choose all good answers)
A. menus and forms
B. speech dialog
C. command languages
D. direct manipulation
Spring 2013 6.813/6.831 User Interface Design and Implementation
25
CONCEPTUAL MODELS
Spring 2013 6.813/6.831 User Interface Design and Implementation
Models
• Model of a system = how it works– its constituent parts and how they work together to
do what the system does
Spring 2013 6.813/6.831 User Interface Design and Implementation 26
Follows Tweets
Three Models in UI Design
Spring 2013 6.813/6.831 User Interface Design and Implementation 27
Usermodel
InterfacemodelSystem
model
Interface model should be:• Simple• Appropriate (matching the task
that needs to be done)• Well-communicated
Example: Back vs. Previous
Spring 2013 6.813/6.831 User Interface Design and Implementation 28
29
Example: Graphical Editing
Spring 2013 6.813/6.831 User Interface Design and Implementation
Edit this text
Structured graphics model(e.g. Illustrator, PowerPoint)
Pixel model, no layers(e.g. MS Paint)
Pixel model with layers(e.g. Photoshop)
30
Example: Text Editing
Spring 2013 6.813/6.831 User Interface Design and Implementation
Typewriter: 2D grid of characters
Text editor: 1D string with linebreak characters
31
Valve?
Switch?
User’s Model May Be Wrong
• Electricity flows like water• Thermostat
Spring 2013 6.813/6.831 User Interface Design and Implementation
System model Interface model
User model
32
Picoquiz
Which of the following statements are true? (choose all good answers)
A. Learning by doing is a primary way that users construct a mental model of a system.
B. The RealCD player’s metaphor of a CD jewel case is an example of a system model.
C. The metaphor that electricity is like water is an example of a user model.
D. A good interface model should match the system model closely.
Spring 2013 6.813/6.831 User Interface Design and Implementation