Error management: help people avoid errors in the first place, see the error, and understand what's happened — and add instructions on how to recover from it.

In this article, we’re going to look at how to help people avoid errors and recover from them.

This might seem like a fairly niche topic, but there's actually a lot to it, and for any application you should actually be paying quite deliberate attention to it.

If you’re more of a listener, I’m including a video with the same content as the article.

The first thing to know is that people will make errors. It’s human nature. It’s not that we’re bad at what we’re doing or that we're not at paying attention. It’s that stuff that happens in our brains that causes us to make errors.

There are 2 kinds of errors to design for: mistakes and slips.

Mistakes are usually errors of knowledge. For example, we might choose the wrong product because we don’t know enough about a product and don’t even know we’ve done the wrong thing.

Mistakes are complex and will happen despite all of our good work.

Slips are where we have the knowledge and know what we should do, but end up taking the wrong action.

This is a photo of 2 tubes I have in my bathroom:

I have to make sure they are not anywhere near each other. Clearly, I know the difference between sunscreen and toothpaste, but when I’m tired, and they are close to each other, and the tubes look similar, well, you know what's going to happen.

It’s slips that we can most easily design for, and what I’ll focus on here.

Avoiding errors

The first part of error management is avoiding it in the first place. This is where all general good design and usability principles fit.

Focus on designing the page in a way that people can easily see the correct actions to take — emphasize correct actions and de-emphasize incorrect ones.

Here’s an example of this. Emphasizing the main action, de-emphasizing the secondary action, and making them look different:

Seeing errors

Once something has gone wrong, you need to make sure people know that it has happened.

You can do this by understanding where the person is looking, and putting the error message right there, or if the error is somewhere where they're not looking, changing the focus of the page to where the error is, and putting the message there.

Also, make sure the error message is easy to spot. You can use color, weight, and iconography to make sure people can see it. But don’t use color alone, as some people won’t see color.

In this case, the user would be looking at the signup button, and the error message should be close enough that they would see it:

But if it was on a really long form, I’d scroll to where the first error is. I can’t tell you how many times I’ve hit a submit button, but nothing has happened, I sit there staring at the screen, and eventually, realize that there is an error in a field that’s completely out of view.

One way of helping people see an error is to validate the field just after they have completed filling it in: where you can check basic things like format and flag an error straight away.

Their eyes are still right there and they'll see it straight away. But don’t do this until they have finished filling in the field and moved out of it. I hate being told my email address is wrong when I haven’t finished typing it. Just let me finish my work before telling me I’ve done it wrong!

Recovering from errors

To help people recover from the error, make sure you explain what went wrong and what to do about it.

The first time I went to this website, the error here said to adjust my browser settings, with no information about what that actually meant. I literally couldn't recover from the error as I didn't know what I was meant to do.

Of course, when I went to take a screenshot of it for the article, they’d updated it and at least included a link to a page of instructions, but those instructions are really confusing — I ended up just using a different browser.

It can sometimes be difficult to explain what might have happened as lots of things can happen, but you still need to be able to do it – otherwise, people can’t recover from the error.

Use plain language, explain the problem, and put the instruction right where the error occurred.

Summary

Whenever you’re designing, always think about the 3 parts of error management, and make sure you design deliberately for each:

1. Help people avoid errors in the first place with good design and good usability principles.
2. Help people see the error by putting the message near where they're looking, or if the error is not where they are looking, moving it to where the error is.
3. Help them understand what's happened and give them good instructions on how to recover from it.