1 Visibility of
System Status
Designs should keep users informed
about what is going on, through
appropriate, timely feedback.
Interactive mall maps have
1
to show people where they
currently are, to help them
understand where to go next.
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.
When stovetop controls
match the layout of heating
elements, users.
5 Error
Prevention
Good error messages are
important, but the best designs
carefully prevent problems from
occurring in the first place.
Guard rails on curvy mountain
roads prevent drivers from
falling off cliffs.
8 Aesthetic and
Minimalist
Design
Interfaces should not contain
information which is irrelevant. Every
extra unit of information in an
interface competes with the relevant
units of information.
A minimalist three-legged
stool is still a place to sit.
Nielsen Norman Group
Jakob’s Ten
Usability Heuristics
3 User Control
and Freedom 4 Consistency
and Standards
Users often perform actions by Users should not have to wonder
mistake. They need a clearly marked whether different words, situations,
"emergency exit" to leave the or actions mean the same thing.
unwanted action. Follow platform conventions.
EXIT Just like physical spaces, CHECK IN
Check-in counters are usually
digital spaces need quick located at the front of hotels,
“emergency” exits too. which meets expectations.
6 Recognition
Rather Than Recall 7 Flexibility and
Efficiency of Use
Minimize the user's memory load Shortcuts — hidden by novice users —
by making elements, actions, and may speed up the interaction for the
options visible. Avoid making users expert user.
remember information. Regular routes are listed on
People are likely to correctly maps, but locals with more
answer “Is Lisbon the capital knowledge of the area can
of Portugal?”. take shortcuts.
9 Recognize,
Diagnose, and 10 Help and
Documentation
Recover from Errors
It’s best if the design doesn’t need any
Error messages should be expressed additional explanation. However, it
in plain language (no error codes), may be necessary to provide
precisely indicate the problem, and documentation to help users complete
constructively suggest a solution. their tasks.
Wrong-way signs on the Information kiosks at airports
i
are easily recognizable and
WRONG
WAY
road remind drivers that
they are heading in the solve customers' problems in
wrong direction. context and immediately.
www.nngroup.com/articles/ten-usability-heuristics/
1
Jakob’s Heuristic

Visibility of
System Status
Definition The design should 1
always keep users informed about
what is going on, through
appropriate feedback within a
reasonable amount of time.
1

Knowing what the ∙ Tip: Communicate clearly 1 “You Are Here” maps
current system status to users what the system’s Interactive mall maps have to show
is can help users learn state is — no action with people where they currently are, to help
the outcome of their consequences to users them understand where to go next.
prior interactions and should be taken without
2 Checkout flow
determine next steps. informing them. Multistep processes show users which
∙ Tip: Present feedback to the steps they’ve completed, they’re currently
Predictible working on, and what comes next.
user as quickly as possible.
interactions create
trust in the product 3 Phone tap
∙ Tip: Build trust through
as well as the brand. Touchscreen UIs need to reassure users
open and continuous
that their taps have an effect — often
communication.
through visual change or haptic feedback.

2 3
Info Shipping Payment Review

$43.23

Pay now

www.nngroup.com/articles/visibility-system-status/
10
Jakob’s Heuristic

Help and
Documentation
Definition It’s best if the design i
doesn’t need any additional
explanation. However, it may be
necessary to provide documentation
to help users understand how to
complete their tasks.
1

Help and ∙ Tip: Ensure that the 1 Airport information center

documentation help documentation is Information kiosks at airports are easily
content should be easy to search. recognizable and solve customers'
easy to search and problems in context and immediately.
∙ Tip: Whenever possible,
focused on the user's 2 Freqeuntly asked questions
present the
task. Keep it concise, Good frequently-asked-question pages
documentation in-context
and list concrete anticipate and provide the helpful
right at the moment that
steps that need to be information that users might need.
the user requires it.
carried out.
3 Information icon
∙ Tip: List concrete steps
Information icons reveal tooltips to explain
to be carried out.
jargon when users touch or hover over
them, which provides contextual help.

2 3
Frequently Asked Questions

www.nngroup.com/articles/help-and-documentation/
2
Jakob’s Heuristic

