Our intention in writing this post was two-fold.
Instead of merely explaining the 10 heuristics over and over again, we first sought to provide contextual clarity and applicable insights to those readers familiar with the 10 heuristics guide, while also ensuring those unfamiliar with Norman Nielsen received a concise yet informative breakdown of each heuristic. By exploring a series of questions that were overlooked in the original document (and elsewhere), we believed that we could help UI practitioners get the most out of this foundational guide by facilitating its real-life application.
The second, and perhaps more important, reason we created this post was to showcase our Usability Heuristics Scorecard. We built this tool as a practical checklist to measure if a design system clears the basics steps to be considered highly usable or not. We felt that this question warranted particular attention given that the current status quo makes such a check quite complex and often time-consuming.
So, that’s why we created this post, now let’s see how it can help you.
For optimized visibility, your system should give users only the info that will help them progress on their journey.
The better your users know your system, the more engaged and comfortable they will be using it. Reward them with insightful information and immediate communication points following the completion of an action or task—this can be playful like Asana’s unicorn or as pragmatic as a simple progress bar.
Finally, keep user engagement high with compelling and clear messages that don’t confuse your user.
Detailed user research, an iterative-first mindset, and a design system based on real-world conventions are all core components of a user-centred tool.
For your content system, avoid any jargon (unnecessarily complex terms), industry-oriented terminology (confusing acronyms or naming conventions), or internal-focused language that may confuse users.
Don’t try and reinvent the wheel with your UI interactions. Instead, mirror and mimic real-life norms (like how we swipe right to match on dating apps) that your user will be most familiar with.
A clear pathway for users to return to a page that they perceive as the previous logical location is vital when designing a system with strong user freedom. Denying or obstructing a safe exit via a back or undo button is a surefire way of reducing or denying user control and losing an existing user.
One point to note is that there’s often a difference between what is technically a new page and what users perceive to be a new page. Design a highly usable system that understands your users’ prior site experience and shapes their journey accordingly. To do this, make sure that the cancel button is easily found and can be quickly executed.
Finally, effective UI design bakes in discoverability, it doesn’t make it a prerequisite for basic functions like undoing an action or process. After all, if your undo button is hard to find does it even really exist?
Pragmatics resource: Try our Usability Heuristics Scorecard to measure how effective your design system is for your users.
If you want to ensure that your users spend as much time as possible exploring and interacting with your product, you need to make sure they spend as little time as possible trying to understand how your design system works. This means you need to use terms and visual descriptions that they are familiar with. Check out Figma’s slash naming system for a simple yet effective example.
Empower your users to create their own mental model of how your product works by designing a consistent internal conceptual model system that is logical and learnable. Never take users down unnecessary cul-de-sacs to merely highlight a feature that you find interesting.
Lastly, ensure any components (CTAs, menu items, mandatory fields) that have similar inputs and outputs are displayed consistently across your website or app. Failing to do so will confuse your users and reduce their comfort level while using your product.
From using abbreviated words to unintentional mis-clicks, our users can sometimes frustrate us. However, we must suppress the urge to punish our users! An intuitive design system that contains helpful constraints, contextual and forgiving auto-suggestions, and a default settings system that is relevant to users’ real-world goals will all help prevent user errors.
Both slips and mistakes can be reduced when detailed constraints are part of your design system. Undo buttons, pop-up message alerts, and mandatory confirmation messages are all valuable constraints that prevent users from making an error while using your product.
To ensure your product’s auto-suggestion features add real value, use spelling auto-corrections, recognition of root words, and predictive text.
Crucially, create a default setting rule that matches what the vast majority of users (around 95 percent) would choose if explicit choices were required.
Providing your user with as much necessary context as possible will help them make informed decisions in a timely manner and empower them to use your product more effectively and ambitiously.
The more informational cues a user has using your product, the less cognitive load they will have to expend—resulting in a more favourable user experience. Interfaces that provide ample visual or text-based cues enable users to recognise the exact features that matter the most to them—see Notion’s Notes.
A usable system will also always make it easier for its users to return to previously visited pages without having to remember key details such as its name or even why they visited it—providing in-built recognition.
What do Photoshop, Figma, and Sketch all have in common? They all offer their expert users the option to deploy accelerators to use their tools more efficiently while not impairing less experienced users who may be operating at a slower pace. A system that incorporates accelerators ensures easier execution which improves accessibility as well as efficiency for expert professionals and recreational users alike.
It is vital to use the frameworks of focus, navigation, forgiveness, and simplicity to maintain usability when incorporating accelerators into your applications.
When selecting each specific element of your visual design, ask yourself if it is contributing directly to your user achieving one of their primary goals. Adding any unnecessary elements that don’t directly contribute to serving the user’s primary goals should ideally be avoided in order to keep the signal-to-noise ratio as high as possible.
The aesthetics that you use as part of your visual design system need to result in user empowerment. Applying a healthy mix of skeuomorphism and realism to your design system should provide users with references that feel relatable and appropriate.
The 5 core design principles that you need to consider closely when creating an inclusive visual design are scale, visual hierarchy, balance, contrast, and gestalt.
Pragmatics resource: Try our Usability Heuristics Scorecard to measure how effective your design system is for your users.
A highly usable design system will inform users of an error as soon as it has occurred. This content should be objective, compassionate, and solution-oriented with a clear CTA that will re-route users to their intended destination.
When designing user-centered error messaging, avoid jargon, error codes, and uppercase text as these elements could confuse users further. Make sure to remain humble and never blame the user for the error that has occurred.
Error messages should also educate the user on what went wrong and, where applicable, impart a small amount of knowledge to the user via a hyperlink without being overly condescending or verbose.
The easier users can find answers to problems they have using your product, the more confident and empowered they will feel using it. Chatbots, auto-suggest search defaults without character limits, and tailored suggested questions all help users search for help. Failing to do so will increase the interaction cost for the user—likely leading to user fatigue and possible page abandonment.
The approach you take to supporting users when assisting existing users or onboarding new ones may be persona-based (Trello), involve a dedicated checklist angle (Zendesk), or include the dissemination of core tool tips (Slack). Regardless of which approach you choose, don’t forget that onboarding doesn’t stop with new users. You can borrow certain methods and UX/UI principles to onboard existing users to new features.
Much like Apple or Adidas, Norman Nielsen has been at the forefront of UX design for over two decades. And to continue this weak analogy, some might even argue that their eponymous 10 Usability Heuristics for User Interface Design is the cornerstone of their UI empire, much like the iPhone was for Steve Jobs and co. However, that doesn’t mean that it is a flawless piece of work.
Issues of impartiality, challenges maintaining a fresh mindset, and certain impediments when adequate before-the-fact research and after-the-fact analysis are absent are all valid concerns. That said, as of now, the 10 heuristics guide remains an important foundational asset for UI practitioners looking to be on the right side of the usability line and with our easy-to-use 10 Heuristics Tool, we believe that the process is now even easier to apply. We hope you do too.
Try our Usability Heuristics Scorecard to measure how effective your design system is for your users.
