Tips in Implementing Nielsen’s 10 Usability Heuristics into Your User Interface Design
If you have learned about product design before, whether it is in Human-Computer Interaction (HCI) class or autodidactly, you probably have been pretty familiar with Nielsen’s 10 Usability Heuristics. If you haven’t, don’t worry, this article will give you the complete understanding about the topic and by the time you finished reading this article, I hope you’ll get a little more insight into it :)
Hm.. I’m sure I’ve heard of 10 Usability Heuristics but my understanding is still sketchy about that. If you think that way, no worries! I gotchu covered. I’ll start by explaining the definition of usability itself. Well generally, usability is a condition where somebody is able to easily understand the usage of a certain device or an object like a product. In building User Interfaces, usability plays an essential role. If the design built with lack of usability, it will cause the consumer a waste of time, decline in productivity, frustration, and the lost of interest in reusing the product. Meanwhile, heuristics is something that are bound to the analytical procedure to give an accurate estimation and re-checking before delivering results. Therefore, Heuristic Usability is a method to analyze an object or product to deliver usefulness and ease in accomplishing a goal.
Now what are Nielsen’s 10 Usability Heuristics and the best practices in implementing them into your product design?
1. Visibility of System Status
The design should always inform the users about what’s going on and give appropriate feedback to every user’s action within an appropriate time. Because when users know the current system status, they would get a confirmation that they have interacted with the system. Predictable interactions create trust in the product as well as the brand. Example of the implementation of this heuristic is a confirmation modal after the submission of a form like on the design of my product below:
Another example, this time is a bad one, when it takes the system too long to show feedback so the users will wonder whether their interaction was one sided. Few tips to implement this heuristic on your design:
- Communicate clearly to the users about what the current state of the system is.
- Present feedback to the users as quickly as possible
- Build trust through open and continuous communication
2. Match Between System and the Real World
The design needs to be easily understandable by the users. Use wordings, pictures, symbols (like emojis), and icons that resembles the real world and a human/natural language. The phrases used is also needs to be universal, no inside jokes, etc. so the design can be universally understood. The good example of this is:
The use of these icons goes along with the user’s cognition. These icons represents the real life events where bell is often used to notify somebody, and a human icon is a representation of the individual itself.
Meanwhile, the bad example for this heuristic is like in the picture below. The developers could easily use wordings like “Sign Up” instead of “Yes, I want Neil to teach me how to grow my Business!” which would add the user’s cognitive workload instead of minimizing it.
Few tips to implement this heuristic on your designs are:
- Make sure that users can understand a word or a phrase’s definition without having to look it up somewhere else.
- Never assume that users understand something, so always apply universal designs.
- You can conduct a user research to help you understand more about the common understanding of your target audience.
3. User Control and Freedom
This heuristic allows users to control their own action, for example when users accidently take a certain action they don’t actually want to, the system needs to provide an easy reversal. For good example, again from my project design, we provide users with a breadcrumb, or a linked path to inform the users about their current location on the site, so they won’t feel like they’re lost if they accidently went to a certain page and could easily go back to the previous page:
The bad example of this is the change of Instagram’s new navigation bar, where they replace the Activity/Notification menu button into Shopping button. It annoyed some of their users because that was an unwanted change. In this case, Instagram should have proposed an alternative design by allowing users control and personalize what should be on their navbar.
Few tips in implementing this heuristic into your design is:
- Support undo and redo.
- Show a clear way to exit the current interaction.
- Provide alternative designs like a personalized element.
4. Consistency and Standards
Users should not have to wonder whether different words, situations, or actions have the same meaning or functionality. Designers need to follow the project’s convention. If the designers failed to maintain consistency, it will increase the user’s cognitive load by having to learn something new every single time. The good and bad examples for this are:
The bad example shows the inconsistency of the text alignment between the title and the paragraph. This would make users wonder whether the paragraph below is something relevant to the title or not. Meanwhile the good example shows very clearly that both the title and the paragraph has an obvious bond and relevancy.
Few tips in implementing this heuristic to your designs are:
- Improve the learnability by maintaining both internal and external consistency (team-wise and user-wise).
- Maintain consistency for the whole product or even, for a family product.
- Follow established industry conventions for external consistency.
5. Error Prevention
Errors should be handled gracefully, for example by giving error messages. Good error messages are important, but it is more important to prevent the error itself from happening at the first place. There are 2 types of errors: Slips, the unsuspicious errors that are usually occurred unintentionally. And then, there’s mistake, the conscious errors that occurred ‘cause the lacking of harmony between the user’s mental model and the design. The good example is, provide a confirmation box before deleting/cancelling something, like a file or action because who knows, the users probably accidently pressed delete or cancel by mistake.
Few tips in implementing this heuristic on your designs are:
- Set a prioritize scale. Prevent high-cost and major error first before moving to the smaller ones.
- Avoid slips by providing a good and helpful constraints and defaults.
- Avoid mistakes by minimizing memory burdens and showing confirmation and warnings to the users.
6. Recognizing Rather than Recalling
Minimizing the user’s memory load is important because it would minimize cognitive workload. This can be done by making the elements, actions, and options visible. The users need to be able to quickly recall the actions they have taken from the past to save a bunch of time. For example, in video conference applications, when you mute your microphone, it’s clear that the microphone icon will be having a cross in it to sign that your microphone is currently inactive.
Few tips to implement this heuristic to your designs are:
- Let users recognize an information rather than having to recall it.
- Offer help in context or along the way, instead of providing a long tutorial.
- Reduce amount of side (non-main) information given to users so it’ll be easier to remember.
7. Flexibility and Efficiency of Use
For new users to be able to understand a system, they need to learn a lot of brand new informations. To reduce the amount of information the users have to process, you as designers can provide shortcuts for a system that has a lottt of features. A bad example to this is when a system has too many features that the users need to remember which feature is which. And the alternative to this design is to provide keyboard shortcuts like on the browser like below:
A few tips to implement this heuristic on your designs are:
- Provide accelerators like touch gestures and keyboard shortcuts.
- Provide personalized design and allow users to customize their own interface.
8. Aesthetic and Minimalist Design
Interfaces should not contain irrelevant and unnecessary information. Don’t get it wrong, this heuristic does not force you to use flat designs, but it is rather to the effectiveness of the interface that supports the users’ primary goals. And anyway, sometimes excessive information would drift the user’s focus away and it’ll reduce the user’s interest in exploring the site more. For the good example, on the apple’s site below, they only show what they want users to focus on, which are the quality of the watch, the picture of the watch itself, and its price. And the rest, they left the information on the Learn more page, which users can access only if they want to.
The bad example of this is on amazon’s old website, where it was quite messy on there:
Few tips in implementing this heuristic into your designs are:
- Keep the focus of content and visual design on the site to the essentials.
- Prevent user’s distraction from the main goal by putting up unnecessary elements.
- Prioritize contents and visuals that support the user’s primary goals.
9. Help user Recognize, Diagnose and Recover from Errors
Error messages should not be shown to the users as error codes. It should be served as a plain, natural language and needs to show an effective, constructional solutions to the problem/error itself to help users understand where did it go wrong. The error message should also be represented by visual treatments, like red colorings for example to minimize the users’ cognitive effort. See the bad and good example below:
Few tips to implement this heuristic into your designs are:
- Use traditional error message interfaces, like red texts, etc.
- Tell users where did it go wrong by using a clear language.
- Offer the users some solutions to resolve the error.
10. Help and Documentation
Last but not least, help and documentation. Well, it is actually better and best if the interface does not need any additional explanations. They better speak for themselves. But however, it could still be necessary to provide documentations to help some other users who need additional information to understand more about the feature and how does it work. The examples of implementation are the availability of helpdesk on a website, and a push revelations when you hover over a certain button like below:
Few tips in implementing this heuristic on your designs are:
- Make sure that the help is easy to search and accessible.
- If possible, present the documentations in context right away when the users need it.
- List concrete steps to be carried out in certain situations to write a proper documentation.
Well that’s all the 10 Usability Heuristics explained. Hope you have gotten a little insights at them, their examples, and the tips on implementing each heuristic to your designs. Thank you for reading, and have an awesome day!! :D