Match between System

and the Real World
Definition 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. 1

The language you ∙ Tip: Ensure users can 1 Stovetop controls

should use depends understand meaning When stovetop controls match the layout
very much on your without having to go look of heating elements, users can quickly
specific users. up a word’s definition. understand which control maps to each
heating element.
∙ Tip: Never assume your
2 “Car” vs. “automobile”
understanding of words or
If users think about this object as a
concepts will match those
“car,” use that as the label instead.
of your users.
33 Shopping cart icon
∙ Tip: User research will help
A shopping cart icon is easily recognizable
you uncover your users'
because that feature serves the same
familiar terminology, as
purpose as its real-life counterpart.
well as their mental models
around important concepts.

3
2

Shopping Cart

Car

Automobile
2
Check Out

www.nngroup.com/articles/match-system-real-world/
3
Jakob’s Heuristic

User Control
and Freedom
Definition Users often perform
actions by mistake. They need a
clearly marked "emergency exit"
to leave the unwanted action
without having to go through an 1
extended process.

When it's easy for ∙ Tip: Support Undo 1 Exit sign

people to back out and Redo. Digital spaces need quick “emergency”
of a process or undo exits, just like physical spaces do.
∙ Tip: Show a clear way to
an action, it fosters
exit the current interaction, 2 Undo and redo
a sense of freedom
like a "Cancel" button. These functions give users freedom
and confidence.
because they don’t have worry about their
∙ Tip: Make sure the exit actions — everything is easily reversible.
Exits allow users to is clearly labeled and
remain in control of discoverable. 3 Cancel button
the system and Users shouldn’t have to commit to a
avoid getting stuck process once it’s started — they should
and feeling be able to easily cancel and abandon.
frustrated.

Untitled document

2 Undo Redo 3

Delete Photo

Cancel

www.nngroup.com/articles/user-control-and-freedom
4
Jakob’s Heuristic

Consistency
and Standards
Definition Users should not have
CHECK IN
to wonder whether different words,
situations, or actions mean the
same thing. Follow platform and
industry conventions.

Jakob's Law states ∙ Tip: Improve learnability 1 Check-in counter

that people spend by maintaining both types Check-in counters are usually located at
most of their time on of consistency: internal the front of hotels. This consistency meets
products other than and external. customers’ expectations.
yours. Failing to
∙ Tip: Maintain consistency 2 Design system
maintain consistency Using elements from the same design
within a single product or
may increase the system across the product lines lowers
a family of products
users' cognitive load the learning curve of users.
(internal consistency).
by forcing them to
learn something new. 3 Notifications
∙ Tip: Follow established
A standardized notification design
industry conventions
provides a similar but distinguishable
(external consistency).
look and feel for different app pop-ups.

Colors

2 #F0557B #4F2330 #FFFFFF

3 12:34
#D51D50 #35151D

Typography Aa Aa Aa Aa
Light Reg Med Bold

Components Button Button

Button Button

www.nngroup.com/articles/consistency-and-standards/
5
Jakob’s Heuristic

Error Prevention
Definition Good error messages are
important, but the best designs
carefully prevent problems from
occuring in the first place. Either
eliminate error-prone conditions, 1
or check for them and present
users with a confirmation option
before they commit to the action.
There are two types ∙ Tip: Prioritize your effort: 1 Guard rails
of errors: slips and Prevent high-cost errors Guard rails on curvy mountain roads
mistakes. first, then little frustrations. prevent drivers from falling off of cliffs.

Slips are unconscious ∙ Tip: Avoid slips by providing 2 Airline confirmation

errors caused by helpful constraints and The confirmation page before checking
inattention. good defaults. out on airline websites gives users
another chance to review the flight details.
Mistakes are conscious ∙ Tip: Prevent mistakes by
errors based on a removing memory burdens, 3 Date selection on calendar
mismatch between the supporting undo, and Offer good defaults and set boundaries
user’s mental model warning your users. when people book services by dates.
Grey out unavailable options.
and the design.

2 Review Flights and Pay 3 Nov 17 – Nov 26

17 18 19 20 21 22

23 24 25 26

