UX 101 📲: Nielsen's 10 Usability Heuristic Principles for User Interface Design (1-5)
Tags: uiweekly, ux, webdev, design
Published: 2021-08-28 16:59:37

Hello, everybody! 👋

And welcome to the first lecture of the __UX 101 series__ 🙌

In this series, we will be talking about __UX__ and good practices when it comes to __interface design__ and __user interaction__.  

In the first two lessons (this one and the following one), we'll be studying Nielsen's 10 Usability Heuristic Principles for User Interface Design.

In this first lecture we'll cover __the first five principles__.


👉🏼 Before delving into the matter, remember that we're also on [Instagram](https://instagram.com/underscorecode), where you can find daily content about web development, all the related slides to every published article and... quizzes and challenges! 💜

Nielsen's Principles (1-5) related post  on Instagram 👇🏼

{% instagram CTHh--hjqnD %}



So, with all this said, let's dive into today's lesson 🌊

#What are _heuristics_? 

Heuristics are __techniques__ used to improve the usability of a system based on a previous experience. This improvement consists basically on __solving existent problems__ and __identifying the necessities__ of the said system during the iterative design cycle.

Even though this method is far from being perfect or optimal, it __speeds up the process of development__ and provides a way to start solving issues as soon as they are discovered and identified.

Let's now turn our attention to the __first five Nielsen's Principles__ for User Interface Design: 

#1. Visibility of system status 🖥

### 💡 Main idea

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__.

The system status includes:
- Where the user is within the navigation tree.
- Where the user is within a process derived from a taken action.
- If the system is stable and everything is working as it should or something went wrong.

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__), since they know beforehand where they are and what the current system status is.

Another advantage of implementing this principle is the __reliability__ we're going to convey to the user. They will end up __trusting__ not only the product or the service we're trying to _sell_, but also the brand or the individual behind the service (let's say, for example, a _blogger_).

### 💎 Main goals
- Make the system __predictable__ and let the users know that they have the __control__, which, consequently, will send them to think that everything's going to proceed in the way they wish and expect.
The less information they get, the easier it will be that they think that they're not in control of the situation.

- Make the user feeling __comfortable__ while they go through a series of steps towards a goal.

- Create a recurring _client_ (or visitor) and convey trust and reliability looking to the future.

### 🔮 Tips
- Always inform the user on what's going on. Always. No matter what. __Communication__ and __transparency__ are key (like in relationships with people in real world). Let them know the result of their actions and don't leave them wondering if they made a mistake after having taken action over something.

- __Nothing__ that affects the users __should happen without informing__ them beforehand. Let alone something that leads to an error condition or a situation from which they don't know how to recover.

- If you can avoid this type of situations and they happen at some point, tell the user __immediately__. Or, at least, as soon as possible. __Quick response__ results in __early recovery from errors__ and __providing enough information__ leads to __better decisions__.

- Build __trust__ through interacting with your users.

At the end of the day, this principle refers more to __how well you communicate__ with your users than the fact of communicate with them itself.

### 📱 What can we do as UI designers?
A good start would be to implement a series of standard elements that help the user notice the status of the system, like the following:

#### Breadcrumbs
The user should know where they exactly are within the navigation tree at all times.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ij6sxpnwf2cz6vmht4pu.png)

#### Provide feedback of a taken action
For example, by highlighting an element after taking an action on it.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kdd7xk0e49u8wtavao3s.png)

#### Progress bars
Always let the user know where they are within a multi-step process and show progress bars when appropriate.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jge58b3psd5nkhz9bw4z.png)


#### Spinners
Implement spinners to let the user know that they have to wait for an action to complete. Don't leave them wondering what's going on.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8exl658600kuh35l6z4k.png)


### 🤖 Keywords to this principle
+ Communication
+ Transparency
+ Trust
+ Reliability
+ Anticipation
+ Feedback 
+ Information
+ Decisions
+ Predictability
+ Control
+ Comfort

#2. Match between the system and the real world 🖥↔️🌎

### 💡 Main idea

The system should speak the users' language, this is, they have to be capable of easily understand everything they perceive while interacting with the system. 

