Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
10 Usability Heuristics for
User Interface Design
As outlined by Jakob Nielsen
Disclaimer:
2
They are called “heuristics” because they
are broad rules of thumb and not specific
usability guidelines.
Bu...
About the Author:
Jakob Nielsen
These guidelines were created over 22 years ago
by Jakob Nielson of the Nielsen Norman Gro...
1. Visibility of System Status
“The system should always keep users informed about what is going on,
through appropriate f...
51. System Status Example Oleg Frolov, Dribbble.com
The progress bar shows
what the system is doing
and provides feedback
...
2. Match between System and
the Real World
“The system should speak the users' language, with words,
phrases and concepts ...
72. Match the World Example iOS Facebook Application
Iconography matches real
world objects, adding
additional context.
3. User Control and Freedom
“Users often choose system functions by mistake and will need a clearly
marked "emergency exit...
93. User Control Example Gmail Web Application
The “Undo” and “View
Message” buttons grant the
user control over previous
...
4. Consistency and Standards
“Users should not have to wonder whether different words, situations,
or actions mean the sam...
114. Consistency Example Google Material Design, https://material.io
The button design is
consistent across the
applicatio...
5. Error Prevention
“Even better than good error messages is a careful design which
prevents a problem from occurring in t...
135. Error Prevention Example iOS Messages Application, Apple
Check with the user before
proceeding with dangerous,
irreve...
6. Recognition Rather than Recall
“Minimize the user's memory load by making objects, actions, and
options visible. The us...
156. Recognition Example AirBnB Website, http://airbnb.com
The form autocompletes
cities, making form input
easier on the ...
7. Flexibility and Efficiency of Use
“Accelerators — unseen by the novice user — may often
speed up the interaction for th...
177. Flexibility Example Google Search
Filtering adds flexibility
and efficiency to image
search from Google.
While not cr...
8. Aesthetic and Minimalist Design
Dialogues should not contain information which is irrelevant or rarely
needed. Every ex...
198. Minimalist Example Google Sign-in Form
The Google Sign in form is
very minimalist. It has a
singular purpose – for a
...
9. Help Users Recognize, Diagnose, and
Recover from Errors
Error messages should be expressed in plain language (no codes)...
219. Error Recovery Example AirBnB Website, http://airbnb.com
The error page includes links
that the user may need, rather...
10. Help and Documentation
Even though it is better if the system can be used without documentation,
it may be necessary t...
2310. Documentation Example Github, https://help.github.com
The help page includes
guides to the most asked
questions, a s...
Any Questions?
24
References:
● “10 Usability Heuristics for User Interface Design” – Nielsen Norman Group
https://www.nngroup.com/articles/...
Upcoming SlideShare
Loading in …5
×

10 Usability Heuristics for User Interface Design

2,177 views

Published on

An overview of the 10 Usability Heuristics for User Interface Design developed by Jakob Nielsen of the Nielsen Norman Group. Each heuristic is explained and examples are provided.

Published in: Design
  • Hey guys! Who wants to chat with me? More photos with me here 👉 http://www.bit.ly/katekoxx
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

10 Usability Heuristics for User Interface Design

  1. 1. 10 Usability Heuristics for User Interface Design As outlined by Jakob Nielsen
  2. 2. Disclaimer: 2 They are called “heuristics” because they are broad rules of thumb and not specific usability guidelines. But they still matter.
  3. 3. About the Author: Jakob Nielsen These guidelines were created over 22 years ago by Jakob Nielson of the Nielsen Norman Group. These ten broad rules were refined from 249 different usability problems. 3
  4. 4. 1. Visibility of System Status “The system should always keep users informed about what is going on, through appropriate feedback within reasonable time.” 4
  5. 5. 51. System Status Example Oleg Frolov, Dribbble.com The progress bar shows what the system is doing and provides feedback while it working.
  6. 6. 2. Match between System and the Real World “The system should speak the users' language, with words, phrases and concepts familiar to the user, rather than system- oriented terms. Follow real-world conventions, making information appear in a natural and logical order.” 6
  7. 7. 72. Match the World Example iOS Facebook Application Iconography matches real world objects, adding additional context.
  8. 8. 3. User Control and Freedom “Users often choose system functions by mistake and will need a clearly marked "emergency exit" to leave the unwanted state without having to go through an extended dialogue. Support undo and redo.” 8
  9. 9. 93. User Control Example Gmail Web Application The “Undo” and “View Message” buttons grant the user control over previous actions within the system.
  10. 10. 4. Consistency and Standards “Users should not have to wonder whether different words, situations, or actions mean the same thing. Follow platform conventions.” 10
  11. 11. 114. Consistency Example Google Material Design, https://material.io The button design is consistent across the application, creating a learnable design pattern
  12. 12. 5. Error Prevention “Even better than good error messages is a careful design which prevents a problem 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.” 12
  13. 13. 135. Error Prevention Example iOS Messages Application, Apple Check with the user before proceeding with dangerous, irreversible actions.
  14. 14. 6. Recognition Rather than Recall “Minimize the user's memory load by making objects, actions, and options visible. The user should not have to remember information from one part of the dialogue to another. Instructions for use of the system should be visible or easily retrievable whenever appropriate.” 14
  15. 15. 156. Recognition Example AirBnB Website, http://airbnb.com The form autocompletes cities, making form input easier on the user.
  16. 16. 7. Flexibility and Efficiency of Use “Accelerators — unseen by the novice user — may often speed up the interaction for the expert user such that the system can cater to both inexperienced and experienced users. Allow users to tailor frequent actions.” 16
  17. 17. 177. Flexibility Example Google Search Filtering adds flexibility and efficiency to image search from Google. While not critical for the app to work, it makes it more efficient.
  18. 18. 8. Aesthetic and Minimalist Design Dialogues should not contain information which is irrelevant or rarely needed. Every extra unit of information in a dialogue competes with the relevant units of information and diminishes their relative visibility. 18
  19. 19. 198. Minimalist Example Google Sign-in Form The Google Sign in form is very minimalist. It has a singular purpose – for a user to sign in.
  20. 20. 9. Help Users Recognize, Diagnose, and Recover from Errors Error messages should be expressed in plain language (no codes), precisely indicate the problem, and constructively suggest a solution. 20
  21. 21. 219. Error Recovery Example AirBnB Website, http://airbnb.com The error page includes links that the user may need, rather than just sending them back to the homepage.
  22. 22. 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. 22
  23. 23. 2310. Documentation Example Github, https://help.github.com The help page includes guides to the most asked questions, a search bar and a list of common issues.
  24. 24. Any Questions? 24
  25. 25. References: ● “10 Usability Heuristics for User Interface Design” – Nielsen Norman Group https://www.nngroup.com/articles/ten-usability-heuristics Copyright © 2005 by Jakob Nielsen. ISSN 1548-5552 25

×