UX 101 📲: Nielsen's 10 Usability Heuristic Principles for User Interface Design (6-10)
Tags: uiweekly, ux, webdev, design
Published: 2021-09-16 11:24:00

Hello, everybody! 👋

And welcome to the second 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 this second lesson (together with the first lesson, which you can check out through the table above), we'll be studying  Nielsen's 10 Usability Heuristic Principles for User Interface Design.

In today's lecture we'll be covering __principles 6-10__.

👉🏼 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 (6-10) related post  on Instagram 👇🏼

{% instagram CT2DBEIj451 %}



So, with all this said, let's dive in! 🌊


____
#6. Recognition rather than recall 👆🏼

### 💡 Main idea
Users shouldn't have to memorize lots of information to be able to perform a task within the system. That's why making elements, actions and options visible helps them carry out their goals in an intuitive and approachable way.


### 💎 Main goals
- Reduce the cognitive load and effort on user's side, due to human limited short-term memory.
- Make the interface more intuitive so the user doesn't need to struggle when using the system.
- Accelerate user's learning process.

### 🧠 Memory retrieval

Human memory is organized in __chunks__ (as it is computer memory), which are _activated_ when we need to retrieve the information they store. 

For these chunks to be activated and ready to work, three factors come into play:

- __Practice__: how often the information stored in a chunk has been retrieved. The more you practice something, the more easily you're going to remember it. When a chunk of memory is the first one in being activated, that means that it's the most accessed and practiced through time.

- __Recency__: how recently a chunk has been practiced. This helps enormously to how clearly you're going to remember the information it contains. 

- __Context__: what surrounds the person's focus of attention (stimuli that trigger such retrieval of information, like when you read, hear or see something). The keyword for this factor is ___association___, a very important concept in psychology that is crucial and explains a lot of human mental conditions. 

####Association


Association mainly works as a __connection__ between concepts and ideas, providing a link between past and present experience.

Regarding memory retrieval, this means that when we perceive a stimulus, we're capable of retrieving information from multiple related chunks.

Association varies a lot from individual to individual because it mainly depends on __personal previous experience__

### 👁 Recognition versus recall 
The main difference between these concepts is the amount of ___cues___ that can help memory retrieval when we perceive something.

A _cue_ can be defined as a piece of information that contains _hints_ that sends our brain to retrieve information related to what we're perceiving at that precise moment.

__Recognition is preferred__ because it involves more cues than recall.

####An example

If someone asks you _Who wrote El Quijote?_, you would likely have to think for at least a few seconds to be able to give an answer. __That's recall__. The process involves remembering the name of an author.

On the other hand, if they ask you _Did Miguel de Cervantes write El Quijote?_, you would presumably be able to answer as soon as you're asked. __That's recognition__. You are capable of easily identify the stated fact and answer rapidly.

_____

