I’ve got a little secret to share.
I sometimes talk back to my laptop or phone – out loud, in public even!
What vexes me most? Error messages. They’re really f**king annoying, aren’t they?
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?
Occasionally I’ll come across a vague phrase like “Syntax error” or some alphanumeric code I have to fish for on the internet to understand. That’s frustrating! Why not just tell me what went wrong, especially on a computer screen where there’s enough space to explain it?
When designing a branded app, don’t overlook your error messages. People only read them when there’s a problem and at that moment they tend to be frustrated – so you’ll already have some minus points when it comes to user satisfaction.
To help you out, here are five tips you can use to make your error messages clear, helpful and less annoying.
1. Write for humans
Don’t leave error messages for your coders to write, unless they also happen to double as fantastic copywriters. When you write text read by humans, you should use human language. Here’s an example of an actual error message I was asked to fix (names changed, of course):
“FOO is now deprecated, please use the embedded FOO+ instead.”
What is that hot mess of code-speak? Most people would need a dictionary to figure out what deprecated means (I’m not afraid to admit that I did). 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 FOO+, 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. Be helpful
Tell the user what went wrong and how they can fix it or prevent it in future – and do it concisely. Sometimes you may have limited space, but at least include a short explanation of what happened and a link to troubleshoot the problem.
3. Fix it first!
Here’s a super easy way to be helpful in practice. Error dialogues generally consist of a header, body copy and buttons. Whenever the user can do something to fix 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 for closing an error dialogue. 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. Just write the message in a friendly or neutral tone, and don’t blame the user.
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.
Why make an amazing branded app, only to have that experience crumble the moment your users encounter a problem? These tips will help you on your way to being more awesome and less annoying when it comes to the inevitability of errors.
Want to learn what makes great UX copy? Check out UX copywriting: small, but mighty text.