21.11.2018 at 15:34
How to use Nielsen's heuristics to improve the usability of your site
Jacob Nielsen is one of the founders of Nielsen Norman Group, and the acknowledged expert in usability. In 1990, he formulated 10 heuristics – the general rules that any user interface must meet for efficient and comfortable work. Despite the fact that almost three decades have passed, these recommendations are still relevant in various areas, including the development of sites.
Nielsen's heuristics were compiled without regard to sites or other specific interfaces: the original article operates with a broader concept of "system". However, almost all the rules can be successfully applied to modern web resources, helping to make them more convenient and intuitive for users.
Most often, experts use Nielsen’s rules as a checklist for auditing sites. However, this doesn’t mean that you will not be able to use heuristics to optimize your site if you are not a specialist. Of course, an expert will be able to discover more details because of his experience. However, if you do not have enough funds to order site audit, but you still want to improve the site, then it is quite possible to check it by yourself. Let’s understand how to apply each of the heuristics to the analysis of the site.
1. Visibility of system status
The system should always provide the user with current information about its status and correctly respond to interactions in a reasonable time.
What do you need to check? Make sure that users always receive notifications about the results of their actions and about what to do next. The user should not be alone with himself. This is especially important when it comes to financial transactions, such as shopping in an online store.
If the user did something, for example, sent a message, made an order or left contact info, but did not receive any response, he may panic: is everything right? Was I mistaken somewhere when entering, or a problem is with the site or the store does not work at all?
Make sure that the site notifies you of its status, for example: «Your message has been sent! We will answer you soon"; "The order has been sent! Our manager will call you in the next 10 minutes and clarify the details of the purchase».
Another example of a successful status indicator is a message about uploading a file to Google Drive:
2. Match between system and the real world
The system must communicate with the user in a language he understands, in commonly used words instead of special terms. Information must be presented in a natural and logical order.
What do you need to check? For you, as the owner of the site and business, constantly working in this area, everything on the pages may seem simple and understandable. However, try to look at the site through the eyes of a stranger: will everything be clear to him at the first reading? If not, try rehashing the text, avoiding terms and complex structures.
In some cases, it is useful to accompany texts with intuitive images, icons, and symbols. A good example is the Facebook menu: an icon that helps the user understand what it means accompanies each item:
3. User control and freedom
Users often choose some functions by mistake. It is necessary to provide them with an «emergency exit» – an obvious opportunity to cancel the action committed by mistake.
What do you need to check? When working with the site, erroneous actions are almost inevitable, and users should always receive the opportunity to make everything as it was.
- Does the site have a commenting form? Make sure that there is also the possibility to edit the comment or delete it.
- Does the user fill out the order form, where he may accidentally provide an incorrect address or telephone number? Add a «Back» button that will allow you to fix everything without re-entering the rest of the data.
- Does the site have profile deletion feature? Provide an opportunity to restore the account during some time, if the user changed his mind, etc.
Example of editing function for post on a forum
4. Consistency and standards
Do not confuse the user describing the same things in different words. Elements of the system must comply with a general standard.
What do you need to check? Moving from one page of your site to another, the user must see common elements and understand that he is on the same resource and everything works the same way as before.
- If the "Cart" button on the main page has the form of a shopping cart and is on the right, then you should not replace it with a basket icon on other pages and move it to the left.
- The link to the section called "Our Services" should not suddenly turn into a "List of Works" when switching to another page.
- Design of all pages should also be similar: have common colors, fonts, etc.
5. Error prevention
Minimize the number of conditions in which errors can appear. If necessary, display warning messages about possible errors to the user.
What do you need to check? Even the most thoughtful error messages will not be as effective as the information that will allow you to avoid these errors. Tell the user all the necessary information that will prevent him from doing the wrong actions.
- If English letters and numbers are allowed in the username, but Cyrillic and punctuation marks are not allowed, then write about this next to the form field or in the tooltip.
- If phone number must be written starting with +380, then show these characters directly in the default input field, or add a sample number correctly written next to the field.
- If you need to enter an address, it will be rational to make a choice of a country and city in the format of a list: this way the user will not make a mistake in these names.
An example of good tips to avoid registration errors:
6. Recognition rather than recall
Minimize the amount of information that the user must keep in mind moving from one part of the system to another. The necessary data should be visible all the time while the user interacts with the interface.
What do you need to check? It is better to duplicate important information for the user, for example, a brief information about the options for delivery of goods on different pages: in the product card itself, on the order page. Thus, the user does not have to go to a separate page «Payment and Delivery» to find out how he can receive the goods.
Similarly, when making an order, it is worthwhile to show the user a list of goods or services that he orders. In this case, he will easily notice if something is missing or something was added to the cart by mistake.
Another interesting example is the choice of font when editing text: it will be much more convenient if the items in the drop-down menu are displayed in the correct font, as in Microsoft Word, but not just contain its name.
In addition, you should use forms and symbols that are already familiar to most users. It is not necessary to "reinvent the wheel" by creating the buttons "Cart" or "Download." Here is an example of an unsuccessful login function – the button is very similar to the site logo and not immediately noticeable:
7. Flexibility and efficiency of use
You should not overload the experienced users with unnecessary information. It is better to give them the opportunity to perform repetitive actions easier and faster.
What do you need to check? Most users are well aware of the work of such popular functions on sites like ordering a callback, adding a product to the cart or to a wish list. You should not overload such interface elements with superfluous accompanying text; for those users who still have questions, you can put the information in the help section.
If you see that users have to perform some routine regular actions (for example, monthly payments), then add the ability to simplify them. For example, you can offer to create a template for a payment that will store all the necessary information, or even automate payment by setting a schedule.
8. Aesthetic and minimalist design
Texts should not contain unnecessary and outdated information. Each unnecessary sentence distracts the user's attention from what is important.
What do you need to check? Read the texts on the site. In most cases, they can be shortened without losing meaning, especially if your site is not an informational, but a commercial one. Leave only the information that is relevant and important for the user.
The same applies to design elements: do not clutter up the site with unnecessary buttons, banners, etc., if you understand that they remain unused and do not carry value for visitors.
It is especially important to check the forms: a huge number of required fields simply discourages a client who was almost ready to make an order. Remove or at least combine those fields that are not critical for processing the order.
Example of overloaded registration form
9. Help users recognize, diagnose, and recover from errors
Error messages should be written in a language understandable to the user, clearly state the essence of the problem and suggest solutions to it.
What do you need to check? No matter how you optimize the site interface, it’s still not possible to completely avoid errors. Make sure that if the user encounters an error, he will receive a concise and understandable message about why the problem and how to solve it. First, this concerns the 404 error pages or empty search results («nothing was found by your query»). Such pages should provide recommendations, what to do next. For example, suggest alternative options for search queries or links to pages that may be interesting for the visitor. Otherwise, he will simply leave the site.
10. Help and documentation
Although it is better when the system can be used without documentation, but in the process of working with it, such documentation may be still needed. Help should be easy to search for information and not too large.
What do you need to check?The most popular format of help information on modern websites are pop-up hints, which I already mentioned in paragraph 5. However, sometimes a separate help section is necessary. It is important not to overload it with information, as well as to make available links to it so the user can easily be acquainted with all the necessary information.
If your site contains some specific and non-obvious functions, you can create a learning scenario and offer to pass it to new users in order to discover the capabilities of the resource.
Thus, Nielsen's heuristics will be very useful for testing and improving usability at any stage of project development: both for completely new sites and for portals that have been around for a long time.
It is important to remember: the Nielsen's rules are based on experience, rather than exact calculations and research; they are mostly subjective. Heuristics are not a panacea for the site, and following them not always brings a noticeable and strong effect.
Do not be afraid of experimenting: check whether the changes are beneficial, roll back the unsuccessful ones and introduce new ones. If you see that improving the site by yourself is no longer possible, you can always contact a specialist. I will be glad to help you to conduct a qualified usability audit!