Human beings find comfort in __familiarity__, so bear in mind that it's fundamental to use concepts and words that the users already know, have an idea of and find easy to understand. That's what we understand by _familiar_.

It's true that every person has a __different understanding and perception__ of the world: some things can be very obvious for you, but not that obvious for, let's say, a friend of yours.

So, since this is something __unavoidable__ (but manageable), it's important to take this fact into mind, and, as a result, base every concept of the system in __real world conventions__. __Never assume that your understanding and your particular interpretation of the world match the ones of your final users__.

These interpretations are formed based on previous experiences, familiarity with language and objects, beliefs, ideas and values, and are called __mental models__. 

Each user has its own mental model and they __carry these interpretations with them__ from the real world to the digital world, so it's our work to ease this transition by expressing concepts appropriately.

Since it's impossible to know what the vision of the world is for every user, the only thing we can do to create a suitable conceptual model for our system is to use __logical statements__ and concepts that are __widely extended within society__. This will result in users making use of the system __intuitively__ and __comfortably__. 

### 💎 Main goals
- Match user's expectations as to their interaction with the system.
- Let them know that you understand their needs and care about them: to show __empathy__ will make them feel important.
- Build __trust__ and set a feeling of __familiarity__ on their side, which will lead to __loyal users__.

### 🔮 Tips

- Make sure your users __understand__ every piece of information they are interacting with and be aware of the importance that this fact has.
Users should always be able to understand the meaning of everything they run into without having to go look it up in a search engine, so __never use jargon or complex words__. Better use __natural language__ and present information in a __natural and intuitive__ order. Everything __should flow naturally__ to facilitate the user the task of proceeding when using the system.

- __Never assume__ the way of making use of the system by an user and how will they behave while interacting with it.

- Do a __research__ on what __kind of user__ will interact with your system to find out what __concepts are familiar__ to them and what __type of language__ you should use, and adapt yours, if necessary.

### 🤖 Keywords to this principle
+ Familiarity
+ Logic
+ Real world
+ Perception
+ Care
+ Empathy
+ Experience
+ Natural

#3. User control and freedom 👩‍💻👨‍💻

### 💡 Main idea
Users make mistakes, so they have to be provided with emergency exits in case they need to escape or recover from wrongly performed actions.

But not only when they proceed in a wrong way: they always have to be __allowed to correct mistakes__ and __change their minds__, especially when they open up a new page, screen or view (usually through clicking a provided link).

A large amount of users still rely on browser's or device's back buttons instead of using the back links provided by the system, so it's important to pay close attention when leading actions towards new tabs since some users can have trouble trying to go back.

### ◽️ Types of _emergency_ exits
- __Back link__: a link that allows the user to go back in a page, screen or view.
- __Cancel link__: a link that allows the user to interrupt the process of an ongoing action.
- __Close link__: a link that allows the user to close an open view (e.g., modals).
- __Undo link__: a link that allows the user to reverse a taken action, which should also be ideally accompanied by its corresponding _redo_ link, to let them know they can change their mind anytime even if they make a mistake in the course of performing an action.

### 💎 Main goals

- Ensure that the user __feels in control__ of the situation when interacting with the system.

- Give users the __freedom to perform actions__ within the system without leaving them wondering and worried about the actions they are performing.

- Make the user __feel comfortable__ enough to __explore the system__ without feeling inhibited, which is a direct consequence of them knowing that they can take actions that can be reversed if they make a mistake.

### 🔮 Tips

- Facilitate the user the task of finding _emergency_ exits on your system, just as it's easy to find their counterparts in public spaces, like a shopping mall.

- Using icons that are __universally recognizable__ by the user can help match their __mental models__ (like using a cross to close a view). You can add a text label to point more clearly where the corresponding action will lead them to.

- Allow the user to __cancel__ an action at __any point__ of the process. This is specially important when it comes to a purchase, a money transfer or a download that can take some time.

- Always support the __undo__ of an action by implementing links, toggles or checkboxes and ensure that they are well placed to be easily discoverable by the user.