Confirm Booking

www.nngroup.com/articles/slips/
6
Jakob’s Heuristic

Recognition Rather
Than Recall
Definition 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 should be
visible or easily retrievable when needed. 1

Humans have limited ∙ Tip: Let people recognize 1 Lisbon

short-term memories. information in the People are more likely to correctly answer
Interfaces that interface, rather than the question “Is Lisbon the capital of
promote recognition having to remember Portugal?” rather than “What’s the capital
reduce the amount of (“recall”) it. of Portugal?”
cognitive effort 2 Comparison table
∙ Tip: Offer help in-context,
required from users. Comparison tables list key differences so
instead of giving users a
that users don’t need to remember them
long tutorial to memorize.
to make comparisons.
∙ Tip: Reduce the
3 Search
information that users Search queries are presented together
have to remember. with the results as a reference.

iPad Pro 12.9-in. (4th gen) iPad Air (3rd gen) iPad (7th gen)
The Lion King

2 3
Search results

www.nngroup.com/articles/recognition-and-recall/
7
Jakob’s Heuristic

Flexibility and
Efficiency of Use
Definition Shortcuts — hidden by
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
1
tailor frequent actions.

Flexible processes ∙ Tip: Provide accelerators 1 Shortcuts

can be carried out in like keyboard shortcuts and
different ways, so touch gestures.
that people can pick
∙ Tip: Provide personalization
whichever method
by tailoring content and
works for them.
functionality for individual
users.
∙ Tip: Allow for customization,
so users can make
selections about how they
want the product to work.
Regular routes are listed on maps, but
locals with more knowledge of the area
can take shortcuts.
2 Keyboard shortcut
Keyboard shortcuts for complex products
can help expert users finish their tasks
more efficiently.
3 Tap to like
Social apps allow two ways to like posts.
Experienced users can tap to like because
it speeds up their browsing.

2
C V

www.nngroup.com/articles/flexibility-efficiency-heuristic
8
Jakob’s Heuristic

Aesthetic and
Minimalist Design
Definition Interfaces should not
contain information which is
irrelevant or rarely needed. Every
extra unit of information in an
1
interface competes with the
relevant units of information and
diminishes their relative visibility.

This doesn't mean
you have to use a flat
design — it's about
making sure you're
keeping the content
and visual design
focused on the
essentials. Ensure
that the visual
elements of the UI
support the user's
primary goals.
∙ Tip: Keep the content and
visual design of UI focus on
the essentials.
∙ Tip: Don't let unnecessary
elements distract users
from the information they
really need.
∙ Tip: Prioritize the content
and features to support
primary goals.
1 Ornate vs. simple teapot
Excessive decorative elements can
interfere with usability.
2 Communicate, don’t decorate
Over-decoration can cause distraction
and make it harder for people to get the
core information they need.
3 Messy vs organized UI
Messy UI increases the interaction cost
for users to find their desired content;
Organized UI lowers the cost.

2 3 3

COMMUNICATE,
DOn't decorate

One of our
favorite slogans

www.nngroup.com/articles/aesthetic-and-minimalist-design/
9
Jakob’s Heuristic

Help Users Recognize,

Diagnose, and Recover
from Errors
Definition Error messages should
WRONG
be expressed in plain language WAY
(no error codes), precisely indicate
the problem, and constructively
suggest a solution.
1

Error messages ∙ Tip: Use traditional error 1 Wrong way sign

should be presented message visuals, like
with visual treatments bold, red text.
that will help users
∙ Tip: Tell users what went
notice and recognize
wrong in language they
them.
will understand — avoid
technical jargon.
∙ Tip: Offer users a
solution, like a shortcut
that can solve the error
immediately.
Wrong-way signs on the road remind
drivers that they are heading in the
wrong direction and ask them to stop.
2 Internet connection error
Good internet connection error pages
show what happened and constructively
instruct users on how to fix the problem.
3 No search results
Provide useful help when people
encounter search-result pages returning
zero results, such as popular topics.

2 3
No results for
“Teddy bear”
There is no Internet connection
You might try
Try:

www.nngroup.com/videos/usability-heuristic-recognize-errors/