How to turn annoying error messages into awesome ones

If you're investing time and money into a website or branded app, don't overlook the error messages.

I’ve got a little secret to share.

I'm one of those people that talks back to my phone, laptop, or occasionally even my refrigerator. What's more, I'm not very shy about it. I've even been known to admonish some unsuspecting piece of technology out loud in public!

What vexes me most about devices? Their error messages. Sometimes it’s an app or a webpage that doesn’t let me know what went wrong—like when I’m signing in and suddenly find myself looped back to the login screen. Was it the username or the password that was wrong? Why isn’t there anything that tells me which?

On rare occasions I’ll come across a vague phrase like “Invalid input". Gee, Mr. Roboto, thanks for the helpful hint! Other times some alphanumeric code gets puked onscreen and I'll have to fish out its meaning on the internet. Why not just tell me what actually went wrong in language spoken by humans?

Apparently, it's not just me that feels this way. According to web usability experts at the Baymard Institute, their test subjects often spent excessive amounts of time trying to fix errors due to generic error messages. If users are hindered by bad copy, there's sure to be some minus points when it comes to their satisfaction. The underlying message here is this: when you're investing time and money into a website or branded app, don't overlook the error messages.

It goes without saying that you should design your website or app to avoid errors altogether. But that's not always possible (and us users don't always do things according to your grand design anyway). In that case, here are five tips you can use to make your error messages clear, helpful, and less annoying.

1. Write for humans

Avoid machine language at all costs. Some common examples you should avoid are, "invalid input," "syntax error," or "runtime error." Or take this example – not specifically an error message, but a dialog I was once asked to rewrite (names changed):

“FOO is now deprecated, please use the embedded FOO2 instead.”

What is that hot mess of code-speak? All the user needed to know was that the app was no longer available, and that they should use the updated version with a new name, loaded onto their phone in the last update.

“We’re saying goodbye to FOO. For all the features you’re used to and more, use FOO2, found in your app list.”

There—simple, relaxed to match the client’s brand voice, and tells the user how to solve the problem.

2. Help the user

Be clear about what went wrong and how they can fix the problem (or prevent it in future)—and do it concisely. You may have limited space due to small screen sizes, but at least include a short explanation of what happened and a link to troubleshoot the problem, if possible.

3. Fix it first!

Here’s an easy way to be helpful in practice. Error dialogs often consist of a header, body copy, and buttons. Whenever the user can do something to correct the problem, put the fix directly in the header. Use the body copy to briefly describe the problem and why it happened (especially if the why will help avoid the issue in future). Follow up with an instructive button that repeats the fix. Here’s an example:

Header: Restart your phone

Body: Something went wrong while updating this app. Restart your phone and try updating again.

Button 1: Restart

Button 2: Not now (Cancel or Close work too)

Also, don’t use “OK” as the button copy to close an error dialogue. Because it’s not OK for the user that they’ve encountered a problem—it’s irritating! Use “Close” instead.

4. Be polite

This doesn’t mean you have to say please and thank you, or beg forgiveness. Just write the message in a friendly or neutral tone, and don’t blame the user (even when it is our fault).

5. Use your brand voice

Error messages are usually pretty dull. That’s for a reason – so they’re easy to understand and clear. But it’s OK to bring your brand personality into an error message, just so long as you’re careful with the wording. Don’t be so quirky that it gets in the way of the user’s understanding, or so cheeky that it sounds condescending.

Final thoughts

Why make an amazing website or branded app, only to have that experience crumble the moment your users encounter a problem? I hope you find these tips helpful for making your error messages more awesome and less annoying. If you need more error message examples, Microsoft’s Dev Center is a good place to jump to from here.

Now, over to you! What are some of the worst error messages you’ve come across? Got any useful tips for writing error messages? Feel free to share!