10 usability principles for a good UI Design
Tags: ui, ux, design, webdev
Published: 2022-08-04 04:13:00

For us UI Designers, it's very important to develop interactions that allow the user to have a better experience, so the UI can't be confusing, demanding or cause stress to the visitors.

Therefore, part of our task is to create user journeys that are fluid and intuitive, in such a way that the user doesn't need external help to interact with the product.

In this case to improve as UI Designers, guarantee a good user experience and improve interaction design we will talk about **Jakob Nielsen's 10 heuristics** that **we should always keep in mind.**

---
## Jakob Nielsen's heuristics for interaction design


###1) Visibility of system status 💻
The system has to **inform** the users about the current system status and what is going on at **all times**, by providing them with **appropriate feedback** within a reasonable time.

This principle is necessary to make the the user capable of deciding which their next steps will be, based on what's happening at that particular moment **(anticipation).** An advantage of implementing this principle is that the user will end up **trusting** the product and the brand.

**For example:** Provide **real-time feedback** during new account setup and communicate which password requirements the user has been fulfilled as they types, saving their time, energy, and uncertainty during the process.
![Real-time feedback](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dhf9gltcnhry86vv9og0.png)

###2) Match between system and the real world 🌎
This principle claims that a system should speak the users' language and follow real-world conventions, this is, they have to be capable of **easily understand** everything they perceive while interacting with the system.

This means avoiding use words, phrases, and concepts that aren't familiar to our target audience. We should base every concept of the system in real world conventions that are already part of mental models, that is, the system make sense to the users according to their life experiences.

**For example:** When it comes to using icons and illustrations these resonate with the real world, so users instantly recognize and understand what we're trying to say.
![Icons](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/144ux8fbhg897ksd44vk.png)

###3) User control and freedom 🎮
We should design knowing that the **user can always make a mistake**, so they have to be provided with emergency exits in case they need to escape or recover from wrongly performed actions.

The interactions we build must give users the freedom to decide and take the actions they see fit and always have to be allowed to correct mistakes and change their minds

**For example:** Back links that allows the user to go back in a page, screen or view. An option to undo and redo their actions.
![Example of Google Docs showing undo and redo options](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0h3vqa74lpsjkpo9b27j.png)

###4) Consistency and standards 📌
The users when interact with a product have expectations based in their previous experiences with another products.
So that's important that our system **follows already established conventions** when it comes to user interaction and interface design.

Jakob's Law states:

> "People spend most of their time using products that are not yours, so they expect your product works in the way the others do. Failing to fulfill these expectation may result in user’s cognitive overload and force them to learn something new."

**For example:** When  asking users to input information such as dates, phone numbers, or locations, use the industry standards rather than reinventing the wheel.
![Phone number input](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7eljutlr86vt490ob33k.png)

###5) Error prevention ❗
This principle proposes that a good design should always **prevent problems from occurring.** and in this way we prevent the user from getting frustrated by making mistakes.
When designing, we must **prevent the majority of mistakes** that users can make when interacting with our system, rather than waiting for them to perform an action that leads to an error to inform them, in this way, the users will feel comfortable with the system by letting them know that if they make a mistake, **they can undo the taken action**
**For example:** To prevent the user from getting frustrated if they delete files by mistake, it is essential to create a warning message to confirm the decision before going through.
![Prevent delete files](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/13a32u9810xuqth6veq3.png)
 

###6) Recognition rather than recall 🧠
The Nielsen’s heuristics aim to reduce users’ cognitive load, and this also includes their memory capacity.

Therefore, the users **shouldn't have to memorize lots of information** to be able to perform a task within the system, that's why it’s essential to think of ways to make options, elements and actions visible helps them carry out their goals in an intuitive and approachable way.

**For example:** In a menu of a list of fonts, the user shouldn't remember the style of each one, these styles must always be visible.
![Menu of a list of fonts](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/olw9if8qcralkqusrp4i.png)

###7) Flexibility and efficiency of use 💪
Our designs should be prepared for both experienced and novice users.

We must keep in mind that inexperienced users need more detailed information, so our goal should be to create a **flexible and efficient** system that provides multiple methods to perform the same tasks according to the variety of users who interact with it.

**For example:** Shortcuts are a good example of this, they help expert users achieve their goals faster without being an obstacle for less-experienced users. While the tutorials are very useful for inexperienced users.
![Shortcuts for experienced users](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qa5s7r4qsoxp6xixa78c.png)

###8) Aesthetic and minimalist design ✨
As designers, we never consider aesthetics above functionalities.

The user interfaces that we create must **contain only essential information** since non-relevant information may take away visibility, overwhelm and distract users. This doesn't mean we're obliged to use a flat design. It's more about keeping design **focused** and **targeted** to the point.
![Airbnb minimalistic design](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/couyekjfa1zxax8o6efx.png)

###9) Help users recognize, diagnose, and recover from errors ⛔

**Errors should be presented as clear messages**, always straight to the point and be written in an understandable language, so the user can easily be aware of what's going on. These messages should be focused on the real problem and provide or recommend a possible solution to the issue.

In the next example, the error message is clear and understandable to users.
![Error message](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0qhfan0143c518no6pky.png)
 

###10) Help and documentation 📁
The last of Nielsen’s heuristics concerns documentation that will help users understand how to perform their tasks.

Although all the heuristics listed above are supposed to help users avoid errors and facilitate navigation without assistance, it is still essential to provide further assistance at any time.

In this way, we must deliver **help documentation** that is easy to search and focused on the user's tasks. A good practice is to list the concrete steps that users can take to complete a task successfully.
![Microsoft help decumentation](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/imk4vckpmdta5ecey26h.png)

---
Thank you very much for reading and I hope you found this article useful and I see you in the next post👋