Feedback on the fish feeders

•  Show example values in your prototype

•  Be clear about how your prototype
operates (use a storyboard or words)
–  What is a button vs. a label?
–  What is clickable?
–  How do I edit values?
•  The best designs were
–  simple
–  contained a summary screen
 Evaluation 1

Introduction & Usability Inspection

 Objectives
By the end of class you will be able to…
•  Describe different usability inspection
techniques and discuss the advantages and
disadvantages of usability inspection
methods.
•  Conduct a heuristic evaluation and cognitive
walkthrough of a user interface.
Course Overview
What might you hope to learn
from a usability evaluation?
•  Is the interface…
–  Effective? The 5 E’s of usability
–  Engaging?
–  Efficient?
–  Easy to learn?
–  Equally usable by different groups?
•  What problems do users have?
•  Suggestions to improve the interface
•  …
 How could you evaluate an
interface?
•  With users
–  User testing (after Reading Break)
•  Without users
–  Usability inspection (today!)
•  Cognitive walkthrough
•  Heuristic evaluation
–  User modeling (Later)
 Usability inspection
•  A ‘discount’ method of usability
evaluation where an interface is
evaluated by usability experts rather
than end users.
•  Usually several evaluators work
independently, then debrief together
later.
 Heuristic evaluation
•  A type of usability inspection
•  HCI experts (sometimes also domain
experts) review an interface design with
respect to a set of predefined heuristics
•  Developed by Jacob Nielsen
 Nielsen’s heuristics
•  Visibility of system status
•  Match between system and real world (Speak the user’s
language)
•  User control and freedom (Clearly marked exits)
•  Consistency and standards
•  Help users recognize, diagnose, recover from errors
•  Error prevention
•  Recognition rather than recall
•  Flexibility and efficiency of use
•  Aesthetic and minimalist design
•  Help and documentation
 1. Visibility of system status
•  The system should always keep users
informed about what is going on,
through appropriate feedback within
reasonable time.

BaseCamp by 37signals

This and later examples from http://designingwebinterfaces.com/6-tips-for-a-great-flex-ux-part-5

More examples available there.
2. Match between system and real world
•  Speak the users’ language, with words,
phrases and concepts familiar to the
user. Follow real-world conventions,
and natural / logical order.

Uses terms and metaphors

familiar to the user.

iTunes
 3. User control & freedom
•  Users often choose system functions by
mistake and will need a clearly marked
and quick “emergency exit”. Support
undo and redo, a clear way to navigate.
Clear how to navigate
functions, search can be
easily activated and
canceled.

CollabFinder
 4. Consistency & Standards
•  Users should not have to wonder
whether different words, situations, or
actions mean the same thing. Follow
platform conventions.
MS Word, Excel, and
PowerPoint all use the
same style toolbar with
the same primary
menu options

BUT: different on Mac

Microsoft Office vs. Windows
 5. Error Prevention
•  Even better than good error messages
is a careful design, which prevents a
problem from occurring in the first place.

Google: auto recommend Primary action is more

reduces spelling errors visually prominent
 6. Recognition rather than recall
•  Minimize the user’s memory load. Make
objects, actions, options, and
instructions visible.

Auto complete for coding

Preview of fonts, not just in an IDE – no need to
font name remember exact names
 7. Flexibility & Efficiency of Use
•  Accelerators — unseen by the novice —
may speed up interaction for the expert.
Allow users to tailor frequent actions.

Apple Numbers: Previews common

function results on the left when a
column is selected -- efficient
Accelerator keys
 8. Aesthetic and minimalist design
•  Dialogues should not contain information
that is irrelevant or rarely needed. Visual
layout principles: contrast, repetition,
alignment, and proximity.

Search menu
exemplifies the four
principles of visual
design
Kontain
9. Help users recognize, diagnose,
and recover from errors
•  Error messages should be expressed in
plain language, precisely indicate the
problem, and suggest a solution.

Provides immediate
feedback with specific
instructions

Digg
 10. Help and documentation
•  Even though it is better if the system
can be used without documentation, it
may be necessary to provide help and
documentation. Any such information
should be easy to search, focused on
the user’s task, list concrete steps to be
carried out, and not be too large.
Help tips are displayed on hover,
answering the most likely
questions about a field or
Zenoss

instructions
 Heuristic Evaluation: Output
•  List of usability problems, with references to
the usability principles that were violated
•  Does not (necessarily) provide a solution
–  But problems are often easy to correct based on
the guidelines
 Heuristic Evaluation Activity

•  Evaluation of Fugu
How many inspectors?
Evaluation of a banking system:

Jakob Nielsen - www.useit.com

 How many inspectors?

75%

35%

Jakob Nielsen - www.useit.com

 What is a cognitive
walkthough (CW)?
•  A type of usability inspection where
experts ‘walk’ through an interface
following a specified set of tasks.
•  Step through the task. At each step, ask
yourself four questions.
 CW Questions
1.  Will users be trying to produce whatever
effect the action has?
2.  Will users see the control (button, menu,
switch, etc.) for the action?
3.  Once users find the control, will they
recognize that it produces the effect they
want?
4.  After the action, will users understand the
feedback they get so they can go on to the
next action with confidence?
 CW Example - Rapid Transit
Ticket Machine
•  User wishes to purchase a round-trip
ticket to Dragon Plaza.
•  The ticket costs $17.50 but the user
doesn’t know this yet.
•  The user has only $10, but doesn’t
know this yet either.

This example taken from http://asi-www.informatik.uni-

hamburg.de/informatik/SE_Evaluation/html/pages/walk.htm
Step 1: Enter Destination or Journey Type

•  User can do steps 1 and 2 in any order

•  Or user can enter desired fare using keypad
•  Design Flaw no. 1: Option to indicate
journey type first is not made
sufficiently evident.
•  Solution:
Step 2: Enter Journey Type
Step 3: Deposit money
•  Design Flaw no. 2: No display of total
money received.
•  Solution:
Step 4: Retrieve $10 from machine since it wasn’t enough
•  Design Flaw no. 3: No means of
retrieving money deposited.
•  Solution:
Cognitive Walkthrough Activity

Press Start
What are the advantages &
disadvantages of usability
inspection?
 Key points
Usability inspection…
•  Is quick and inexpensive
•  May miss important problems or identify
false ones
•  Complements (but does not replace)
testing with users