How to Apply Nielsen-Norman's Design Heuristics
Based on Nielsen-Norman's usability heuristics. Figma template at the end
When you're designing interfaces for the best user experience, it helps to have guiding principles.
The Nielsen-Norman group has established usability heuristics that guides a designer’s thought process while designing.
Here’s a take on the original heuristics but with a twist by adding a few more to account for aesthetics and joy. An interface needs to not only be functional but also emotional.
The design heuristics are grouped under Understandability, Reliability, Efficiency, and Aesthetics.
Subscribe if you're new here!
What are the 12 Design Heuristics
#1 Understandability
1: Visibility
Inform users about what is going on through feedback.
Doing this helps set expectations. User anxiety is caused by not knowing what's going on compared to a negative outcome
e.g. Google Drive showing the status of the document upload. It tells the user how much has been uploaded and how much time is left.
e.g. When you click on the Login button, you see a spinner with the Login button greyed out and copy that says 'Logging in'
2: Mapping
Use familiar words and phrases from the real world.
First-time users will have to expend cognitive resources to map the interface with their established mental models. Making this gap as small as possible is the best case solution.
e.g. Substack uses the word ‘Publish’ for submitting the article, which is familiar to the real world.
3: Freedom
Allow options for the user to choose from.
Humans like control. Studies have shown that giving users even the false sense of control is better than having no control at all. Examples of this are the open and close buttons in elevators. In most cases (not all) they are nothing but placebo effects of allowing users the perception of control.
e.g. When installing an app on your Mac/PC, you will be given a default option for the recommended installation location, but also you can choose a specific directory to install the app in.
4: Consistency
Ensure that functionality, copy, and UI elements are consistent across screens.
When you use a new interface, you'll spend some time to get used to the copy and UI elements. Don’t make it difficult for the user to use the product.
e.g. If you've used Log in on one screen, don’t use Sign in on another screen
5: Recognition
Make it easy for the user to perform actions without having them to remember.
Recognition is easier than recall.
e.g. Quora suggests possible questions based on what users are trying to type
e.g. When you're replying to a tweet on Twitter, it allows you to reference the original tweet by swiping down.
6: Help
Provide easy access to help docs in context.
The aim is for the product to be simple enough to be used without any documentation. But for more complex products, help should always be available.
e.g. Bubble, a no-code tool builder, allows for in-context help through text and videos without having to leave the page
#2 Reliable
7: Error Prevention
Eliminate conditions in which errors can happen.
During user testing, identify steps which are likely to cause an error and solve for them. This would prevent frustration from having to face the error and undo the changes.
e.g. Google Search auto offers to autocorrect spelling mistakes.
8: Error Recovery
Express error messages in simple language, explaining the problem and suggesting a solution.
Unintelligible descriptions and no way to recover from the errors are terrible for the user experience.
e.g. If the internet connection drops, explain the problem and provide a solution - which is automatic reconnecting to the app once the internet connection is established again
#3 Efficiency
9: Efficiency
Identify frequent actions to optimize for advanced users.
The best product is the one that helps achieve the jobs-to-be-done in the least possible time.
e.g. Keyboard shortcuts in the email app Superhuman is a great example of this. It allows for greater efficiency gains by just using the keyboard to operate the interface
#4 Aesthetics
10: Minimalism
Reduce clutter in the interface by only showing elements that support the user goals.
Balance the tradeoff between Minimalism and other heuristics such as Recognition. Out of sight is usually out of mind.
e.g. Google's home page
11: Aesthetics
Improve aesthetics by focusing on symmetry, color combinations, typography, design
Aesthetic beauty affects how we perceive brands, products, and interfaces.
e.g. Headspace, the meditation's app, use of muted colors, medium gray font color, simple and playful shapes provides an aesthetic appeal
12: Joy
Give positive memorable feedback by the use of graphics, animations, sound, and transitions.
Using this you can appeal to the emotional side of a human and build a deeper connection with the user.
e.g. Google Pay's animations at the time of making the payment
e.g. Apple App Store's haptic feedback on the iPhone when the app has been downloaded/bought.
As always there are tradeoffs between different heuristics. That's a decision your team will need to take. But it’s an objective look into what sometimes becomes a subjective process.
In my experience, it’s easy to forget about the heuristics unless they’re embedded in the workflow.
So I thought of creating a Figma template that can be used with your design workflow. This allows for design decisions to be tracked against these heuristics where the team can intelligently discuss tradeoffs while designing the most optimum solution.
Use the template and remix it to your own use case!
That's it for today, thanks for making it to the end! Talk to you soon.
Got suggestions on what I should cover next? Leave a comment. I would love to hear from readers.
— Kavir
P.S. Hit the subscribe button if you liked this post. You’ll get weekly posts like this directly into your email inbox.