Ben Rowe

UX Designer, Thirst Studios

The 4 H’s of Writing Error Messages


Shit happens. Errors, I mean.

They happen on our websites. And they happen in real life. Sometimes it’s because we made a mistake. Or maybe a system failed. Maybe it really was the user’s fault.

Whatever the cause, these errors—and how they are communicated—can have a huge impact on the way someone experiences your website or app. Often overlooked, an ill-constructed error message can fill users with frustration, and send them packing.

A well-crafted error message, on the other hand, can work wonders. It can turn a moment of frustration (abandonment) into a moment of delight (and ideally, conversion).

Every error, regardless of who is to blame, becomes a point of friction for your users. Well-written error messages can help reduce that friction. As UX designers, we like to reduce friction. So let’s get on with it.

Introducing the 4 H’s

So how do we write, or rewrite, our error messages to keep our users on track?

It’s not that difficult, really. We just need to consider the 4 H’s of writing error messages.

Error messages need to be:

  • Human
  • Helpful
  • Humorous
  • Humble

Let’s look at these more closely.

1. Human

The number one rule is to make sure your error messages sound like they’ve been written for humans.

An unhelpful Twitter error message that reads Error: unauthorized

There’s nothing more frustrating than an error like this one. It sounds like it has been written by a robot. For a robot.

Put your customer service hat on—think of your error message as a conversation with your user. Make sure it’s polite, understandable, friendly and jargon-free.

The Firefox error message is a better example.

A Firefox error message that reads: Well, this is embarrassing.

Think about your audience. How would you explain the error to them, in human speak? Write those words down. That’s your error message, right there.

2. Helpful

OK, so your error message is readable. But is it helpful?

The rules to crafting helpful error messages are fairly straightforward. Ask yourself:

  1. Is it visible?

    There’s no point displaying an error message if the user doesn’t even see it. Think about the message  size, colour and location of your error messages. Make them prominent.
      An example of a helpful error message on a text field.
  2. Does it explain clearly what went wrong?

    Your error message needs to explain the problem as clearly as possible. And it needs to be specific. A vague error message that says, “An unexpected system error has occurred” is just lazy programming. It’s of no use to anyone.
    And most importantly ...
     
  3. Does it help the user recover?

    What do they need to do next? How can they get back to what they were doing, as fast as possible?

3. Humorous

A short sprinkling of humour is often a great way to diffuse the frustration of an error. Keeping your tone light-hearted can help to keep the user on-side—especially if this suits the tone of your brand.

There are plenty of great examples of humorous error messages. Here are just some of my favourites:

  • When last.fm goes down, it’s always amusing.
      An error message from last.fm that reads: Holy moly, we just blew a fuse!
  • When you type too many full-stops when creating a new message in GMailAn error message from GMail that reads: A fan of punctuation!
  • My favourite example comes from Yahoo!. Check out what happens when your date of birth is greater than today.
      A comical Yahoo! error message that reads: Are you really from the future?

However, be careful with humour.

It’s not always appropriate to use humour in your error message.

It really depends on the severity of the error—users can take a joke if it’s a simple validation problem, or a Page Not Found error. That’s why funny 404 pages are all the rage.

But if things become more serious—for instance, a user losing a significant amount of work—then saying “Oops!” is entirely inappropriate. If my email program had just lost an hour of my hard work, the last thing I would want to see is a cutesy message from a trouser-less chimp.

4. Humble

Perhaps your user is at fault. Maybe your instructions just weren’t clear enough. You know what? It doesn’t really matter.

What does matter is how you deal with the situation.

It’s always better to assume that your site or app is at fault, not your user. You must never imply that the user made a mistake. Always be humble.

And for those times when the fault is clearly on your side, apologise.

A simple, honest apology from tumblr, shown when an error occurs.

Get down on your knees if you have to. Acknowledge that you made a mistake. Don’t try and defend yourself. Say “Sorry”.

Don’t say, “We’re sorry that this occurred.”
Don’t say, “We apologise for any inconvenience.”
Say, “Sorry.” And mean it.

Users are far more likely to stick with you if you’re brave enough to admit that you screwed up.

In Summary

In an ideal world, we’d have no error messages. Your users would float happily through your site, error free. And then they’d ride home on unicorns. Unfortunately, we don’t live in an ideal world. There will always be errors, and there will always be error messages.

Prevention, of course, is better than cure. It is always best to prevent errors from happening in the first place. But when errors do arise, think about the 4 H’s. And use them to turn that moment of friction into an opportunity for conversion.

Ben Rowe

Ben Rowe is a UX Designer, Marketer and Strategist at Thirst Studios, a close-knit user experience & web design team based in Melbourne.

With a nerd-like passion for all things digital, Ben is fascinated in the intersection of Marketing and UX, and passionate about crafting beautiful and usable experiences.

Comments

comments powered by Disqus

UXmas is a joint effort from the teams at Thirst Studios and UX Mastery.

Sign up for regular emails and notifications about the latest articles...