Heuristics Evaluation - How to Guide.pdf

This guide helps identify potential issues related to navigation, clarity, consistency, and other factors that can affect user experience.

1. Usability Heuristics & Audit
UX
A How-to-guide

2. Usability Heuristics
Developed by Jakob Nielsen in 1994 and publshed in Nielsen's book Usability Engineering, the Nielsen’s
heuristics are the most widely recognised and used usability heuristics for user interface and product
design.
Jakob Nielsen, Ph.D., is a User Advocate and principal of the Nielsen Norman Group
which he co-founded with Dr. Donald A. Norman (former VP of research at Apple
Computer). Dr. Nielsen established the "discount usability engineering" movement for fast
and cheap improvements of user interfaces and has invented several usability methods,
including heuristic evaluation. He holds 79 United States patents, mainly on ways of
making the Internet easier to use.
Jakob Nielsen is One of the "world's most influential designers"
-
Step 1 Step 2 Step 3
Define Scope Provide
Recommendations
Perform Evaluation &
Audit

3. Jakob Nielsen's 10 usability heuristics
https://www.nngroup.com/articles/ten-usability-heuristics
#10: Help and
documentation
#9: Help users recognize,
diagnose, and recover from
errors
#8: Aesthetic and minimalist
design
#7: Flexibility and efficiency
of use
#6: Recognition rather than
recall
#5: Error prevention#4: Consistency and
standards
#3: User control and freedom#2: Match between system
and the real world
#1: Visibility of system status

4. Jakob Nielsen's 10 usability heuristics
https://www.nngroup.com/articles/ten-usability-heuristics
1
Visibility of system status
The design should always
keep users informed about
what is going on, through
appropriate feedback within
a reasonable amount of
time.
2
Match between system and
the real world
The design should speak the
users' language. Use words,
phrases, and concepts
familiar to the user, rather
than internal jargon. Follow
real-world conventions,
making information appear
in a natural and logical order.
3
User control and freedom
Users often perform actions
by mistake. They need a
clearly marked "emergency
exit" to leave the unwanted
action without having to go
through an extended
process.
4
Consistency and standards
Users should not have to
wonder whether different
words, situations, or actions
mean the same thing. Follow
platform and industry
conventions.
5
Error prevention
Good error messages are
important, but the best
designs carefully prevent
problems from occurring in
the first place. Either
eliminate error-prone
conditions, or check for them
and present users with a
confirmation option before
they commit to the action.

5. Jakob Nielsen's 10 usability heuristics
https://www.nngroup.com/articles/ten-usability-heuristics
6
Recognition rather than
recall
Minimize the user's memory
load by making elements,
actions, and options visible.
The user should not have to
remember information from
one part of the interface to
another. Information
required to use the design
7
Flexibility and efficiency of
use
Shortcuts — hidden from
novice users — may speed
up the interaction for the
expert user such that the
design can cater to both
inexperienced and
experienced users. Allow
users to tailor frequent
actions.
8
Aesthetic and minimalist
design
Interfaces should not contain
information which is
irrelevant or rarely needed.
Every extra unit of
information in an interface
competes with the relevant
units of information and
diminishes their relative
visibility.
9
Help users recognize,
diagnose, and recover from
errors
Error messages should be
expressed in plain language
(no error codes), precisely
indicate the problem, and
constructively suggest a
solution.
10
Help and documentation
It’s best if the system doesn’t
need any additional
explanation. However, it may
be necessary to provide
documentation to help users
understand how to complete
their tasks.

6. Severity scale
Severity ratings are used to determine how serious a usability
issue is. Severity ratings range from cosmetic problems to
usability catastrophes.
Heuristic passed:
I don't agree that this
is a usability problem
at all
Cosmetic problem: need
not be fixed unless extra
time is available on
project
Minor problem:
fixing this should be
given low priority
Major problem:
important to fix, so
should be given high
priority
Usability catastrophe:
imperative to fix this
before product can be
released
https://www.nngroup.com/articles/how-to-rate-the-severity-of-usability-problems/

7. Example Evaluation
UX
Auditing Heuristics

8. Scope of evaluation
This evaluation report covers the following parts of the <Application
Placeholder Name>:
; Product Mappin4
; User Interface Evaluatio-
; Process Audit
Sample Page

9. Heuristic Checklist
A heuristic evaluation is a method for identifying design problems in a
user interface. Evaluators judge the design against a set of guidelines
(called heuristics) that make systems easy to use.
https://www.nngroup.com/articles/how-to-conduct-a-heuristic-evaluation/
Evaluator Details:
Provide evaluation
details including your
product’s URL.
Heuristic Checklist
Review every
heuristic, providing
severity ratings and
recommendations

10. Product Mapping
Some tap targets are very small (e.g. Add Source).
It is important to make all CTA accessible enough for
the user the user to tap comfortably.
The screenshot on the right is a good example of the Complexity that’s
happening throughout the website. The items are cluttered that does not
look aesthetically pleasing
Almost through out the text choice is 11px & 10px. This is a Usability
catastrophe choice as it is illegible for alot of users.
We tend to not use all caps anywhere untill its absoulety necessary.

