You probably know that ergonomic criteria are fundamental during a website audit. At Capian, we strongly believe in the use of excellent methodology and adherence to scientific standards. That's why the inclusion of renowned criteria in our application was a priority during its development. We also believe that anyone interested, even remotely, in UX should familiarize themselves with the various sets of criteria.
By joining the "Capian Academy" community, you will have access to a free course where you'll learn everything there is to know about Nielsen's 10 principles for usability heuristics. As you may already know, Jakob Nielsen's principles consist of a set of general rules you can use when conducting a usability evaluation of a website.
In this free course, you will learn all about Nielsen’s 10 usability principles. You can expect workable and thorough information; we hope you will be able to use this information daily as we go, and apply it to any project you are currently working on.
Since we’ll be covering the criteria one by one, you can apply Nielsen’s heuristics as we go. Whether you’re looking to improve a specific website, mobile app, game, or your own work methods, each will allow you to focus on specific information and yield more effective changes.
Aside from housing 4 different sets of usability heuristics - including Nielsen’s - Capian is an all-in-one usability review tool designed to increase the efficiency and accuracy of usability audits.
If our processes are anything similar, you’ll know how draining it can be to take a screenshot, edit it in Photoshop, import the edit into Word for annotations, create a report etc. Not very user friendly!
When we started getting more work as freelance UX auditors, we realized we could save time and earn more with a streamlined process.
Out of that came Capian - we created a web browser extension that puts all the steps of an audit into one program. While on a site, we can click the browser extension to take a screenshot of an aspect of the site and, all in the extension without leaving the web page, and then edit, annotate, add recommendations, and share the audit report.
And in the spirit of Nielsen’s 7th rule, "Recognition rather than Recall", (more on that later!) you don’t have to try and remember the criteria you’re using to assess a site since the built-in heuristics are always shown for reference. You can also create your own criteria set or edit the ones we’ve included to better suite your needs.
Signup for a free Capian trial now!
Sign up!I’d like to personally welcome you to the Capian Community. Capian is not just a UX software, but an all-in-one UX resource for any professional working in and around the field of usability. As a one stop-shop, Capian comes with a multitude of classic heuristic criteria, screen capture function, as well as annotation, editing, and sharing.
All that aside, various sets of ergonomic criteria really are the heart and soul of an audit. Using them is a way to steer clear of subjectivity and put a definitive end to trial and error. By taking advantage of the science of usability, we are able to make small, calculated changes to websites, mobile apps, and more resulting in big payoff.
Because this information is so essential, we’ve put together course to focus on each of the 10 principles from Jakob Nielsen:
As a specialist of human-computer interaction (HCI) Nielsen is one of the most influential figures in the field of usability and user experience. His work is based on the idea of making a website as simple and minimalist as possible to ease its usability for users. His 10 principles were thought in that regard.
You can expect workable and thorough information. While the irony of usability criteria being inaccessible doesn’t escape us (thanks to scientific jargon), we think everyone deserves accessible renditions of this material.
Nielsen describes his first rule, "Visibility of System Status," as follows:
The system should always keep users informed about what is going on, through appropriate feedback within a reasonable time.
Without using specific words, "Visibility of System Status" means that a system* (i.e., a website, a mobile application, etc.) is more user-friendly when you can identify what you can do on the site (its status).
Knowing a site's purpose allows the user to know what to expect from the experience, which betters his understanding of what functionalities might be offered.
Visible control and visible information are therefore key - you should be able to easily understand what actions can be performed on a site’s interface. As stated, if the user can more accurately set his expectations for a particular system through knowing his status, he will be set up to successfully interpret the visible information to meet his needs. Tactile, or visible, feedback is essential to complying with this heuristic criterion. For example, if the user clicks a site’s link, a color change and/or a sound should accompany the action so said user knows his effort is recognized and completed. Don’t be afraid to be transparent: Let users know where they are in a site by leaving breadcrumbs, when an action is in progress, and how long navigation will take.
It’s important to note that making information too visible does not help users, however, but overwhelms them. While users should be made aware of the number of options and outcomes available to them, strategically using navigation to guide users (and only showing them what is relevant to a specific page or piece of information) helps them to focus and provides the users a more comfortable usability experience.
Here are two examples you can try at home with the sites you use the most to see if they comply with Nielsen's first criterion:
First, we'll use the YouTube website:
Next, let's take an example with a tool that many professionals use, Google Drive:
The above examples give you an insight into the first heuristic. If the two tools mentioned above did not have these options, confusion would be felt among users and their usage would be less straightforward.
Do not take system status visibility for granted! Ensure your target user has specific expectations of the experience provided, and these expectations are fulfilled to be sure of the success of this visibility.
Below is a two-minute YouTube video that explains the first heuristic in a graphical and simplified manner.
NNGroup, July 26, 2019, Usability Heuristic 1: Visibility of System Status:
*Throughout this course, we will refer to systems as websites, but please note that this information can apply to any type of interface.
Have you used Nielsen's first heuristic covered in the first course to make adjustments to your site or application?
This second heuristic is about the match between the system and the real world and is described as follows: "The system should speak the user's language, with words, phrases, and concepts familiar to the user, rather than system-oriented terms. Follow real-world conventions by presenting information in a natural and logical order."
Nielsen originally coined this heuristic as "Speak the User's Language" and that's precisely what it boils down to.
Although each domain has its own technical vocabulary, it is advisable to translate concepts into everyday language to make them accessible to users. It is important to consider what a potential customer expects when entering a website, what kind of wording will accompany a particular product or experience.
However, this system in relation to the real world must be applied contextually. Someone trying to buy a new computer online would expect to see technical specifications in the product description.
Take, for example, our own tool (Capian). The digital world is a new world for some, making it difficult to enter due to the large number of new terms to learn; the world of user experience is no exception to this rule.
Even though our clients are specialists or experts in UX/UI who master their domain of expertise and are therefore very familiar with the terms we use, some of the terms we use may seem daunting. This is why we try to use generic terms so that anyone wishing to use Capian can be catered to.
As you can see in the screenshot below, no term seems complicated or even incomprehensible. We use generic terms that everyone can understand.
The terms you use must be relevant; you must speak the user's language and adapt to the user's way of working and thinking to comply with this heuristic.
Speaking the user's language can also mean reflecting the form of information as it is normally used. If credit cards display expiration dates in numeric form, an e-commerce site that requests this information by month name is in violation of Nielsen's second heuristic (i.e., January instead of 01). The "January" option is neither technical nor incorrect, but it does not reflect the actual application of this information as found on credit cards.
Organizations expanding into new territories must also be mindful of their language use! Cultural and dialectical differences mean that expressions and words that seem normal in American culture may not necessarily work in British culture, for example. Do not assume that speaking the same language as your client translates to effective communication with them.
Our next lesson will cover Nielsen's third use: User control and freedom. In the meantime, question your systems and ensure that the language used truly reflects that of the customer. Is this a topic you have already addressed for your site?
Below is a two-minute YouTube video that explains the second heuristic in a graphical and simplified manner.
NNGroup, August 9, 2019, Usability Heuristic 2: Match Between the System and the Real World:
So far, we've covered the importance of transparency as well as speaking the user's language. If you've already put these first lessons into practice, your site's users should be more aware of what they're doing on a site and better understand the vocabulary used to describe the products or services on your site.
User control and freedom are explained by Jakob Nielsen as follows:
"Users often choose system functions by mistake and will need a 'clearly marked emergency exit' to leave the undesirable state without having to go through an extended dialogue."
We can define this heuristic simply as an "exit" or a "back button" for the user. Nielsen himself used to call this rule "Provide Clearly Marked Exits," which clarifies its objective.
When using Word or any other software in the Office suite, the interface provides an endless "undo" button that allows the user to go back to as many actions as they've used to revert to the document's initial state. Office software doesn't have a "Are you sure?" dialog box to confirm the "Undo" function, encouraging the use of this function in fewer steps.
Not only is the ability to undo actions on a site or software important, but you're also giving your users a freedom of action that is significant for their comfort.
We've all been on a website where a video or background sound starts playing and startles us suddenly: two problems are raised here. Firstly, it prevents the user from exercising their free will to reject or accept the previous video, and secondly, it goes against the Nielsen principle we are studying. Instead, use engaging marketing to encourage website visitors to click on interactive content!
By applying Nielsen's first heuristic at the same time, users will also be aware of their position on the site at all times and will know where the exit is and/or where they can click to exit that video.
Nowadays, access to an "undo" or "back" button is a given - it's important to remember that these features must be deliberately implemented to offer your customers a seamless user experience.
Are some actions on your interfaces permanent? Can your customers quickly undo unwanted actions or go back to a previous step?
In the next course, we will address the issue of "consistency and standards."
Below is a two-minute YouTube video that explains the third heuristic in a graphical and simplified manner.
NNGroup, August 23, 2019, Usability Heuristic 3: User Control & Freedom:
Jakob Nielsen, now a close acquaintance, explains that his fourth rule, Consistency and Standards, means:
"Users should not have to wonder whether different words, situations, or actions mean the same thing. Follow platform conventions."
While innovation fuels progress and generates new technologies, we must ensure that the systems implemented on our websites are consistent. In other words, the same action should have the same effect across any interface; "control/cmd + C" should always copy, a right-click should always reveal additional actions to take, and so on.
Most websites and programs place their menu bar at the top of the screen. Deviating from this - for example, a vertical menu - would confuse users and go against the industry standard of consistent menu placement.
Once again, do not hinder innovation, but learn to integrate it into your interface within the bounds of certain industry usability standards. Progress is pointless if it prevents customers from successfully using your site.
This concept can and should also be applied to wording. A page titled "Photos," for example, should not be called "Images" or "Photographs" elsewhere on the site - ensure that the terminology used is consistent.
Always ensure that the consistency of your systems aligns with well-known and recognized usability standards.
Below is a two-minute YouTube video that explains the fourth heuristic in a graphical and simplified manner.
NNGroup, September 6, 2019, Usability Heuristic 4: Consistency and Standards:
This criterion might seem confusing, but it's fairly easy to grasp right from the start: Nielsen describes this criterion as follows:
"Error messages should be expressed in plain language (no codes), precisely indicate the problem, and suggest a constructive solution."
In an ideal world, error messages wouldn't exist, of course, because everything would work perfectly! Since that's unfortunately not the case, we must ensure that when errors occur, we rectify the problem quickly and inform the user in a straightforward manner.
Error messages should inform the user and help them take action, avoiding technical terms and including information construction.
The error message should also be specific. A login error message that could read "Login Failed" does not indicate if the email is mistyped, if the password is not up to date, if the email is not registered, if the password was incorrect, etc. Users need error messages that guide them to a solution (assuming the error is user-made).
Example: "We don't have account information for this Facebook profile. Please try logging in with your email/Google account, etc."
Google corrects a user's typographical error by suggesting search terms with different spellings that yield more results. Although this isn't what one might consider a traditional error message in a popup, Google attempts to remedy the user's error while making them aware of it.
404 Error pages are a classic example of an error message that does not adhere to Nielsen's rule. The number 404 gives no indication of the actual cause of the error and provides no constructive information to help the user remedy the issue. Your 404 error page should clearly indicate where the error is and why the user shouldn't be on that page. The error should be stated, and the page should show the path for the user to easily exit that page.
To delve a bit deeper in this course, here's a top 5 of the most commonly encountered errors regarding consistency and standards:
Remember: error messages should not only show that something is wrong but use constructive language to help the user remedy the problem and continue using your site effectively!
Below is a two-minute YouTube video that explains the fifth heuristic in a graphical and simplified manner.
NNGroup, September 13, 2019, Usability Heuristic 5: Error Prevention:
Our sixth usability heuristic is "error prevention." Nielsen describes it as follows:
"Even better than good error messages is a careful design that prevents a problem from occurring in the first place. Either eliminate error-prone conditions or check for them and present users with a confirmation option before they commit to the action."
While errors are inevitable, we can strive to proactively address potential design or coding issues to eliminate predictable blunders.
Error prevention is ubiquitous around us to the point that we often overlook it. How many times has your email sending software reminded you that the subject of your email is missing or that there is no attachment where there should be?
Google's search engine excels at this. It predicts what the user is going to type to steer them towards the result with the most responses.
Your website should guide users along an error-free path (while allowing them as much autonomy as possible, of course).
Food expiration dates work in this manner: users - or consumers, in this case - might very well open an expired item. But the printed expiration dates provide us with information that helps us avoid making the mistake in the first place. Guiding users away from errors helps avoid having to mitigate the damage later (see lesson 9 for more details).
Never assume that your user will inherently avoid making mistakes or that they will know how to do something correctly the first (or second, or third!) time. Use transparency, real-world language, and system consistency to guide your users towards success.
Dana Chisnell tells us: You want your users to fall in love with your creations? Fall in love with your users.
Your strategy should be customer-centric, making the customer's journey as simple and intuitive as possible.
Every interface has its own unique goals to achieve; make sure your error prevention is designed for your specific system and your particular objectives.
Below is a two-minute YouTube video that explains the sixth heuristic in a graphical and simplified manner.
NNGroup, May 3, 2019, Usability Heuristic 6: Recognition vs. Recall in User Interfaces:
We now delve into the seventh criterion, titled "Recognition rather than recall." This criterion is defined as follows:
"Minimize the user's mental load by making objects, actions, and options visible. The user should not have to remember information from one part of the dialogue to another. The system's instructions for use should be visible or easily accessible whenever needed."
This translates to reducing the cognitive load required for using a website.
Users should be able to recognize what they can and should do on a site rather than remember how to use your interface based on cues. We all know how to open and close a door, yet public space doors are still labeled "push," "pull," or "automatic" to lighten the user's cognitive framework and precisely indicate how to use that door.
During online purchases, it's recognition over recall that dictates we don't need to memorize or write down product numbers for e-commerce; all important information is presented on each screen.
Using visual aids is another effective way to comply with this usability rule. For example, text editors previewing different fonts in the font menu so you don't have to remember what the one you want to select looks like.
Accompany your users to the fullest, assist them throughout their navigation experiences on your website: Clickable links should be labeled as such - do not rely on people having to remember what a clickable object looks like to perform that action.
Below is a two-minute YouTube video that explains the seventh heuristic in a graphical and simplified manner.
NNGroup, August 16, 2019, Usability Heuristic 7: Flexibility and Efficiency of Use:
Let's now discuss the 8th guideline by Nielsen: "Flexibility and Efficiency of Use". According to the great guru himself, this heuristic means:
"Accelerators, unseen by the novice user, may often speed up the interaction for the expert user so that the system can cater to both inexperienced and experienced users."
We've all learned that "cntrl/cmd + c" copies information and by pressing "v" with the control/command key, you paste the same data. For Nielsen, the ability to perform common actions faster and with fewer steps means that interfaces can cater to different levels of complexity for users. While a novice might prefer to locate the "copy" action in the file menu, a more experienced user can bypass menu access with keyboard shortcuts.
Capian, being built from scratch, found the time saved through system accelerators, or shortcuts, invaluable. As shortcuts can be customized with many interfaces, even more obscure tasks were made swift thanks to this heuristic.
An aspect of flexibility for this criterion refers to a system's ability to adapt to user variability and correct it. When entering a phone number in a form, a system should ideally recognize all the following variants as valid: (123)456-7891, 123-456-7891, 1234567891, 123.456.7891, etc.
And while you can specify a certain phone number format as an error prevention method, the prevalence of different ways to convey the same information as with phone numbers is more about the system's flexibility than requiring the user to adapt their system to yours.
Sometimes, flexibility and efficiency of use don't mean your user has to decide which computer keys to press to skip menu navigation. Amazon's "One-Click" feature is a good example of a shortcut integrated into the interface. Shortcuts can be visible to all users, not just a hidden method available to those in the know.
What common actions on your website or interface could be simplified through accelerators? How could your more advanced users benefit from shortcuts?
Below is a two-minute YouTube video that explains the eighth heuristic in a graphical and simplified manner.
NNGroup, September 20, 2019, Usability Heuristic 8: Aesthetic and Minimalist Design:
So far, we have covered the aspects built by the system or, in other words, the substance of the issue. Now, let's step back and address the problem as a whole: the overall design of the site.
Nielsen calls this 9th rule "Aesthetic and Minimalist Design". For him, this means:
"Dialogues should not contain information that 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."
Everything on your site should be present for a specific reason. Since users' attention is limited, every square inch of your interface should have a positive effect on the user and bring them closer to your business goals.
Good graphic design can have a huge impact on your site (alongside quality content, of course!). Current trends are increasingly leaning towards minimalism. Users don't want to have to search for the information they need in visually cluttered web pages.
Try to design your site hierarchically, placing the most important content at the top of a page, with more detailed information below. Don't try to cram every detail into a corner of your interface, but rather allow users to scroll or navigate to other pages of the site if they need additional information about a product or service.
Don't forget about icons and other navigation features when checking your site for aesthetic and minimalist design. Icons use the least amount of detail possible to convey a clear concept. Similarly, consider the visual and linguistic elements of your site as such - how much can you declutter without losing meaning?
A different minimalist design can also apply to different types of interfaces. The small screens of mobile phones require many more paired-down controls. Combine a responsive design with this minimalist perspective for optimal results.
What "units of information" can you remove from your site in the name of minimalism without affecting the message your user needs to receive?
Below is a two-minute YouTube video that explains the ninth heuristic in a graphical and simplified manner.
NNGroup, September 27, 2019, Usability Heuristic 9: Help Users Recognize, Diagnose and Recover from Error:
The final guideline - but certainly not the least - provided by Nielsen is "Help and Documentation":
"Although 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, task-focused, list concrete steps to be carried out, and not be too voluminous."
It's easy to create a "Help" or "FAQ" page and place it on a site. However, Nielsen challenges us to integrate help throughout an interface to make usability easier.
Don't get me wrong, an FAQ page can address many usability issues and greatly assist users. But make sure your users can interact with "help" at any time without having to leave the page they are on and go to the FAQ page.
It's important to note that your FAQ page should be flexible to recognize different terms and should avoid complex words, using generic terms that everyone understands; someone looking for how to "insert" a table or chart in a document might search for "add a table," for example.
Like all aspects, all sites and all users may not need to access this help; it should be hidden but easily accessible. Think of Microsoft's famous help paperclip. If you need it, it's there! If you've got it all figured out, it doesn't interfere with your workflow.
As the majority of users are visual learners, your help will be much more effective if you use videos or demonstrations to instruct people. And since people tend to consult help pages after becoming frustrated, write with this customer in mind! Relieve the tension of the situation and help them resolve the situation easily.
You can also leverage user testing to see where users need additional information to achieve your site's goals.
It has been a pleasure working together on these 10 criteria. A concise list of Nielsen's usability heuristics with descriptions is available in Capian for future reference!
Learning never stops, and usability is not static - stay in touch with us if you have any questions about these criteria or to share your successes! We would love to hear from you.
Below is a two-minute YouTube video that explains the tenth heuristic in a graphical and simplified manner.
NNGroup, September 27, 2019, Usability Heuristic 10: Help & Documentation:
Congratulations once again for completing this Capian course on Jakob Nielsen's 10 usability characteristics! We hope you've been able to think about your website in different ways and have challenged yourself and your team to use these scientifically grounded criteria to make your interface more usable.
It can be challenging to grasp the extent of the changes you've made to your site from the first criterion, after taking small steps to reach the end.
That's why we challenge you to take screenshots of your new site. Compare them with the screenshots you took on the first day when we started. Share the before and after with us on social media using #CapianChallenge - we'd love to see the impact of the course on your site!