In our everyday lives __we combine both recognition and recall__ to retrieve information from memory (every second of the day, even though we're not aware of it).

#### 👉🏼 Recall in user interfaces

A very classical example: __a login system__. When a user wants to access their profile or their personal area. Nothing but the website interface itself can provide a _hint_ to make the user remember their username and password (which hardly ever will provide a real hint). 

The user will need to remember their personal credentials, because there aren't _real_ clues in their current context.

#### 👉🏼 Recognition in user interfaces

Another classical example: __a navigation system__. You're shown a few options, you identify which one you want to access and you perform your task. 

### 🖥 How can we prioritize recognition over recall? 
The best we can do __to make users__ ___recognize our system's interface___ when interacting with it is to make interface functions __discoverable__, __visible__ and __easily accessible__.

An application mainly comprises __two components__: the interface (buttons, links, navigation menus, forms...) and the content (the information provided by the system).

The main goal to achieve with this principle is to make both of these components __easy to remember__ and __reduce cognitive overload__ on user's side, as stated up above.


### 🔮 Tips
- Make the information discoverable and affordable for the user so they don't have to remember it.
 
- Always offer help based on user's context and try to target their current needs. Never expect the user to read a long tutorial or documentation to learn how to perform a task or to solve a problem. We'll see a more detailed approach to this down below, in the _10th Principle: Help and documentation_.

- Try to reduce by any means the information the user needs to remember to be able to carry out an action successfully.

### 🤖 Keywords
- Identify
- Recognize
- Remember
- Memory
- Association
- Experience

_____
#7. Flexibility and efficiency of use 🎛

### 💡 Main idea
Users should be provided with different ways to be able to perform tasks within the system, be their expertise level novice or expert.

Shortcuts are a good example of this: they help expert users achieve their goals faster without being an obstacle for less-experienced users.

These _flexible_ ways can be presented in many forms so the users can pick up their _own way_ out of the choices they're provided with.

### 💎 Main goals
- Make the system flexible enough to be fully adapted to every user's expertise level so they can feel confident by being presented with a variety of options when it comes to performing tasks.
- Improve user's reliability on the system.

### 👩‍💻👨‍💻 Different users. Different needs.
When users interact with an interface for the first time, they will presumably need guidance to help them get to know the system environment in order to get familiar with it and be able to achieve their goals. For example, a good idea would be to provide _step-by-step_ tutorials, since they're likely not going to skip them if they really want to learn how to use the system.

On the other hand, experienced users may expect _accelerators_ to perform the same tasks, like __shortcuts__ and __touch gestures__, although they can still use the traditional methods.

It's never recommended to provide interaction methods only for a specific population of users, even though you think you already know their level of expertise. Because __every user is different__ and, accordingly, their needs are.

So the point is 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.

The main goal of providing different ways to do the same thing is to __suit the user's working style__, so they feel confident to use the system _their way_. This also improves their reliability on the system, since they feel like someone _cares about their needs_.

It's recommended to provide a __customizable interface__ when possible, basically to give sort of support users' work habits, even though most users don't bother to customize the system.

Take into mind that if you provide customization, this should be __consistent between sessions__ and not be lost in-between.

### 🔮 Tips
- Provide shortcuts so the experienced users can speed up their task performance.
- Don't use obstructive ways that can limit a specific group of users.
- Try to customize as much as possible all the content and functionality to adapt them to individual group of users.
- Allow customization on user's side so they can select and adapt the system to meet their own needs.

### 🤖 Keywords
- Flexibility
- Shortcuts
- Adaptation
- Expertise
- Accelerators

_____

#8. Aesthetic and minimalist design ✨

### 💡 Main idea
Interfaces shouldn't include information that is unimportant to users, since it may take away visibility of relevant content.

This doesn't mean you're obliged to use a _flat design_. It's more about keeping design __focused__ and __targeted__ to the point.

This principle is closely related to ___Gestalt Principles___. In future lessons of this series, we'll be talking about them and going further into the topic of design of interfaces.

### 💎 Main goals
- Provide a clean, usable interface, focused on users' goals.
- Reduce distracting elements that can constitute an obstacle to them.

### 🔮 Tips
- Regarding visuals, always focus on the basics and don't overload the interface.
- Don't include elements that are not relevant and can become a distraction to the user.
- Focus on users' main goals rather than provide a _fancy_ interface.

### 🤖 Keywords
- Minimalism
- Plain
- Clean
- Focused
- Targeted

____

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

### 💡 Main idea
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.

### 💎 Main goals
- Provide quick response when an error appears.
- Help users accomplish their tasks.
- Provide constructive advice for future interaction.

### 🛑 How error messages should be presented to the user
1. Should be __explicit__ and manifest in a clear way that something went wrong.

2. Should be __human-readable__, so always avoid using technical vocabulary or jargon words and/or codes.

3. Should be __polite__. Never blame the user for errors. Remember that all those mistakes are caused by the designer, never the user, so don't patronize them or make them feel like they did something wrong.

4. Should be __precise__ and __exact__. Always try to go to the point and avoid general error messages like _Fatal error_ or _Something went wrong_, which don't provide extra information and will likely send the user to wonder what they did wrong.

5. Provide __constructive__ advice on what the real problem is. As a very basic example, picture a login system in which there's a form with two fields: _username_ and _password_. Say the user has a typo in the username field, so they receive the following message when trying to log in: _Incorrect password or username. Try again._
Just be clear and tell the user which the username or the password is throwing the error. In this example there's only two fields, but could be way more.

### 💬 How to use plain language to communicate with the user
1. Identify your __potential audience__ to adapt your writing to their needs and expectations. Try to stick to their level of reading, the language they're used to, the concepts they are familiar with and how they expect the information to be presented. 

2. Try __not to use slang__, idioms, acronyms or complicated terms. Complex language is difficult to understand and may sound pretentious to the user. 

3. Keep sentences and paragraphs __short__. You can convey the same ideas with less words.

4. For general audiences, try to write for __6-8th graders__. For experts, don't go beyond 10-12th.


### 🔮 Tips
- Make use of _traditional_ error message _visuals_, like red color, bold typography, alert sounds, etc.
- Communicate errors using a language users understand.
- Provide valid solutions to fix possible issues as soon as they're identified.

### 🤖 Keywords
- Concise
- Precise
- Constructive
- Plain language
- Straight to the point

_____

#10. Help and documentation 🗂

### 💡 Main idea
An optimal system would be that one that doesn't need to provide extra information, but, most times, that's something we can't avoid because __users need clues on how to perform tasks__ so they can reach their goals.

### 💎 Main goals
- Anticipate problems the user may be facing when interacting with the system.

- Provide users with relevant extra information to make them feel comfortable, successful and to improve their reliability.

- Make users succeed when carrying out tasks and meet their expectations.


### 🗄 Types of help: proactive and reactive

#### Proactive help
Proactive help is used to __prevent problems__ and its main goal is __to get the user know__ how the system's interface works. There are two types of _notifications_ that belong to this kind of help:

- __Push revelations__: used to provide help to the user with no regard to the task they're trying to accomplish in that precise moment. They use to appear randomly and out of nowhere containing information that hasn't been asked for.


- __Pull revelations__: used to provide help that is relevant to the task that is being performed by the user. They can appear when the user has initiated a new task or when they're _close_ to face a problem.

It's highly recommended to always __choose pull over push__ revelations when possible.


Take into mind that we will face three types of scenarios when dealing with proactive help provision: 

- New users using the interface for the first time. 
- Novice users that are still learning how to use the system.
- Expert users that encounter an update of the interface (for example, a new design or new functionalities).


#### Reactive help
Resources like documentation, videos, tutorials and guides constitute reactive help, which is useful when a user encounters an issue and needs help to address it. The main goal of this kind of help is to __answer questions__ and __provide a final solution__ to fix a problem. FAQ and technical tutorials are a good example of this kind of help.

Always ensure that the resources you're providing the user with are detailed, understandable and useful. It's recommended to provide _step-by-step_ instructions because the user _needs to fix something_. They don't read documentation just for fun.

Don't stick to only providing one source of information: __complement your writing__ with videos, graphics or any other multimedia resource that you consider that may be useful to help your users.

Structure your information into __categories__ and provide __search__ so users can easily find what they're looking for. 

### 🔮 Tips
- Documentation should be visible, easy to find and, mostly, easy to search.
- Present the required information in context right at the moment when it's needed.
- Provide a list stating the steps that should be followed to accomplish a task or address an issue.

### 🤖 Keywords
- Documentation
- Tutorials
- Troubleshoot
- Searchable
- Help in context

___

And this is all for the second 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 💜

____