Error Prevention In UX Design: How Gmail, Google Chrome And Facebook Get It Right

In User Experience (UX) design, the smallest details could make the biggest difference. Let’s discuss how you can utilise the principle of error prevention to create a good user experience.

Error Prevention in Your UX Design

One of the 10 Usability Heuristics proposed by Jakob Nielsen  – Error prevention, is how the system protects users against making errors, it is designed in a way that would make it hard for the user to commit the error.

“Even better than good error messages is a careful design which prevents a problem from occurring in the first place.

Either eliminate error-prone conditions or check for them and present users with confirmation option before they commit to the action. “

Source: 10 Usability Heuristics for User Interface Design by Jakob Nielsen

Error prevention doesn’t just involve alerting the user when an error has been made, but more importantly, makes it easier for the user to complete their intended task without making a mistake.

Why is error prevention vital?

Because we’re humans! And we make mistakes.

Especially in this day and age where there are constant distractions and information overload, the chances of making mistakes are even higher. We don’t always read and see everything on the screen, and there’s always a chance of typos.

Types of user errors

There are two types of user errors:

• Slips take place when users want to perform a particular task but end up doing another task. Slips usually occur when users are on ‘autopilot mode’ or when they are distracted from being able to fully pay attention to the task at hand. For example, typing the letter ‘o’ instead of ‘i’. 
• Mistakes happen when goals are not suitable for the task. Even though all the right steps to complete the goal are taken, the end result of these steps is an error. Mistakes can be said to be conscious error and often occur when users have incorrect or incomplete information with regards to the task. This results in a mental model that is different from how an interface actually works.

Scenario 1: Forgetting attachments in emails

Remember those good ol’ days, writing a really impressive email, perhaps when you’re responding to a potential employer. Your email is flourished with intelligence, highlighting your abilities and boasting of your capabilities, you give it a quick once over and hit send.

To your utter dismay, the second you hit the send button, you are filled with dread and the realisation that you’ve forgotten to attach your CV! You even made multiple references to your CV in the email, here you are left with a few options:

1. Email them again, admitting you had forgotten to attach your CV (and attach it this time!).
2. Hope that the email was so persuasive that they email you back asking for the CV.
3. Give up and look elsewhere.

Well, there is another option: preventing it from happening in the first place. Fact is, we make mistakes like this, more often than we admit to. And it’s okay to make mistakes, but instead of making your users feel confused or even disappointed, error prevention can be put in place.

Good UX Design Case Study: Gmail

Gmail was launched on the 1st of April 2004, and many thought it was a joke.

This was the time when Google was well known as a search engine and the leaders of email were Hotmail and Yahoo. Google released a press statement of Gmail: “a free search-based webmail service with a storage capacity of up to eight billion bits of information, the equivalent of 500,000 pages of email. Per user.” (source: Google Gets the Message, Launches Gmail)

The co-founder of Google, Sergey Brin said: “If a Google user has a problem with email, well, so do we, and while developing Gmail was a bit more complicated than we anticipated, we’re pleased to be able to offer it to the user who asked for it.”

Gmail was designed for their users, and they have continually improved Gmail with their users’ best interest in mind.

Gmail has a nifty error prevention feature put in place for humans like us who forget to attach things. In the situation above, Gmail would alert you before sending out the email:

How this works: Gmail recognises the word “attached” in the email, and realises that the user tried to hit send without anything attached.

It prompts them with this alert to bring it to their attention, not only does the user feel more secure and confident in the system, but it has saved them in making an error, an embarrassing error at that!

Scenario 2: Wrong username or is it wrong password?

Unless you have super memory or the same username and password for everything, you may be familiar with this scenario. You’re trying to login and you just can’t! You’re trying out all the different passwords you usually use, but it just won’t let you pass.

If Gandalf says you can’t pass, you know that you have no other choice. Now, we’re humans and we don’t like admitting to being forgetful.

We also don’t like having to go through the lengthy process of setting a new password, or brainstorm a NEW password that isn’t “password123”.

It doesn’t help either that the error feedback (if any) given to us are:

