Download Usability Based on material by Michael Ernst, UW and MIT

Announcements
n 
CHECK YOUR GRADES
n 
Usability
n 
Quiz 1-9, HW 1-6, Exam 1-2 now all in LMS!
Feedback on Homework in Homework Server
n 
Based on material by Michael
Ernst, UW and MIT
n 
HW9 due December 11th
n 
n 
n 
n 
n 
n 
A GUI Interface for your path finding algorithm
Quiz 10 at the end of class
Common questions/mistakes
How do I “start” the Visitor?
How to I make the Visitor hold Context?
Can I change signature of accept or visit?
Use of Interpreter methods in Visitors
n 
Expression (x or true) and y
new AndExp(
new OrExp(
new VarExp(“x”),
new Constant(true)
),
new VarExp(“y”)
)
You shouldn’t call evaluate/print on Expressions
accept methods are the same for all Visitors
n  Functionality in visit methods, state stored in
Visitors
n 
left
3
Fall 15 CSCI 2600, A Milanova
AndExp:
(x or true) and y
left
right
VarExp: x
VarExp: y
right
Constant: true
4
Visitor Implements Postorder
Traversal of the Composite
Starting the Visitor
BooleanExp myExp =
new AndExp(
new OrExp(new VarExp(“x”),new VarExp(“y”)),
new VarExp(“z”)
);
CounterVisitor v = new CounterVisitor();
//or EvaluateVisitor v = new EvaluateVisitor(c);
//or InorderVisitor v = new InorderVisitor();
myExp.accept(v); // starts traversal at root
Fall 15 CSCI 2600, A Milanova
We have a hierarchical structure:
AndExp is top, OrExp and VarExp are
below in the hierarchy, etc.
OrExp: x or true
n 
Fall 15 CSCI 2600, A Milanova
2
Visitor’s Task is to Traverse
Hierarchical Structure
Revisit Visitor Pattern, Again
n 
HW7 grades released. Re-grade points will be applied
later as re-submit of HW7 is due December 11th
5
class AndExp extends BooleanExp {
public void accept(Visitor v) {
// call accept on all children, then visit
left.accept(v); // traverses left subexp
right.accept(v); // traverses right subexp
v.visit(this); // after traversal
}
}
//
//
//
//
accept doesn’t know what kind of Visitor!
works with all Visitors!
No changes to the BooleanExp hierarchy
required when adding new Visitors
Fall 15 CSCI 2600, A Milanova
6
1
The Visitor Pattern
The Visitor Pattern
Visitor
visit(Constant e)
visit(VarExp e)
visit(NotExp e)
visit(AndExp e)
visit(OrExp e)
1
BooleanExp
Client
2
accept(Visitor v)
2
Constant
VarExp
NotExp
OrExp
AndExp
accept
(Visitor v)
accept
(Visitor v)
accept
(Visitor v)
accept
(Visitor v)
1
accept
(Visitor v)
1
1
7
EvaluateVisitor
InrderVisitor
visit(Constant e)
visit(VarExp e)
visit(NotExp e)
visit(AndExp e)
visit(OrExp e)
visit(Constant e)
visit(VarExp e)
visit(NotExp e)
visit(AndExp e)
visit(OrExp e)
Exercise: Write a Count Visitor that counts
#nodes in a BooleanExp object
class VarExp extends
BooleanExp {
void accept(Visitor v) {
v.visit(this);
}
}
class AndExp extends
BooleanExp {
BooleanExp leftExp;
BooleanExp rightExp;
void accept(Visitor v) {
leftExp.accept(v);
rightExp.accept(v);
v.visit(this);
}
}
class CounterVisitor
implements Visitor {
int count = 0;
void visit(VarExp e)
{
count++;
}
void visit(Constant e)
{
count++;
}
void visit(AndExp e)
{
count++;
}
…
9
}
Exercise: Write PostorderVisitor, which prints
BooleanExp in postorder
class VarExp extends
BooleanExp {
void accept(Visitor v) {
v.visit(this);
}
}
class AndExp extends
BooleanExp {
BooleanExp leftExp;
BooleanExp rightExp;
void accept(Visitor v) {
leftExp.accept(v);
rightExp.accept(v);
v.visit(this);
}
}
Exercise: Write an Evaluate Visitor which
evaluates a BooleanExp
class VarExp extends
BooleanExp {
void accept(Visitor v) {
v.visit(this);
}
}
class AndExp extends
BooleanExp {
BooleanExp leftExp;
BooleanExp rightExp;
void accept(Visitor v) {
leftExp.accept(v);
rightExp.accept(v);
v.visit(this);
}
}
class EvaluateVisitor
implements Visitor {
// ??
void visit(VarExp e)
{
// ??
}
void visit(Constant e)
{
// ??
}
void visit(AndExp e)
{
// ??
}
…
11
}
8
Fall 15 CSCI 2600, A Milanova
class PostroderVisitor
implements Visitor {
}
void visit(VarExp e)
{
//print e.getString();
}
void visit(Constant e)
{
//print e.getValue();
}
void visit(AndExp e)
{
//print “AND”;
}
…
10
Outline of Today’s Class
n 
Usability
n 
Iterative Design
n 
Design
n 
Implement
n 
Evaluate
n 
n 
n 
Design principles
Low-fidelity prototypes
User testing
Fall 15 CSCI 2600, A Milanova
12
2
User Interface Hall of Shame
Fall 15 CSCI 2600, A Milanova. Source: Interface Hall of Shame
User Interface Hall of Shame
13
Better
Fall 15 CSCI 2600, A Milanova. Source: Interface Hall of Shame
14
User Interface Hall of Shame
You cannot directly edit the Date and
Time fields from the keyboard.
If you want to edit Time, you must click
on “Set Time”, which triggers the
“Clock” control, where you have to
use the mouse to move the Minute
and Hour hands.
Fall 15 CSCI 2600, A Milanova. Source: Interface Hall of Shame
15
16
Hall of Shame or Fame?
Hall of Shame or Fame?
Fall 15 CSCI 2600, A Milanova
Fall 15 CSCI 2600, A Milanova. Source: Interface Hall of Shame
17
Fall 15 CSCI 2600, A Milanova
18
3
Designing User Interfaces Is
Hard
n 
n 
Designing User Interfaces Is
Hard
You are not the user
Most software engineering is about
communicating with programmers
n 
n 
The user is ALWAYS right
n 
n 
n 
Users are NOT like us
Usability problems are the design’s fault
Hard lesson to learn: if the user consistently gets
stuck, this is not because the user is dumb, but
because the interface is poorly designed
n 
Users thought weight was fine
Actually, they really wanted half the weight
# of results displayed for a Google
search query
n 
n 
Users say they want 30
Actually, they really wanted 10
19
Iterative
Design
Iterative
Design
n 
… unfortunately, the user is not always right
The user cannot predict what they really want
1950’s experiment with telephone handsets
n 
UI is about communicating with users
n 
n 
Who are a lot like us
n 
n 
n 
20
SpiralSpiral
Model
UI developmentisis an
an iterative
UI• development
iterativeprocess
process
Model
andcheap
cheap
•Use
Usethrow-away
throw-away prototypes
prototypes and
evaluation
for
early
iterations
evaluation for early iterations
n 
Design
Design
Design
Evaluate
n 
Implement
Iterations
can
• Iterations
canbe
becostly
costly
n 
If the
turns
bebad,
bad,
– If design
the design
turnsout
out to
to be
youyou
maymany
have tohave
throwaway
away most
code
to throw
mostofofyour
your
code
Fall 15 CSCI 2600, A Milanova. Slide from Michael Ernst
8
21
Evaluate
Fall 15 CSCI 2600, A Milanova. Slide from Michael Ernst
Usability
n 
n 
n 
n 
n 
Learnability
Efficiency
Safety
Simplicity (not a usability dimension)
n 
Different dimensions vary in importance
n 
n 
n 
Learnability: is it easy to learn?
Efficiency: once learned, is it fast to use?
Safety: are errors few and recoverable?
Memorability: is it easy to remember what you
learned?
n  Satisfaction: is it enjoyable to use?
n 
n 
Fall 15 CSCI 2600, A Milanova. Slide from Michael Ernst
9
22
Usability Dimensions
Usability: how well users can use the
system’s functionality
Dimensions of usability
n 
Implement
n 
23
n 
Depends on the user
Depends on the task
Usability is only one aspect of the system
24
4
Learnability
IBM’s Real CD
Learnability
25
Fall 15 CSCI 2600, A Milanova. Source: Interface Hall of Shame
Fall 15 CSCI 2600, A Milanova. Source: Interface Hall of Shame
Learnability
LMS Create Weighted Column
Learnability
LMS Create Weighted Column
27
Fall 15 CSCI 2600, A Milanova
Facts About Memory & Learning
n 
Working memory
Working
Long-term
Memory
Memory
Small: 7 ± 2 “chunks”
n  Short-lived: gone in ~10 seconds
n  Maintenance rehearsal is required to keep it
from decaying but costs attention
for Learnability
Design Design
PrinciplesPrinciples
for Learnability
n  Consistency
• Consistency
n 
n 
Long-term memory
28
Fall 15 CSCI 2600, A Milanova
n 
n 
26
•
Similar things look similar, different things different
– Similar things look similar,
things different
n  different
Terminology,
location, …
– Terminology, location,
n  argument
Internal,
external,
metaphorical
order,
...
– Internal, external, metaphorical
design
Use common, simple
words,
notworld
tech jargon!
Match
the real
– Common words, not tech jargon
Practically infinite in size and duration
n  Elaborative rehearsal transfer chunks to longterm memory
n 
Fall 15 CSCI 2600, A Milanova. Slide from Michael Ernst
Recognition,
not
•n  Recognition,
not recall
recall
Source: Interface Hall of Shame
–n  Labeled
buttons
are betterare
than better
commandthan
languages
Labeled
buttons
commands
– Combo boxes are better than text boxes
29
n 
Combo boxes are better than text boxes
30
17
5
Tech Jargon
UHLS Catalog Advanced Search
Visibility
31
Fall 15 CSCI 2600, A Milanova
Some Facts
Facts About
Perception
AboutHuman
Human
Perception
n •
Design Principles for Visibility
Perceptual
fusion:
stimuli
~100ms
Perceptual fusion:
stimuli
< 100ms
apart apart
appear fused
to to
ourour
perceptual
systems
appear
fused
perceptual
system
n 
–10
10 frames/sec
frames/sec is enough
to perceive
a moving apicture
is enough
to perceive
moving
–picture
Computer response < 100 ms feels instantaneous
n 
Computer response < 100ms feels instantaneous
• Color blindness: many users (~8% of all males)
n  Color blindness: many users (~8% of all
can't distinguish red from green
males) can’t distinguish red from green
normal vision
red-green deficient
20
33
Facts About Motor Processing
Senses
n 
Cognitive
Motor
n 
Muscles
Give prompt feedback
Response time rules-of-thumb:
< 0.1 sec
seems instantaneous
0.1 – 1 sec
user notices
1 - 5 sec
display busy cursor
> 5 sec
display progress bar
n 
34
Fall 15 CSCI 2600, A Milanova. Slide from Michael Ernst
Pointing
Tasks: Fitts’s Law
n  How long does it take to move your hand to a
target of size S at distance D away?
• How long does it take to reach a target?
Motor processor runs by itself
Cycle time is ~ 70ms
D
D
S
Closed-loop control
Muscle movements are perceived and compared
with desired result
n  Cycle time is ~ 140ms
n 
Fall 15 CSCI 2600, A Milanova. Slide due to Michael Ernst.
n 
Mouse cursor, selection highlight, status bar
Pointing Tasks: Fitts’s Law
Open-loop control
n 
n 
Perception
Make system state visible: keep the user
informed about what’s going on
n 
n 
Fall 15 CSCI 2600, A Milanova. Slide from Michael Ernst
32
Fall 15 CSCI 2600, A Milanova
35
– Moving mouse to target on screen
S
– Moving finger to key on keyboard
n  E.g. moving mouse to target on screen
– Moving hand between keyboard and mouse
Fall 15 CSCI 2600, A Milanova. Slide from Michael Ernst
36
24
6
Analytical Derivation of Fitts’s Law
Fitts’s Law
Derivation of Fitts’s Law
Reaction time
Pointing Tasks: Fitts’s Law
Movement time
n 
T = RT + MT = a + b log (D/S)
• How long does it take to reach a target?
n 
D
n 
D
n 
– Moving mouse to target on screen
Velocity
Position
S
n 
• Moving your hand to a target is closed-loop
Moving
your hand is closed-loop control
control
Each
cycle
distanceDd with
• Each
cyclecovers
coversremaining
remaining distance
error
εderror εD
with
After
two2 cycles,
withinεε22DDof
oftarget
target
• After
cycles, within
S
log
(D/S) is
thetoindex
difficulty of the
– Moving
finger
key onofkeyboard
pointing
task
– Moving hand between keyboard and mouse
Time
Fall 15 CSCI 2600, A Milanova. Slide from Michael Ernst
37
Time
Fall 15 CSCI 2600, A Milanova. Slide from Michael Ernst
25
38
24
Path Steering Tasks: Steering
Law
Design Principles for Efficiency
Fitts’s Law applies only if path to target is
unconstrained
Pointing Tasks: Fitts’s Law
n  But the task is much harder if path is
to a tunnel
• constraint
How long does
it take to reach a target?
n 
n 
Make important targets
big, nearby, or at screen edges
n  Avoid steering tasks!
n 
n 
D
D D
Provide shortcuts
n 
n 
S
n 
Fitts’s Law and Steering Law
n 
– Moving Law:
mouseTto=target
screen
Steering
RT +onMT
= a + b (D/S)
n 
– Moving finger to key on keyboard
– Moving hand between keyboard and mouse
39
Fall 15 CSCI 2600, A Milanova. Slide from Michael Ernst
Keyboard accelerators
Styles
Bookmarks
History
Fall 15 CSCI 2600, A Milanova. Slide from Michael Ernst
40
24
Usability Dimensions
n 
Learnability
Efficiency
Safety
n 
Simplicity
n 
n 
Mode Errors
n 
Modes: states in which actions have different
meanings
n 
n 
Avoiding mode errors
n 
n 
n 
Fall 15 CSCI 2600, A Milanova
41
E.g., vi’s insert mode vs. command mode
Eliminate modes entirely
Visibility of mode
Disjoint action sets in different modes
Fall 15 CSCI 2600, A Milanova
42
7
Confirmation Dialogs: Deleting
files in the LMS file system
Confirmation
DialogsDialogs
Confirmation
I selected the files and clicked Delete
Fall 15 CSCI 2600, A Milanova
43
30
Confirmation Dialogs: Deleting
files in the LMS file system
Confirmation Dialogs: Deleting
files in the LMS file system
Not done! Confirmation dialog pops up. Clicked OK
Fall 15 CSCI 2600, A Milanova
45
Still not done! Clicked Submit and finally done!
Another issue with file system: behavior inconsistent
with other systems.
n 
n 
n 
n 
n 
Design Principles for Error
Handling (Safety)
n 
Use confirmation dialogs sparingly
Prevent errors as much as possible
n 
46
Fall 15 CSCI 2600, A Milanova
Design Principles for Error
Handling (Safety)
n 
44
Fall 15 CSCI 2600, A Milanova
Good error messages
n 
n 
Selection is better than typing
Avoid mode errors
Disable illegal commands
Separate risky command from common ones
n 
n 
Precise
Speak the user’s language
Constructive help
Be polite
Source: Interface Hall of Shame
Support Undo
Fall 15 CSCI 2600, A Milanova
47
48
8
Simplicity
Simplicity
Simplicity, Google Back in 2003
Simplicity
Source: Alex Papadimoulis
Fall 15 CSCI 2600, A Milanova. Slide by Michael Ernst.
32
49
Fall 15 CSCI 2600, A Milanova
50
33
Simplicity, Google Now
Fall 15 CSCI 2600, A Milanova
Simplicity, Google Now
51
Fall 15 CSCI 2600, A Milanova
Design Principles for Simplicity
n 
n 
Document Your System
“Less is More!”
n 
n 
Omit extraneous information, graphics & features
n 
Write the user manual
n 
Good graphic design
n 
n 
Few well-chosen colors and fonts
Group with whitespace
n 
n 
n 
Use concise language
n 
n 
Choose labels carefully
Fall 15 CSCI 2600, A Milanova. Slide from Michael Ernst
n 
53
Program and UI metaphors
Key functionality
Do not include: exhaustive list of all menus
What is hard to do?
Who is your target audience?
n 
n 
52
Power users need a manual
Casual users might not
Piecemeal online help is no substitute
Fall 15 CSCI 2600, A Milanova. Slide from Michael Ernst
54
9
Outline of Today’s Class
n 
Low-fidelity Prototype
Usability
n 
Paper is a very fast and effective prototyping tool
n 
n 
n 
Iterative Design
n 
n 
n 
n 
n 
Low-fidelity prototypes
n 
n 
User testing
55
n 
n 
n 
n 
n 
E.g., “add this meeting to calendar”,
E.g., “type this letter and print it”
n 
n 
n 
n 
Watch them do tasks with the prototype
n 
57
n 
Watch for Critical Incidents
n 
n 
n 
n 
n 
n 
Errors
Repeated attempts
Curses
n 
n 
n 
Can also be positive
n 
n 
n 
“Cool!”
“Oh, now I see.”
Fall 15 CSCI 2600, A Milanova. Slide due to Michael Ernst
Don’t help, don’t explain, don’t point out mistakes
Two exceptions: prod user to think aloud, and move
on to the next task when stuck
Take lots of notes
58
Summary
Critical incidents: events that strongly affect
task performance or satisfaction
Usually negative
n 
“I’m testing the system, not testing you”
“If you have trouble, it’s the system’s fault”
“Feel free to quit at any time”
Ethical issues: informed consent
Ask user to think aloud
Be quiet!
3 is often enough to find obvious problems
Fall 15 CSCI 2600, A Milanova. Slide due to Michael Ernst
n 
Brief the user first
n 
Find a few representative users
n 
n 
n 
Short but non-trivial
n 
56
How to Watch Users
Start with a prototype
Write up a few representative tasks
n 
Use pieces to represent windows, dialogs, menus
Simulate computer’s responses by moving pieces
around and writing on them
Fall 15 CSCI 2600, A Milanova. Slide due to Michael Ernst
User Testing
n 
Focus on behavior & interactions, not fonts & colors
Similar to design of your ADTs and classes
Paper prototypes can even be executed!
n 
Evaluate
Fall 15 CSCI 2600, A Milanova
Hand-sketching is OK --- even preferable
n 
Design principles
Implement
n 
n 
n 
Design
Sketch windows, menus, dialogs, widgets
Crank out lots of designs and evaluate them
59
You are not the user
Keep human capabilities and design
principles in mind
Iterate over your design
Write documentation
Make cheap, throw-away prototypes
Evaluate them with users
Fall 15 CSCI 2600, A Milanova. Slide due to Michael Ernst
60
10