Heuristic Evaluation

CHAPTER 3
USABILITY ENGINEERING | BISE 2083
Quick •This is the Windows XP Search Companion. It appears when
you press the Search button on a Windows Explorer toolbar,
Evaluation and is primarily intended for finding files on your hard disk.

•It first asks you to specify what kind of file you’re looking
for. There’s some logic to this design decision, because it
turns out that different search criteria are appropriate for
different kinds of files. For example, if you select “Picture,
music, and video”, the next step of the dialog won’t both
asking for a word or phrase inside the file, since these kinds
of files are not textual.

•Unfortunately, to a frequent user, the demand that you

specify the file’s type is hard to answer. The categories are
not disjoint, so the decision isn’t always easy.

•This interface is clearly designed for novice users.

• The animated dog does
have one advantage:
• It’s a very visible mode
status indicator since
there’s no obvious
Cancel button
• You won’t accidentally
leave the Windows
Explorer in search mode,
because the dog will get
your attention and
motivate you to find a
way to get rid of it
 Aesthetic And Minimalist Design
•In contrast to the previous example, here’s Google’s start
page.
•Google is an outstanding example of a heuristic we’ll see
today: Aesthetic and minimalist design. Its interface is as
simple as possible. Unnecessary features and hyperlinks are
omitted, lots of whitespace is used.
•But maybe Google goes a little too far! Take the
perspective of a completely novice user coming to Google
for the first time.
•What does Google actually do? The front page doesn’t say.
•What should be typed into the text box? It has no caption
at all
•Where is Help? Turns out it’s buried at the bottom, along
with “Jobs & Press”.
Quick Review •Here’s a quick review of what we’ve seen
Review
so far in the context of the iterative design
process.
Design
L2: Task analysis
L3: Human capabilities
L4: Conceptual models
•Heuristics are useful in two stages of the
Today: Design heuristics
process.
Evaluate •In design, you can use the heuristics to
Implement
Today: Heuristic evaluation Next guide you in choosing between design
time: Prototyping
alternatives (and avoid making mistakes).
Fall 2003 6.893 UI Design and Implementation
•It turns out that heuristics are also
6
effective for evaluation, identifying
problems in an implemented interface.
What is Heuristic Evaluation?
• Heuristic evaluation is an inspection process invented by Nielsen to find
usability problems in an interface.
• It is performed by a usability expert – someone who knows and
understands the heuristics elements and thought about lots of
interfaces.
• The Interface evaluation exercises that we have in each class are
informal heuristic evaluations.
• The basic steps are simple;
• The evaluator inspects the user interface roughly, judges the interface on the
basis of the heuristic elements, and makes a list of the usability problems found.
Usability Guidelines
There are plenty guidelines to choose, for example:
• Jakob Nielsen’s 10 Heuristics
• Norman’s Design Principles
• Shneiderman’s 8 Golden Rules
• Bruce Tognazzini 16 Principles
Principles From This Course
• Efficiency
• Learnability
• Visibility
• Errors & User Control
• Satisfaction
How To Do Heuristic Evaluation
• List every problem, even if an interface elements has multiple
problems
• Go through the interface at least twice
• Once to get the feel of the system
• Again to focus on particular interface elements
• Don’t have to limit to the 10 Nielson Heuristics
• Nielsen’s 10 Heuristics are easier to compare against other general principles
Formal Evaluation Process
1. Training
• Meeting for design team & evaluators
• Introduce application
• Explain user profile, scenario
2. Evaluation
• Evaluators work separately
• Generate written report, or oral comments recorded by an observer
• Focus on generating problems, not on ranking their severity yet
• 1-2 hours per evaluator
3. Severity Rating
• Evaluators prioritize all problems found (not just their own)
• Take the mean of the evaluators’ ratings
4. Debriefing
• Evaluators & design team discuss results, brainstorming solutions
Severity Ratings
• Contributing Factors
• Frequency: How common?
• Impact: How hard to overcome?
• Severity Scale
• Minor – Needs fixing but low priority
• Major – Needs fixing but high priority
• Catastrophic – Imperative to fix
In Class Exercise
Example Screenshot of Part of a Web Page
Let’s start looking at each of
Nielson’s 10 heuristics in details
1. Match the real world
• Use common words
• Speak user’s language
• Bring the real-world to your interface
2. Consistency & Standards
• Similar things should look and act
similar
• Other properties (size, location, color,
wording, ordering)
• Follow platform standards
3. Help & Documentation
• Users don’t read manuals
• User prefer to spend time working toward their task goals, not learning
about your system
• But manuals and online help are vital
• Usually when user is frustrated
• Help should be:
• Searchable
• Task-Oriented
• Short
4. User Control and Freedom
• Provide Undo
• Long operations should be
cancelable
• All dialogs should have a cancel
button
5. Visibility of System Status
• Keep user informed of system state
• Response time
• Display busy cursor: 1-5 s
• Display progress bar: >5 s
6. Flexibility & Efficiency
• Provide shortcuts for frequent operations
• Keyboard accelerators
• Command Abbreviations
• Bookmarks
• History
7, Error Prevention
• Use selection is less error-prone than typing
8. Recognition, Not Recall
• Use menus, not command languages
• Use combo boxes, not textboxes
• Use generic commands where possible
• Open, Save, Copy Paste
 9. Error Reporting, Recovery
• Be precise, restate user’s input
• Not “cannot open file”, but
“cannot open file named
paper.doc”
• Give constructive help
• Be polite and non blaming
• Hide technical details until
requested
 10. Aesthetic and Minimalist Design
• “Less is More”
• Omit extraneous info, graphics, features
• Good graphic design
• Well-chosen colors and fonts
• Group with whitespace
• Use concise language
• Choose labels carefully
• The toolbars at the top show many saturated
colors. It’s distracting and hard to read.
• The second toolbar uses only few colors –
black, white, grey, blue, yellow-calming and
great effect to distinguish the icons
• The whitespace separating icon groups
End of the chapter