• An unknown error has occurred. Please try again
• Cannot sign in
• Please enter a correct username and password
• Incorrect username or password

It doesn’t help much, does it? Is it a wrong username or is it a wrong password? Is it an error on the website, or is the server down?

There are actually two ways of solving this, one of which prevents the error from happening in the first place, and the other to efficiently help you understand why you can’t login and then effectively help you login.

Good UX Design Case Study: Google Chrome

Google Chrome is typically known as the only reason you open Internet Explorer: to download Google Chrome. It has a useful feature where it detects and can help to save passwords for different sites as long as you’re logged into Google Chrome.

Once it’s been saved, whenever you try to login, Google Chrome asks you for authorisation to populate the login details. Once you have authorised it, you’re able to login! Error prevention success.

However, we tend to be sceptical when it comes to security, many of us will opt not to allow Google Chrome to save such sensitive information and that is okay, better safe than sorry, right? Well, here comes the second solution.

Good UX Design Case Study: Facebook

Facebook’s login feature actually tells us why we’re not able to login into our account, it caters to every possible error:

Error 1: Forgotten username

When the username is incorrect, the error message given makes it clear that the email address or phone number entered doesn’t match any account. This way you know for certain that there’s an issue with that specific field, it even provides a follow up action button for users to sign up for an account in case a new user has gotten lost and tried to login instead of sign up.

Error 2: Forgotten password

This makes it clear that the username you have entered is correct, it even displays your name and provides an action button in case it’s inaccurate. The error message given to users makes it clear that the password is incorrect, providing a follow up for users to click if they have indeed forgotten their password.

Error 3: Old password

Facebook’s error prevention goes as far as to let users that they have entered an old password, prompting users to better understand why their password isn’t working.

How do you handle errors in UX?

While we try to prevent errors from occuring, errors do happen, and when they do, here are some ways to improve the users’ experience of error messages:

• Show the user where the error occurred
• Practice inline validation
• Be polite and do not blame the user
• Be precise. Describe the issue clearly as well as provide instructions on how to solve the error
• Reduce the work needed to fix the problem as much as possible. 

How do you display error messages in UX? 

Here are some tips on how to write error messages that provide a pleasant experience for the user:

• Be clear. Use simple language so that the user is able to understand the issues. Ambiguous error messages result in users being unable to fix the problem and as such, a poor user experience. For example, ‘your username and password do not match’ vs ‘you cannot login to this application’.
• Keep it short and meaningful. A concise message is more meaningful for the user compared to a long story with unnecessary information. Be as specific as possible. 
• Avoid jargon. Users are most likely not interested in the technical details of the issue. Using jargon can be confusing.
• Be humble. Convey issues with grace and do your best not to blame users for their actions. Inform users about their mistakes in a good way. For example, ‘Please enter your name’ vs ‘You didn’t enter a name’. 
• Provide direction and appropriate actions. Users usually want to fix the problem as quickly as possible. Helpful error messages should contain sufficient information for the user to get out of the problem.
• Avoid uppercase text. Having all your words in capital letters makes it hard to read and also gives a ‘shouting’ impact. 

Key Takeaways

We’re humans, and we make mistakes. Error prevention is key in implementing a good UX strategy, this is done by:

• Preventing human errors by anticipating these errors and putting measures in place to prevent these errors in the first place.
• When errors occur, offer an accurate error feedback message and respective suggestions in resolving these errors.
• Use design patterns that communicate to users, encourage users to double-check, provide a warning or a prompt before mistakes are made.
• Error prevention lowers the rate of user errors, improving the usability and it helps your users feel better when mistakes inevitably happen.

When your designs are conscientious, you are one step ahead of your users in helping them out, giving them a sense of empathy and making their lives a little easier. That is one of the keys to delivering a good user experience.

To ensure a seamless user experience, it’s crucial to implement error prevention techniques in UX design. If you’re looking for professional UX design services, consider partnering with Netizen Experience – a leading UI/UX design agency in Malaysia, to optimize your website or application for usability and customer satisfaction.