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.

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

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.

Author: Netizen

We're an award winning UX research & strategy consulting firm in Asia, aspires to improve experience of the world by empowering everyone to build user-centric products through our innovation tools & approaches. We've been providing expertise to enterprises in Malaysia, Singapore, Hong Kong, China, Taiwan, Thailand, Indonesia, Vietnam & Philippines.