Here it is used to differentiate and create hierarchy, which is wrong.
There are better ways to create this hierarchy.
Problems
Missing Usability Heuristics
Click-ability
Complexity in visual design
Small Text choice
All Caps
1
2
3
Flexibility and
efficiency of use
Aesthetic and
minimalist design
Product Page Name (Placeholder)
Consistency and
standards
Sample Page

11. User Interface
Usage of icons are just not enought to provide the right information
about the navigation. These icons are not self explanatory within
themselves.
w mtngsarnsgnrsuuarHmsutnmunrobbmulnbasrattncmoonlanoncaa’E
tedious task to understand for the users. This is Usability catastrophe design
decision and will hamper the success of the product.
According to UX, It’s a bad idea to put three side navigation bars together
on the left. Product can be improved by utilising other real estate available
on the screen.
Problems
Missing Usability Heuristics
Side navigation not accessible
Complexity in connections
Too much information
1
2
3
Flexibility and
efficiency of use
Aesthetic and
minimalist design
Product Page Name (Placeholder)
Match between system
and the real world
Human brain works and reads from left to right. Having tools positioned in
the right is not a good idea. It’s always advisable to keep these actionable
tools within reach of the user.
Action tools at right
Sample Page

12. Process Audit
Everything is tried to align towards the left, But no tools or
actionable item is there except choosing the collection. This looks
cluttered and outdated according to the Modern Visual design
trends.
It’s difficult to differentiate between the items listed on the bar. It
makes user confuse about the hierarchy of the items.
If user will try to navigate throught the side menu, user will realise
that the names on the list and selection items are too much
congested together. Again this looks pathetic according to the
Modern UI Trends.
Problems
Missing Usability Heuristics
Cluttered real estate
Visual Hierarchy missing
Congested items on list
1
2
3
Help and
documentation
Aesthetic and
minimalist design
Component Name
Match between system
and the real world
Sample Page

13. Results & Recommendations
UX
Example of how to share results

14. Missing Usability Heuristics
2
Flexibility and efficiency of
use
Shortcuts — hidden from
novice users — may speed
up the interaction for the
expert user such that the
design can cater to both
inexperienced and
experienced users. Allow
users to tailor frequent
actions.
3
Aesthetic and minimalist
design
Interfaces should not contain
information which is
irrelevant or rarely needed.
Every extra unit of
information in an interface
competes with the relevant
units of information and
diminishes their relative
visibility.
4
Help and documentation
It’s best if the system doesn’t
need any additional
explanation. However, it may
be necessary to provide
documentation to help users
understand how to complete
their tasks.
1
Consistency and standards
Users should not have to
wonder whether different
words, situations, or actions
mean the same thing. Follow
platform and industry
conventions.
Sample Page

15. Improve learnability by maintaining both types of
consistency: internal and external
Maintain consistency within a single product or a family
of products (internal consistency)
Follow established industry conventions (external
consistency).
Tips for improving Usability
https://www.nngroup.com/articles/ten-usability-heuristics
Consistency and
standards
For example: Check-in counters are
usually located at the front of hotels.
This consistency meets customers’
expectations.
Image
Placeholder
Feel free to add
screenshots of the product
page or component as
examples.
Provide examples of the
heuristic you’ve identified
for recommendat ions.
Sample Page

16. Provide accelerators like keyboard shortcuts and
touch gestures
Provide personalization by tailoring content and
functionality for individual users
Allow for customization, so users can make
selections about how they want the product to
work.
Tips for improving Usability
https://www.nngroup.com/articles/ten-usability-heuristics
Flexibility and efficiency
of use
For example: Regular routes are
listed on maps, but locals with
more knowledge of the area can
take shortcuts.
Image
Placeholder
Feel free to add
screenshots of the product
page or component as
examples.
Provide examples of the
heuristic you’ve identified
for recommendat ions.
Sample Page

17. Keep the content and visual design of UI focus on the
essentials
Don't let unnecessary elements distract users from the
information they really need
Prioritize the content and features to support primary
goals.
Tips for improving Usability
https://www.nngroup.com/articles/ten-usability-heuristics
Aesthetic and minimalist
design
For example: ​​​​​​An ornate teapot may
have excessive decorative elements
that can interfere with usability, like an
uncomfortable handle or hard to wash
nozzle.
Image
Placeholder
Feel free to add
screenshots of the product
page or component as
examples.
Explain the heurist ic
you’ve identified and share
examples of how it should
work, correctly.
Sample Page

18. Ensure that the help documentation is easy to search
Whenever possible, present the documentation in
context right at the moment that the user requires it
List concrete steps to be carried out.
Tips for improving Usability
https://www.nngroup.com/articles/ten-usability-heuristics
Help and documentation
For example: Information kiosks at
airports are easily recognizable and
solve customers’ problems in context
and immediately.
Feel free to add
screenshots of the product
page or component as
examples.
Image
PlaceholderExplain the heurist ic
you’ve identified and share
examples of how it should
work, correctly.
Sample Page

19. Thank you.