How many times have you tried to make a purchase in an online store and finally gave up and left empty-handed because the purchase process was long and tedious, or you tried to look for information but the website itself was not making it easy for you and you decided to look elsewhere. Jakob Nielsen, known as the father of usability, formulated in 1995 the 10 basic principles of usability that we will see below and that are still used today. But first of all, you may be wondering what usability is.
What is usability?
Web usability can be defined as the degree of user-friendliness of a website for the users who browse it. Web usability measures mainly three factors:
- Effectiveness: whether the user achieves what he wants, i.e. whether he has met his objective.
- Efficiency: If it has been accomplished or achieved effortlessly.
- Satisfaction: whether the user is satisfied with the site or, on the contrary, has a negative experience.
Therefore, the main usability keys to optimize a website are:
- Have a clean design with a logical classification that facilitates user navigation.
- Granting control to the user trying not to make it feel lost at any time.
- Synthesizing and avoiding redundancy. If something is not necessary, we can do without it.
- Web adaptable to all types of devices. More and more users are using cell phones and tablets to surf the web.
Thus, working on usability when creating a website or improving it will bring us many advantages such as increasing income and sales, decreasing the bounce rate, increasing the duration of the session, increasing user loyalty and achieving better communication with them. Now that we know what web usability is all about, let's move on to the Nielsen's 10 basic principles of web usability.
Visibility of system status
The user needs to know that they are doing it right. So the system, whether it is a website, an app or any other digital product, needs to always keep the user informed of what is going on and provide a response appropriate as quickly as possible. Therefore, each action performed by the user must generate a perceptible response by the user and in a short time. Some examples or practices of this principle would be:
- Confirmation messages when the user has submitted a form.
- Process bars when uploading or downloading files.
- Change the status of the elements of the website on mouseover or click.
- Breadcrumbs that indicate to the user where he/she is at any given moment.
2. Relationship between the system and the real world
We have to speak the same language as the user and connect with him. Make use of words, phrases and images that the user can easily recognize and that are clear, maintaining a logical and natural order. The user should not be given the opportunity to make a mistake.. For example, the trash can icon to delete files on the computer or items in the shopping cart, the user intuits what it is for. However, if instead of that trash can we put any other icon for that function, we will give rise to the user to make a mistake.
3. User control and freedom
Users are human and sometimes it is normal for them to make mistakes. Therefore, we have to give them the opportunity to be able to undo or repeat a previously performed action. If the user has the facility to be able to go back or repeat a process, this will increase his or her sense of freedom and control of the situation. This is especially important on mobile devices where it is very easy to make a mistake and hit the wrong button. To comply with this principle we must give the user the option to:
- Make and remake.
- Cancel actions in progress.
- Request confirmation from the user for important processes such as final payment on a purchase.
- Allow the user to return to a previous point.
- Make sure the user always knows where he/she is and where he/she can go.
4. Consistency and standards
We have to be coherent and give importance to maintain the same consistency throughout the web, that is to say, maintain the language, colors, navigation, etc.. With the increased use of mobile devices, users have become accustomed to certain symbols that they have assumed as normal, so if we change the meaning of any of these or change the icon for something that already has its established symbol we will only worsen the usability since the user may not understand the new icon. The use of similar elements to perform similar functions will be more predictable, easier and more intuitive to use. What can we do?
- Respect the system's organizational formats and preserve their consistency throughout all the pages of the website.
- Icons and aesthetics must be consistent.
- Instructions should appear in a similar place.
- Vary text size by up to four levels, text intensity by two and use no more than three different fonts.
- No more than four or seven colors should be used on a regular basis. Additional colors should only be used occasionally.
- Maintain the same components and behavior in the different pages of the website.
5. Error prevention
The system must prevent the user from making mistakes before he/she falls into error. What does this mean? It must help the user to see their error before they take action. In the same way it is of utmost importance that if the user makes a mistake the system tries to redirect him immediately without wasting his time since he could get frustrated and abandon the web. A very clear example of this principle would be when completing the shipping address data when making a purchase. If the user has left a mandatory field blank, it will be easier for him to see it if we let him know when he has moved on to the next one than when he has already validated the address, as well as to let him know which field is missing without the user having to search for it.
6. Recognize rather than remember
It will always be better to help the user to recognize than to force him to memorize the different elements and actions in order to achieve his goal. The system should lessen the user's memorization burden by visibly providing the user with the elements and actions. The information should always be visible or easily retrievable when the user needs it. For example, we will be facilitating the user's objectives if in an online store we add the option to save items, so that the next time the user enters the store he will not have to remember the name of the product and search for it again.
7. Flexibility and efficiency of use
The website should be adapted to all types of users. Some functions, such as keyboard shortcuts, will make interaction faster for more advanced users but will not complicate navigation for those with less experience. Therefore, if any user can navigate through our website we will be achieving total flexibility, and if we also include options for more experienced users, we will obtain efficiency since it will take them less time to achieve their goal.
8. Aesthetic and minimalist design
We must omit all those elements that generate "noise", do not provide information, distract the user's attention or reduce its visibility. The idea is to show only those elements that are most relevant and provide information to the user. Therefore, we have to avoid overloading the web designIn order to achieve this, users want to find clean designs that do not take too long to load. To this end:
- Keep only the most important, if it is not important, you don't need to put it.
- Be careful with sizes. Having larger elements will not make them work better.
- Play with the spaces, if you use them properly you can create a clean design.
- Colors are also key, choosing the right one is important to convey the desired feeling.
9. Error diagnosis and correction
Try to make each and every one of the errors that may occur on the web understandable to all users. For it, we will have to use a simple and understandable language for all. communicating errors in a user-friendly manner and providing a solution or alternative to the user. Surely on multiple occasions you have encountered a 404 error, if you are an experienced user you probably know what it is and what the solution is. However, if you are a less experienced user, it would be better if the system informs you that the page you are trying to access does not work, is not found, and therefore the solution is to exit it.
10. Help and documentation
Sometimes the user needs help during the process to achieve his or her goal, so the system should provide relevant information to the user that is easy to find and not too broad. Some examples of this principle could be:
- Guided navigation through the web or application as soon as it is installed or opened, showing the basics and essentials.
- Section of FAQs or frequently asked questions that users may have.
- Online chat, much faster than other options such as e-mail.
- Question mark symbol in options that may require it.
Now that we have seen the simplicity of these principles, we are sure that you will be able to implement them to improve the user experience of your website. In addition to this there are multiple tools on the market that will help you to comply with them or improve certain factors of your website. You can also access the complete training at this link.
EN 
MX