In 1994, Jakob Nielsen introduced 10 general principles for interaction design. These are broad guidelines for improving the digital experience for all. We consider these usability principles essential in the work we do here at UXATT.
If you are not familiar with the term heuristic, Merriam-Webster defines it as:
adjective: involving or serving as an aid to learning, discovery, or problem-solving by experimental and especially trial-and-error method.
noun: the study or practice of heuristic procedure
In short, it means: enabling a person to discover or learn something for themselves.
A good example of this is a smartphone, which for most is intuitive to use and learn without having to read a manual beforehand.
Here are our explanations of the 10 guiding principles from Jakob Nielsen at Nielsen Norman Group, a resource we strongly recommend:
#1 Visibility of system status
Keep people informed about what is happening. Let them know what is going on with appropriate feedback between interactions when needed.
Examples:
- Displaying a message when a task is running and letting people know the progress of the task.
- Confirming a form has been submitted or a file has been saved.
- Display an animated loading icon while a file is uploaded.
- The battery icon on your phone shows the percentage of power remaining.
Inform people about what is going on for usability and build trust.
A good rule of thumb here is to provide feedback in a timely manner, especially for tasks that take over 1 second and under 10 seconds. Show a progress indicator if the task will take longer than 10 seconds.
#2 Match between system and the real world
Use words, phrases, concepts, and real-world conventions so that information is clear, natural, and in a logical order for people. Follow real-world conventions, making information appear in a natural and logical order because people’s mental models of technology are based on their previous digital experiences and their experiences in the physical world.
Example:
- A Kindle app with gestures that are very similar to what you would do reading an actual book. Turn pages, highlight, and bookmark.
- A smartwatch face that mimics an analog clock face.
Use direct and plain language (rather than marketing jargon) so people can recognize and navigate through a digital experience effortlessly. Also, by following real-world conventions people will feel like you know them and that you care about them.
Speak the language audiences are familiar with. Avoid using “insider” terms or being abstract when presenting concepts. Use real-world conventions. Avoid marketing jargon or trendy terms.
Consider the phrase, follow us on social media vs stay in touch. Which is easier to understand?
Incorporate a skeuomorphic design where it makes sense. That means creating a digital experience that resembles what you do in the real world.
#3 User control and freedom
People often choose system functions by mistake or want to cancel, close, go back, or undo an action to leave the unwanted state without having to go through an extended dialogue.
Examples:
- a back and forward button in a browser.
- Undo or cancel buttons on a form.
- These should be clearly marked. People feel in control when they feel they can undo or cancel an action they did not intend to do. This gives them the freedom to explore without fear.
Make it easy for people to back out of any action and foster a sense of freedom and control that will empower users to be fearless and to explore more features throughout a platform or system.
Give everyone an emergency exit if they want to go back or cancel and action. Allow them to undo and redo actions. Let people control and adjust their environment to their needs. Support assistive technologies and provide alternative ways for users to consume content (screen readers, video captioning, written and audio transcripts, etc. )
#4 Consistency and standards
Use the same words, phrases, and terms throughout. Don’t make people guess if you are referring to the same thing using a different term. Be consistent with both your internal and external interfaces. Follow standard conventions, so you don’t have to force people to learn something new. Keep their cognitive load to a minimum.
Examples:
- A shopping cart is located in the upper right corner of the website because that is where users expect it to be.
- Using the same color and shape for call-to-action (CTA) items like buttons, and avoid using that color and/or shape on static elements where it might be confused as something actionable.
Use a clear visual language within the user interface (UI) and be consistent when incorporating external (well-known) features and components to provide people with reliable experience and to improve the product’s learnability.
Jakob’s Law: “People spend most of their time on sites other than yours.” We love this law as it reminds us that we don’t want to add to people’s cognitive load. They should not have to wonder if different words, interactions, or symbols mean the same thing because they want to know what to expect and how to operate the interface.
#5 Error prevention
Design your software to prevent people from making mistakes. Warn everyone beforehand and allow them to confirm their intent. When an error occurs, avoid cryptic messages and use plain language to describe the error and provide a next step on how to resolve it.
Example:
- Confirmation dialogues
- Undo buttons
- UI placement, colors, etc
- Reinforcing content missing…
Look at things you can do to prevent people from having to redo their work and prioritize issues that could cause severe damage first.
Remember to validate data before accepting it. Provide cues on what type of data is expected and let them know right away if it is not valid. Improve the experience by helping someone avoid a mistake, rather than helping them to correct one later.
#6 Recognition rather than recall
Minimize the amount of mental work required to accomplish a task by making items, actions, and options visible. People should not have to remember information from one part of an experience or view to another. Guidance should be visible or easily retrievable whenever appropriate by easily scanning.
Example:
- What is the capital of Italy? vs Is Rome the capital of Italy?
- Multiple-choice questions are easier to answer than fill in the blank ones because multiple-choice questions provide more cues to recognize the right answer vs having to recall the answer from memory.
- Icons and color cues can aid in recognition
Provide extra context for people to help them recall information by showing them things they can recognize. Minimize the amount of mental work required to accomplish a task.
Providing cues helps people recognize information rather than recalling it from memory. Give everyone cues to help them. It is always a good idea to test your software with people to get validation or to gain insights where they may be burdened with cognitive overload. Having people show us how they use the software to accomplish a task in an observable setting is critical to maximizing the success of our work with minimizing memory load.
#7 Flexibility and efficiency of use
Provide methods that are flexible and efficient for experts and user-friendly to everyone new to an experience or action.
Examples:
- Accelerators like Command-C to copy and Command-V to paste. For beginners, it might be easier to use the drop-down menu and explore what commands are available but for experienced users, keyboard shortcuts are more efficient.
- Advanced modes for experts vs a wizard for beginners.
Allow people to choose the method for an action that they prefer based on what is quick and comfortable for their process and experience level.
Speed up an interaction for experts and provide useful methods for less experienced people. Do not try to teach everyone all of the accelerators and options all at once, but make certain that experts won’t be slowed down by software built with basic usage in mind.
#8 Aesthetic and minimalist design
Help people to maintain focus on the essential aspects of content and visual design or UI by only showing relevant information. Irrelevant content or visual design elements tend to diminish an experience.
Examples:
- Think of a signup form on a website. If you are distracting the visitor with flashing ads, irrelevant content adjacent to the form, or additional options not related to the task, you are creating noise and distracting visitors from completing the task.
- Graphics and visuals should support the content, goal and purpose of the information or task.
Prioritize the primary needs of the people using the software and the goals of an organization. Communicate, don’t decorate.
Keep it simple. Focus on essentials. Avoid distracting people with unnecessary and irrelevant information. If elements do not support the person’s task or your business goals, consider removing them. This heuristic supports a high signal-to-noise ratio which is critical to a successful interface design, content, and general usability.
#9 Help users recognize, diagnose, and recover from errors
Politely and clearly inform people when an error has occurred. (often communicated both visually and with messaging) Explain what went wrong and how to correct the problem by providing a way to solve the problem right now.
Example:
- We’ve all seen errors where you are given a cryptic code and no relevant context.
- When filling out a form, people sometimes skip a required field and the form will not go through. That is when a simple error message appears to explain and alert them that the entry is required to complete the communication.
Write error messages using plain language (no codes), indicate the problem, and constructively suggest a solution without making people feel unsmart.
Provide error messages that explain what went wrong and what people should do next to correct it. Error messages are an important part of the total experience people undergo when using software. By both identifying all possible errors and creating excellent error messaging for people, we can significantly reduce and minimize frustration levels.
#10 Help and documentation
Sometimes people need help, especially as devices and interfaces are more complex or depending on their level of knowledge.
Examples:
- Popovers
- Tooltips
- Videos
- Chatbots
Provide documentation that is easy to scan and is searchable and do not overload people with unnecessary information.
No one likes being directed to documentation without context. Provide the right help where and when it is needed. Make it easy to search for help, focus the documentation on the person’s task, and list concrete steps needed to carry out tasks. Avoid generic help. For example, if providing a link or tooltip for instructions on how to add a new member – be sure to provide the relevant help vs sending the person to the table of contents for the entire help system.
Pingback: August 28, 2020: My Weekly Roundup of Web Design and Development News
Pingback: Hello world! | Cathi Bosco | Design + Business + Technology = UX Awesome!