How to create useful error pages in three steps

All those unexpected, popped up above our working screen, telling that something important is going on, or blocking what you have been doing. «502 Error», or «Oops, something went wrong», accompanied by a picture that shows a level of creativity, rationality, sense of humor, and the amount of time dedicated to this task in a designer's backlog. They are all cool. And we can make them even cooler: we can make them useful.

Step one: create any page or notification at all

Something went wrong. Sometimes we know, what happened exactly, sometimes we do not, but we need to tell our customer (or a client, or a visitor on the website), that something happened. By «we» I mean a UX-writer, or a copywriter, a designer, or even (it happens) a developer. Who works on an interface.

Create any page at all, it is better than nothing (by nothing I mean just the empty grey screen). The easiest way here is to show the name or number of an error, it is a piece of technical information, that we can share easily. Most likely it will look like a system-human kind of conversation because it needs to be informative, and it often has to fit for as many different situations as possible. There are a lot of different errors, not every one needs its special branded page or notification.

Step two: rewrite it in a human way

Show empathy, personality, give a virtual hug, make a joke to lighten the mood. Remember the day, when your umbrella broke while you were running under the rain? When you came to the store to buy something important, but it was close for no reason? What words from a stranger would help?

Step three: tell a customer what to do

Somebody is sitting right now, staring at the screen with «Not Found» (and that is one of the easy options!), having absolutely no idea what is going wrong. Somebody (anybody!) have to gain experience to handle such situations:

Wow, I see an unknown error, what is it? →
What went wrong? Did I do something wrong? →
What to do now? →
(calling out for help or looking for help on the Internet )→
Now I know what to do in this case in the future

(repeat this iteration when a next error occurs, until a user knows how to deal with all the common errors)

I am sure, that today we are all dealing with too many errors. It is time to take them from our customer's shoulders, to see it not as «They will figure it out», but as «Let's prevent as much of possible stress, as we can». Let's create more safe interfaces. Those questions from above can be easily modified to a check-list for a (truly) useful error page.

1. [What is it?] Identify the problem through words. If you think about it, the number «404» immediately means «Page not found» only for those, who are familiar with error classification. But those are (in most of the cases) a tiny part of your audience. «502», «101» or less common «Code Some Number» is an unnecessary, not-helpful-at-all data.
2. [What went wrong? Did I do something wrong?] Explain what happened in an empathic, human way. Remember, that error often occurs from all of a sudden, they show something unexpected, and this can cause a lot of stress.
3. If you find it necessary, skip steps 1 and 2, proceed to step 4. If the error is too specific, or rare, or can be explained only with the complex term (otherwise it will take more than a three-sentence) — skip it.
4. [What to do now?] Tell a customer what to do. Give an escape plan. Show a safe direction (or even a few!).

Here are some examples.

Make it a routine

Always remember: a page visitor can be very stressed already. So when you thought the page through, you have a chance to impact in a good way. And if not, well, you can make everything even worse.

Be consistent. If you chose «Humor is our way» strategy, create easy-going error pages. If you've run some A/B tests and understood that your customers just love it when you don't simplify things — please keep things complex.

Start an editorial policy. One document, when you gather your experience of writing text, so everybody could at any time check out, how to write text in the context of your company or project. Discuss with the team, which error pages can be handled in which way. In some situations, you just need to give out complicated information. So you will need to rewrite it properly and make sure, that every piece of important meaning is in place. In other situations, you can throw out of the page almost everything to make it clear and simple.

The chapter «Errors pages and how to handle them» will inevitably become a part of the bigger chapter «Brand's tone of voice». Share it with everybody, especially with new colleagues, so that they catch up from the beginning.

Bring team-mates on your side. Find a comrades-in-UX, so to say. Look at the next screenshots, they will make a good example. Today I've come across two different error notifications while working on Google Sites. Here they are:

The error screens look different but the meaning, the action that I needed to take, was just one: reload the browser or reconnect. They show different ways of communication, different tone of voice. To create the first screen, you need to write a catch-phrase, other strings of text will be generated automatically. It fits a lot of different situations (even when the code or error type, differ, the screen will work). To create the second screen, you need to find a proper metaphor (like a cloud with a plug), draw a picture, write a call-to-action. Unless you are two-in-one, a writer, and a designer with a sharp metaphor-oriented mind, you will need somebody else's working time for that. Repeat this iteration for every error to follow the consistency.

You will need to decide, what option suits you, the brand's tone of voice, customers the best. If it is the first screen, you need to convince your team (and/or a boss), that the screen will work better with the catch-phrase. If it is the second screen, you need to convince everybody that this task deserves resources. And it is easier to convince people who already understand you and the importance of your proposals. So bring team-mates on your side.