Products that aren't usable breed terrible experiences for the people that engage with them. The Neilson Norman Group have worked to assemble some of the top heuristics that the industry relies on to evaluate the usability of a product. When designers use this tool in their creation of new products and user interfaces, it will challenge and push them to evolve their artifacts well beyond the initial stages of work.
I created this poster to hang on my wall as an aesthetically pleasing reminder of these founding heuristics of good design. Let's take a quick look at these industry-standard principles that help designers level-up their work.
The system should always keep users informed about what is going on, through appropriate feedback within reasonable time.
Giving people real-time insight into the status of the system and their relationship to it garners trust and builds a bond in the human to computer interaction. When we fail here, people are often confused and can easily encounter errors and difficulties using the product. You can utilize heuristic #8 to create simple and informative indicators for users.
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.
This is really about context. Our products and services live in the context of the 'real world' that humans exist in. In the pressures of project constraints, it's important to remember the 'real world' we live in and create products and interfaces that resonate with the realities of living here on earth. When we fail here we degrade people's confidence in their ability to use the product, which can ultimately drive them away. A great way to overcome this is to regularly engage in user testing to ensure that there isn't major cognitive dissonance between our products and human understanding.
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.
Undo and redo are a game changer. It might seem like common sense, but when it's missing you notice...and you probably get frustrated very quickly. When we don't provide clear handles (or affordances) that give people control over the interfaces they use it creates interfaces that are like a watermelon covered in grease: difficult to control and messy. Great designers never aspire to create products like these, but the tradeoffs that come in the product development process can creep in and create difficulties like this. To overcome this challenge, explore the 'unhappy path' that people might take, prioritize them, and provide clear and easy affordances that help them use the product like a pro.
Users should not have to wonder whether different words, situations, or actions mean the same thing. Follow platform conventions.
Ensuring that people have a solid footing when they use your product will lead to more delightful experiences and bolster their confidence. Establishing clear patterns and following through by holding to those patterns throughout the product is critical for maintaining a consistent environment for people. As designers set up these patterns, it's helpful to think down the road to other possible applications so we don't paint ourselves into corners unknowingly. Design systems and controlled vocabularies are just two helpful tools that can establish clear expectations for people using your product, service or website.
Even better than good error messages is a careful design which prevents a problem from occurring in the first place.
Have you ever seen those bumper rails at a bowling alley? When you're learning to bowl, it inspires confidence and increases the joy of bowling as you increase your skills. It's no fun to lose over and over again. It's the same way for your product or service. Revisit those "unhappy paths" and intentionally place "guard-rails" that help people encounter delightful experiences with your product. Just be careful to temper this by balancing it with heuristic #3.
Make 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.
Building on the concept in heuristic #4, we can amplify our user’s ability to be experts in our product by creating simple and elegant visuals that represent knowledge. One way of doing this is by pairing well-designed icons with text as a huge accelerator for our visual nature as humans. How many times have you heard, "I don't read..."? You can find a handful of extensive icon libraries like Nucleo or Google Material Icons to get you started. If you have the budget you can hire illustrators to create systems of icons for you with repeatable patterns to extend the library in the future. Just be sure they are flexible enough for a variety of sizes and that they maintain their legibility.
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.
Desktop shortcuts and macOS "Spotlight" are a perfect examples of this type of thing. Imagine an operating system where you were unable to search or reorganize the file architecture to your changing needs. This is the kind of flexibility and ease of use that allow users to bend products and services to meet their own specific needs and more importantly, in their own specific way. When people can quickly drop their beloved application shortcuts in a dock it enhances their experience but cutting out unnecessary time. Designers can use metrics and user scenarios to identify the most-used tasks and provide opportunities for users to optimize their human-to-system interactions.
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.
Information overload can be easy to achieve, especially in a user interface design. No one likes to be presented with loads of data that may or may not be understandable, or worse unrelated to the situation. Keep text in your interfaces short. Write out what you need to communicate, cut it in half, then half again. Limit main navigation items to 5-7 for optimal engagement. Provide clear hierarchy between actions on interfaces. Furthermore, use grids and alignments paired with heuristic #4 so it's aesthetically pleasing to the user.
Error messages should be expressed in plain language (no codes), precisely indicate the problem, and constructively suggest a solution.
Despite your best efforts in great design and holding to heuristic #5, people are going to encounter errors and problems. There's nothing worse than a blank screen, wondering why a form won't proceed, or cryptic error codes thrown at us. It's a frustrating place to be when there's a problem keeping you from completing your task and you have no idea what to do about it. To overcome this problem, designers can provide clear indicators when things go wrong. Additionally, we can ensure that people have the information they need to know why things aren't working and what needs to happen to overcome it.
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.
We all just need a little help sometimes. Even if we perfectly adhere to the previous nine heuristics, there will still be the need to provide a little help to people. An easy way to provide help and documentation is by including short, direct instructive words that act like way-finding elements for people. Typically these can be included along side a headline or cheerful image in the interface. In some more difficult situations, the popular "question mark in a circle" icon can be an indicator that help is just a tap away. In any case, consider users who may be less familiar with your platform or technology and find encouraging ways to provide meaningful, jargon-free help.
There's a reason that NN/g has garnered such notoriety over the years. These 10 heuristics of UI design are an excellent tool in shaping the product of designers for optimal 'fit' with the problems we face in the world of building products and services for customers. I hope this quick review with practical application has been an inspiration for greater quality to the humans we serve in our products.
For more information visit the NN/g articles on the 10 heuristics.
Need help, advice or a speaker for your event? I’d love to connect and help you build novel solutions with design.