### 🤖 Keywords to this principle
- Control
- Freedom
- Exits
- Mistakes
- Exploration
- Cancel
- Go back

#4. Consistency and standards ⌚️

### 💡 Main idea
Users have expectations when interacting with a system, which are based on their previous experiences with another systems.

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._"

So that's important that our system follows already established conventions when it comes to user interaction and interface design, as we mentioned in _Principle 2: Match between the system and the real world_.

Some examples of these conventions are:
- __Underlined__ text means _clickable_.
- A __shopping cart__ / basket icon represents the section where the items you select to buy are stored and from where you will be able to proceed to a checkout process eventually.
- __Red__ means stop / danger and __green__ means go / safe.
- A __magnifier__ icon means _search_.
- While accessing a website or an app on portable devices, an icon representing __three vertically stacked lines__ means that there is a hidden navigation menu.

### ◽️ Internal versus external consistency
- _Internal consistency_ regards __consistency and standards across a product__ or a family of products. 

When it comes to a single app, this means that __consistency should remain throughout the platform__: layout, colors, shapes, typography, visual items treatment...

On the other hand, while facing the design of a family of related products, not only the conventions above should be met but also have to __keep a coherent relation between them all__ when it comes to layout, icons and functionality, to mention a few.

- _External consistency_ refers to __consistency and standards that match the industry__ and / or web conventions.

As an example, note that all well-known _e-Commerce_ sites follow __common standards__ in order to make the purchase experience __consistent and efficient__ to the customer. Otherwise, it would lead to them leaving the _store_ and looking for another one where they understand the steps they need to take towards their goal (the purchase of an arbitrary number of items) and where they feel comfortable with the process.

### ◽️ Layers of consistency

####1. Visual
- Colors, typography, icon design, title decoration, etc should be __consistent across the system__.
- Images should be treated similarly: aspect ratio, borders, size...
- Symbols should be consistent with the __action__ they lead to or the __information__ they're providing: use an icon of a plane for flight search, an icon of a car for car rental, an icon of a cat or a dog when specifying if pets are allowed in an accommodation, a cigarette when pointing out if it's allowed to smoke or not, or a shopping cart to store the items that can be eventually purchased, as mentioned earlier above.

####2. Page layout
- All items related to page layout __should remain consistent and coherent__ across all the pages of the site.
- It doesn't matter where you decide to locate buttons and other layout items, but __do it consistently__: don't place the same button in different places when having different screens among the same process, for example.

