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, 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 👇🏼

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.

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

🎉 Don't forget to follow @underscorecode on Instagram and Twitter for more daily webdev content: info, challenges, quizzes & more 💜