Ten usability rules by Jakob Nielsen, each shown with a before and an after. Use them to review your app.
Based on Jakob Nielsen's 10 usability heuristics (Nielsen Norman Group). The explanations are paraphrased and the examples are my own. nngroup.com/articles/ten-usability-heuristics
1
Visibility of system status
Visibility of system status
The app should keep users informed about what is going on, with timely feedback.
Messages
Send
(nothing changes when pressed)
Before: the button does not react.
How it breaksA button that does not react, or a screen that looks frozen.
How to fix itShow progress and confirm the result: sending, sent and, if it failed, say so.
Check it in your appDoes every action get a visible, timely response?
2
Speak your user's language
Match between system and the real world
Use the words, phrases and concepts your user already knows, in a natural order.
Sign up
Insert record
Error 500: null
Before: database language.
How it breaksInternal jargon or database terms on buttons.
How to fix itUse their words: “Create account”, not “Insert record”.
Check it in your appWould a new user understand every label without an explanation?
3
User control and freedom
User control and freedom
People choose things by mistake: they need a clear way out and the ability to undo.
Orders
Order deleted.
(no undo)
Before: no way back.
How it breaksDeleting with no way back, or flows you cannot leave.
How to fix itA visible undo and a cancel at every step.
Check it in your appCan every important action be undone or exited?
4
Consistency and standards
Consistency and standards
The same thing should be called and behave the same way, and follow the conventions people already know.
Save
Accept
Done
Before: three names, three places.
How it breaksThe same action under three names, or in different places.
How to fix itSame name, same place, and respect conventions: a magnifier means search.
Check it in your appIs every action named and shown the same way on every screen?
5
Error prevention
Error prevention
Better than a good error message is a design that stops the error from happening.
Sign up
Country
Colonbia
Invalid country. Check the name.
Before: easy to mistype.
How it breaksFree text where a list would do, and confirmations for everything.
How to fix itA selector instead of typing, and confirm only what is irreversible.
Check it in your appWhich common errors could you prevent instead of explain?
6
Recognition, not recall
Recognition rather than recall
Reduce memory load: keep the options and the information people need visible.
Shop
?
?
?
?
Before: icons with no text.
How it breaksHaving to remember something from another screen, or decode icons without text.
How to fix itLabels next to icons and the order summary always in view.
Check it in your appDoes the user have to remember something you could show?
7
Flexibility and efficiency
Flexibility and efficiency of use
Shortcuts speed up experts without getting in the way of beginners.
Orders
Order 11Delete
Order 12Delete
Order 13Delete
One click at a time.
Before: everything one by one.
How it breaksRepetitive tasks with no shortcuts or bulk actions.
How to fix itKeyboard shortcuts, saved filters and bulk actions.
Check it in your appCan someone who uses your app every day go faster?
8
Aesthetic and minimalist design
Aesthetic and minimalist design
An interface should not carry irrelevant or rarely needed information: every element competes with what matters.
Shop
NEW-20%★ 4.5EnvíoCupónTopHot+1
Buy
Before: everything competes for attention.
How it breaksScreens full of elements that take attention from the main thing.
How to fix itRemove what almost nobody uses and keep one main action. Minimalist does not mean hiding what users need.
Check it in your appWhat is the main action on this screen, and can you see it?
9
Recovering from errors
Help users recognize, diagnose, and recover from errors
Error messages should use plain language, state the problem precisely and suggest a solution.
Payment
Error 500
OK
Before: a code that explains nothing.
How it breaksCodes like “Error 500” with no explanation.
How to fix itSay what happened and what to do. An extra practice, not from Nielsen: don't erase what the user already typed.
Check it in your appDoes every error message say what happened and what to do?
10
Help and documentation
Help and documentation
Ideally it is not needed; if it is, help should be easy to search, focused on the task and short.
Settings
Manual.pdf
240 pages
Before: a huge manual.
How it breaksHuge manuals with no search.
How to fix itShort help, with steps, right where the user gets stuck.
Check it in your appCould the user solve their question without leaving the screen?