####3. User-entered data
- This is especially important when it comes to dates, phone numbers and locations. __Avoid to use an open field__ for this type of data. 
- Provide the user with __date pickers__ or __auto-formatting__ so they don't have to think about how to enter the required information and let them know they don't have to insert separators in any case (so you don't have to split the entered information later on).


####4. Content
- The __consistent tone of voice__ across the site is crucial. Otherwise the user can feel confused, which will result in not meeting their expectations, and consequently, leaving and / or not returning.

- __Don't mix casual tone with formal tone__ and always present the information in a way that is readable and understandable by the majority of the users that access your platform.

### 💎 Main goals
- Meet user's expectations, since they come to use your system with a preconceived idea of how it _should_ work (based on their mental model).
- Build their __confidence__ towards the system.
- Make them __focus entirely on the content__ rather than let them wondering what's the meaning of what they're viewing, reading or listening to.
- Make sure that the user __doesn't have to learn something new__ in order to interact with your system (or at least as less as possible).

### 🔮 Tips
- Always pay attention and implement __both internal and external consistence__, to make sure all the standards and conventions are met.
- Follow __industry and web conventions__ to avoid the user have to learn new things or concepts while interacting with your system.

### 🤖 Keywords to this principle
- Consistency
- Conventions
- Standards
- Expectations
- Interaction
- Confidence
- Focus

#5. Error prevention ❌ → ✅

### 💡 Main idea
Users, as human beings, make errors. You, as an user, make errors. Everybody does. That's something natural. But, even it's something unavoidable, it can also be alleviated by designing a good interface for our system, in these terms.

Although alerting the user with an error message is a good practice, it's even better to design a __non error-prone system__.

### ◽️ Types of errors
There are two types of errors the users can make: __slips__ (minor errors) and __mistakes__ (conscious errors).

- __Slips__: This type of error is often caused by __inattention__ on user's side, like _typos_. They are more often made by experienced users, who use the autopilot when interacting with a system: they feel comfortable and rely their confidence on their previous experience with it, while newbies pay more attention to what they're doing since they're _learning_ how to interact with the system.

- __Mistakes__: These are caused by a __mismatch__ between the user's mental model and the design of the system. They take the correct steps towards their goal but these can be inappropriate for the situation. _Mistakes_ are more difficult to prevent than _slips_.

### ◽️ How to prevent _slips_

1. Always include __helpful constraints__ for user input. For example, regarding a form input field where a range of dates should be entered, always compel the user to select a range where the first date comes before the second date.

2. Offer __suggestions__ as to search, to avoid typos.

3. Choose __according default values__, when needed.

4. Use ___forgiving___ __formatting__. This means that, for some input fields, every user can have a different idea on how to enter data, for example, a phone number. So, from here, we have two options: getting rid of the info the user has entered and which is not needed (parentheses or hyphens, for example) or autocompleting the phone number with these special characters while the user is typing. This latter improves their reliability on the system, since they know that they're performing the task correctly, so it's more appropriated than the first one.

### ◽️ How to prevent _mistakes_

1. __Collect data__. While you're still designing the system, you can gather information about what kind of users are going to use it and do a little research, so you can be aware of what you can expect of their actual __mental models__.
Once you have your system designed, you can run __usability testing__ to know what's wrong with the usage of your system on user's side.

2. Follow __design conventions__, as we've mentioned above, in _Principle #2: Match between the system and the real world_.

3. Communicate __affordances__. This means that the user should be able to know when an __element__ of the interface is __available__ and, consequently, that is interactive and that an action can be taken on it.

4. __Preview results__. Let the user know that the action they're going to take may result in changes at scope level within the system, so they can double-check if they really want to proceed and inform them on what's going on from there.

### ◽️ Good practices to prevent both types of errors
1. Don't make the user have to __remember__ things or keep information about something within the system. Always provide contextual information.

2. Show a __confirmation dialog__ before they take an action that causes changes, like deleting something.

3. Always support __undo__, so the user knows that the changes they would do can be revoked.

4. Let the user know that they will __incur an error__ if they proceed when they're actually doing something that is not allowed. For example, if the user surpasses the number of allowed characters as to a text.


### 💎 Main goals

- __Prevent the majority of mistakes__ a user can make when interacting with our system, rather than waiting for them to perform an action that leads to an error to inform them.

- __Make the user comfortable with the system__ by letting them know that if they make a mistake, they can __undo__ the taken action, so their confidence and reliability on the system grow.

- __Never make the user feel that they're responsible for errors__, because they're not. The designer of the system is (yes, us 😇). So, it's important to use an appropriate language when communicating with the user when an error occurs and improve the design of the system so they make as less of them as possible.

- Help the user __build a good mental model__ of your system's interface.


### 🔮 Tips
- Always __prevent errors__ to occur.
- Avoid ___slips___ by including constraints, good default values and suggestions.
- Support ___undo___ and let the user know they can recover from their errors.
- __Warn__ your users when needed. 

### 🤖 Keywords to this principle
- Error
- Mistake
- Undo
- Prevention
- Revoke
- Confirmation

___

And this is all for the first lecture of the UX 101 series! 

Stay tuned to know more about UX in future episodes of the series.

A big thanks for reading  🤗  and don't hesitate to reach out to me if you have any questions or doubts about today's lecture.

![Rachel Green from Friends TV Show behind a desk saying "Ask me anything"](https://media.giphy.com/media/XFuQ4InwtXBE4DDPHM/giphy.gif)

I hope you found this article useful and I see you all in the next 👋

___

🎉 Don't forget to follow @underscorecode on [Instagram](https://instagram.com/underscorecode) and [Twitter](https://twitter.com/underscorecode) for more daily webdev content: info, challenges, quizzes & more 💜

____