10 Usability Heuristics and How To Apply Them To Product Design
10 Heuristics for User Interface Design were coined by Jakob Nielsen back in 1994. Although the heuristics were introduced more than two decades ago, heuristics are still relevant to modern product design. In this article, I go through each heuristic, provide my interpretation as well as relevant examples to illustrate them.
#1: Visibility of system status
The system should always keep users informed about what is going on, through appropriate feedback within reasonable time.
What does it mean: Don't make users wonder; offer any sort of feedback (visual, audio, haptic) to help them understand what's happening. It's particularly important to provide feedback on actions initiated by the user - in such case, the feedback acts as acknowledgment for the user (i.e., users understand that the system received their request).
Example: Loading. Load time can vary drastically depending on the context, and when users don't have any feedback, they simply don't have any information whether the system is doing something or not. Feedback alleviates fears that system is not responding.
System feedback is not necessarily visual; it can be audio. Some products integrate sounds so naturally in their products, so the sounds become a part of their branding. For example, many of us know the boot sound of Apple Mac.
#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.
What does it mean: It's essential to identify all places in your app that can cause confusion and redesign them to make them evident for your target audience. Confusion can be caused by unfamiliar terms or unfamiliar concepts. To beat the first problem, we need to avoid jargon and use terms that are familiar to your target audience. To overcome the second problem, we need to rely on analogies from the real world.
Example: Real-world analogy. Mercedes uses a metaphor of a physical chair for their power seat adjustment controls. It helps passengers understand how to configure the seat according to their needs.
#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.
What does it mean: Support undo and redo for user operations.
Example: Undo action. When users send a message using Gmail, the service offers a confirmation dialog with the Undo button. The 'Undo' button allows users to cancel the sending if the message was sent by accident.
#4: Consistency and standards
Users should not have to wonder whether different words, situations, or actions mean the same thing.
What does it mean: Strive for a consistent design. Offer 'internal' consistency (consistency of individual design decisions in your app) and 'external' consistency (consistency with platform standards).
Example: Product navigation. The location of crucial navigation objects should be consistent. Both the structure and location of the navigation menu should be the same in different parts of your app/website.
#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.
What does it mean: Design your products to minimize the total number of cases when users can face problems and will need support & assistance.
Example: Form input. Inline validation in forms can be used to validate the data on the fly, so the user doesn't need to tap the Submit button. This technique is especially great for a password because it can tell what users need to change and why.
#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.
What does it mean: 'Don't make users think' (Steve Krug). Provide all required suggestions at the moment when users need them.
Example: Contextual recommendations. Google search typing suggestion is an excellent example of contextual recommendations. As the user starts typing, Google Search suggests the relevant query, and this helps users find the relevant query in less time.
#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.
What does it mean: Offer shortcuts that allow users for more efficient interaction with your product.
Example: Shortcuts. Adobe XD offers keyboard shortcuts that will enable you to use frequent actions without clicking the menu.
#8: Aesthetic and minimalist design
Every extra unit of information in a dialogue competes with the relevant units of information and diminishes their relative visibility.
What does it mean: Follow 'less is more' approach in your design. Remove all unnecessary elements that do not have a positive impact on user experience.
Example: Prioritize content over chrome. Minimalistic products focus on content and remove all unnecessary visual design details. Apple website is an excellent example of minimalism. Many pages of the website are centered around one particular product or idea, and this makes it easier to prioritize information.
#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.
What does it mean: Don't only state the fact that users face a problem, offer a solution on how to solve it.
Example: Clarity and helpfulness of error messages. When users see error messages like this
They rarely know what to do next. That's why it's vital to provide a clear path on how to solve the problem. Compare the above message with the following one. It's evident what message works better for users.
#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.
What does it mean: Offer helpful documentation inside your product. Documentation should be a part of the product design backlog; it should be a living document that will be updated regularly.
Example: In-app help and documentation. Monday.com offers help and support right inside the product.
