Heuristics are related to the visual part of any product. It could be an app, website or any user interface. Heuristics are everywhere, they grow, they multiply, they are in tablets, phones, watches… Behind each heuristic, there is a UI, and behind the UI, there is a team. In this article, we’ll discuss what a heuristic is, how to identify them and how to conduct a heuristic review on designs.
There's a lot of responsibility for a single UI to communicate clear ideas and concepts without confusing the user. Since these are such complex projects, there is often room for error. It’s the developers’ job to address any concepts that can create problems that go beyond algorithms and logic, like buttons, menus, interactions and graphics. In the 1980s, Jakob Nielsen of Nielsen Norman Group created the “10 Usability Heuristics” as a cost-efficient way to evaluate interfaces.
What is heuristic evaluation?
Who better to explain it than the creator Jakob Nielsen, himself?
In summary, heuristic evaluation is a method for finding usability flaws in a design by judging must-know principles for what makes a user interface easy to use. The know principles behind are called "heuristics," which essentially means, "rules of thumb.” It’s a comprehensive design guideline that applies to a wide range of user interfaces (with some exceptions).
Why do designers conduct heuristic evaluations?
Heuristic evaluations help designers identify and focus on specific issues without having to speak directly to users. It provides a quick, cost-efficient and simple way to assess your site's usability.
How do you perform heuristic evaluation?
First, you'll want to establish your list of heuristics (thanks to Jakob Nielsen, this is done for us). You'll then want evaluate the areas of your UI based on the list of heuristics and record any problems. Once complete, think of ways you can assess or fix these problems– then, you can repeat the process again.
When should you conduct a heuristic evaluation?
Heuristic evaluations are intended to be completed before coding, but can be conducted at any point during the design process. Truthfully, the sooner and more frequent the better.
Need an evaluation of your User Interface (UI)?
You want a website/app that is captivating and easy to use, but completing a UI heuristic evaluation is not an easy task. That's why we're here to help! Contact Mobility Quotient and our team of expert UI/UX Designers can look at your website or app with a fresh set of eyes. We'll help ensure your user interface (UI) meets all of Nielsen's heuristic requirements and so much more.
What are the 10 Usability Heuristics of User Interface (UI) Design?
1. Visibility of System Status
Your system should always keep users informed about its status through appropriate feedback within a reasonable time. Visibility of system status relates to so much more than the user interface design at its essence– it's about communication and transparency, which are critical to many aspects of our life.
If you take a few moments and look around, you will find that there are a lot of systems around you and how they are communicating their system status to you. For example, your phone or laptop will be displaying how much battery life remains, and your email app will let you know how many emails you have unread. A signal on the train will indicate to you the next stop. All these pieces of information will allow you to accurately assess the current stage of a system you are interacting with, and that's what the visibility of system status means.
Example of visibility of system status:
Where can we apply visibility of status?
- Tracking systems: Indicating what step of the workflow you are in, what is upcoming and already completed, and how long it will take to complete.
- Long processes, inform users of the progress status and remaining time when loading content, saving changes or processing data.
2. Match between System & Real World
The system should speak the user's language, with words, phrases, and concepts familiar to the user, rather than system-oriented terms. in simple words, we need to avoid technical words and jargon, and instead, speak to the user with simple words, phrases and concepts that are familiar to them.
Where will the match between system & real world heuristic apply?
- Content in a user interface: Ensure you are not using verbiage that is too technical that your audience may not understand
- Icons and call to action: Use conventions and widely known elements.
- Forms: Fields mush refer to available information for the user.
- Metaphors: Shopping cart, desktop, button, trash, copy-paste, drag and drop etc.
3. User Control & Freedom
Users often choose system functions by mistake and need a marked "emergency exit" to leave the unwanted state without an extended dialogue. Basically, you need to support “undo” and “redo.”
What is an example of User Control and Freedom?
A great example of user control and freedom is the "undo" option.
Another example is the return arrow or button on Microsoft Word that allows you to choose to what specific action you want to go back.
Where does the user control and freedom heuristic apply?
- Undo and redo actions: Always provide the possibility of undoing or redoing an action. The user needs to be confident that every action can be undone or that they can go back to where they were.
- Application exits and session sign-out: Allow users to sign out and quit their applications. Your app should not rely on the web browser to go back, but it should contain the option to go back on its own, if the user makes an accidental tap.
- Termination of processes: Allow users to finish a process at any given time.
4. Consistency & Standards
Your UI should be consistent. Users should not have to wonder whether different words, situations, or actions mean the same thing. Follow platform conventions. This heuristic will ensure that your application is predictable and learnable.
A perfect example of internal consistency is how in Microsoft Office Suite, all the text tools look similar to each other.
On the other hand, external consistency refers to maintaining consistency on outside the products. There may be established conventions for UI in the industry example. Most e-commerce sites have the shopping cart feature. Users are familiar with that feature because it is consistent within the online shopping industry. Notice how the shopping cart icon is usually located in the top right corner of the site? That is no coincidence! It's an example of external consistency.
Where does the consistency and standards heuristic apply?
- Design systems: Design systems like bootstrap or google material provide a cohesive set of ready-to-use UI components page templates.
- Internal consistency: Refers to the consistency within a product or family of products.
- External consistency: Refers to maintaining consistency outside of products. If there is an established convention for UIs, your will want to leverage that so users will know what to expect.
5. Error Prevention
Even better than good error messages is a careful design that prevents a problem from occurring in the first place. Either eliminate error-prevention conditions or check for them and present users with a confirmation option before committing to the action.
For example, how annoying it is to write down a username, and after clicking next, the system tells us the username already exists. A good design will prevent this by sending messages that the password or username does not meet the requirements.
Another example is adding intermediate steps before doing an action with significant consequences. To make sure that the user understands the implications of this action.
Where does error prevention apply?
- Forms: If you need to validate data for the user, such as passwords or usernames, be sure that you are doing it before the user gets frustrated. Always be clear about the information required in forms to avoid frustrations.
- Permanent actions: Add a confirmation step before allowing users to perform a permanent operation, like deletions or account cancellation.
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 using the system should be visible or easily retrievable whenever appropriate.
Another way to say it is: do not make users think! The principle behind this is minimizing the memory load by making things visible.
For example, when you search in Amazon, you see a list of recommendations as you can see, even before you finish typing the is suggestion already, doing this is helping the user by recognizing what they are searching for.
Amazon also asks you to pick an address they recognize that you had used more than one address, and instead of making you type your address every time, they offer you to choose from the different addresses you use in the past.
Where does recognition rather than recall heuristic apply?
- Typehead: If you add a search or any input, include typeahead clues.
- Autocompletion of known fields: Users shouldn't remember information from one piece to the other. Like product codes ids or keys. I prefer selection and dropdown over text input.
- Customized content: Today, popular companies like Google, Netflix and Amazon rely on recommender systems extensively. By analyzing users' preferences and behaviour, customized content is displayed without any prompt. Beware of the side effects of these techniques on data privacy and amplification of biases.
7. Flexibility & 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. Allow users to tailor frequent actions.
Example one: A computer keyboard has shortcuts for frequent operations.
Example two: Instagram has two ways to like a photo, double-tap on a picture and tape the heart icon too, that is not duplication that is adding a shortcut
Where does the flexibility and efficiency of use heuristic apply?
- Shortcuts to frequent tasks: Frequent tasks should always be easily accessed
- Advanced settings: Add advanced settings or if you need to allow expert users. Always include help in forms.
- Customized use: In specific scenarios, allow users to customize their shortcuts and direct access for better performance. Example: notifications, accounts, colours, keys (a must in gaming), direct accesses.
8. Aesthetics & Minimalism
Dialogues should not contain information that is irrelevant or rarely needed. Every extra unit of information in a dialogue competes with the relevant information units and diminishes their relative visibility. Meaning does not have one screen with all the information is better to show the info needs it at that time.
Example: Walmart's old design vs Walmart's new design in both versions, you can buy a headset but, the left version is busy fill with unnecessary information, looking very complicated and in the right version looks clean and more organized showing relevant information.
Recommendations to apply the aesthetics and minimalism principle:
- Only display relevant data: Do I need this data to complete my task?
- Removed unused elements: Hide or remove screen elements are not required.
- Focus on the task: The design should not have distractive elements.
9. Help users recognize, diagnose, & recover from errors
Error messages should be expressed in plain language (no codes), precisely indicate the problem, and constructively suggest a solution.
Example one: this is a gallery of messages where you can see it is not helpful and is useless because it is not given any solution.
Example two: This is a good example of a good error message because it lists the following:
- Error details: Explains what happened. No jargons
- Link for advanced data: Hides technical data with a QR code link
- Progress: Indicates progress in the action occurring
- Error code: This shows the error code for the technicians
Recommendations for helping users identify problems in UI Design:
- Informative: Tell the user what happened in clear language. Avoid jargon. Use links or collapsed sections to add advanced details.
- Ensure continuation of work: Once the error happens, provide clear steps on how to continue operating. Call support on 0-800-9999? Rest an account in this link? etc. Always offer a continuation.
- Consistent, short and concise: Messages should be brief with the UI displayed.
10. Help & 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 be necessary to provide help and documentation. Any such information should be accessible to search, focused on the user's task, list concrete steps to be carried out, and not be too large.
UNIQLO’s website help groups frequently asked questions and help options into categories. When you plan a help page, you’ll need to think of all scenarios that your users could possibly need assistance or guidance with.
Recommendations for help and documentation heuristics in UI design:
- In addition to a good design, including help and documentation: if something fails, create a section and contact point where users can understand the system and troubleshoot problems. Remember to write in plain language.
- Include frequently asked questions: When possible, include FAQ or solutions to frequent questions
- Focus on the tasks: Ensure main tasks are covered and have sufficient information.