How to Make Error Pages Work for You

Follow a few simple guidelines and make visitors stay on your site even if they see the dreaded error page.

Do you happen to see numbers in your nightmares? If these are 403, 404 and 500, I’ve got good news - there’s a cure to these bad dreams. Follow a few simple guidelines and make visitors stay on your site even if they see the dreaded error page.

The numbers of doom

I know the headline sounds a bit dramatic, but I intended to give you an idea of what an average non-tech user feels when clashing into a weird-looking website with a mysterious number in the center, surrounded by incomprehensible geek talk. They probably have no idea what these digits mean and why they appeared.

In simple words, error pages are the ones that display in the case of a website or server error - in consequence, the pages requested can’t be displayed to the visitor.

To the website owner and the dev team behind, it should be important what error type occurred - the most common are:

• 403 - forbidden page, the user has no access to the website,
• 404 - page not found on a server (doesn’t exist/moved/old listing that doesn’t reflect the current site/mistake in the URL),
• 500 - internal error, the server can’t process the request,
• 503 - service unavailable, displayed when a single computer makes too many connections to one server,

and I’m happy (most of) you know what you’re talking about. The question is: do your users know it all? Do they actually need to?

Why you should use custom error pages

The visitors’ knowledge on page errors (and error pages) depends on the business and your website audience, but if you ask them if they are familiar with the subject, in most cases you’ll be left with a huge screaming NO.

And what if I’m not the application owner?

Good to know. What do I do now?

When you think about it from a different angle, error page display can be a classic case of turning failure into success - if you treat it as yet another landing page that could bring you new leads. However, that’s a rather tricky one - how do you convert a user who has just found out that your website doesn’t work properly?

Making your error page user-friendly

The first thing to transform an error page from a haunted house into a lovable place is to answer a question most businesses should ask far more often: what does my visitor need when bumping into an error page? What would actually help him/her jump to a place he/she was looking for? The next questions are the ones you probably ask yourself too often, but this time you are justified: what do I want the visitor to do on my website? What do I want to show him/her? What do I want him/her to see in the first place?

Beginning with the message to display on your error page is a good start. Determine the information you want the visitor to know, considering the actual function of an error page. Explain what could have happened:

• there is a mistake in the URL address,
• the page requested is unavailable,
• the servers are not working properly.

The message copy depends on the number of error pages you decide to use (is there a separate page for each error or a universal one?), but remember to stay clear, comprehensible and never EVER suggest that it might be the user’s fault to see the error page (even though it may be true, nobody likes to feel stupid or guilty).

In too many cases, getting out of the geek speak box helps a lot. Of course, there are exceptions to every rule, depending on your website visitors’ profile...

This 404 page by CSS Tricks is a contradiction to almost everything you’ll read in this post, but I had to show it to you - as an example of user-centered content done the right way.

… but let’s get back to the business. We’ll leave the fun stuff (yes, there is some!) for the next parts.

The elements of a perfect error page

Since you know how to speak to your audience, let’s outline what exactly you want to say and show them. The basic rule is to leave a sort of emergency exit to the visitors and not let them get stuck in an error page trap. For this purpose, you can use several content options:

• a returning link to the previous page/main page/site map,
• a search box,
• links to the most popular content,
• a button with a call-to-action.

You may use a combination of these, but keep in mind that your error page should require minimum navigation. Since the user must be pretty lost after getting there, making him/her even more confused is not a path to follow. Choose the most appropriate copy according to your knowledge and the website content.

A returning link to the previous page - or the home page - is probably the most obvious solution, but common doesn’t mean perfect. It gets you back to the place you’ve been before and leaves you there wondering what’s a different step to take if you were not happy with the one you’ve just made and ended up nowhere.

Platinum Games have it all covered - if you’re not happy with a link to the previous page, you can play Bayonetta to set your inner geek free.

This is the point where other solutions come in handy. For example, if there are pages most of your visitors open (it doesn’t have to be the main page!), navigating to this particular place is an idea worth considering.

Titleist navigates customers to the most popular gear categories, all with a golf-ish sense of humour in the background (yep, these guys are looking for a ball!).

Another version of this strategy would be including a button with a call-to-action leading the visitor to your most impressive or desired content. In fact, this is what we went for.

We’re proud of what we do and we know what you’re looking for - in case you got lost, click the button and see the portfolio!

If your website stores a large amount of data, then it calls for a search box. Since most of Internet users google things they look for all the time, this will be perfectly natural for them to type the desired findings.

Not sure why Twitter dismissed Fail Whale, but at least they put a search box instead.

Error pages to look up to

I’ve already shown you a few awesome error page designs focusing on particular elements, but there’s more I would like you to see. These examples put together the what and the how, and their patterns are certainly worth following.

Let’s start with something neat and simple. This page by Nielsen Norman Group seems a little serious compared to the ones I mentioned in the sections above, but it provides you with a useful combination of the most popular content links, home page link and a search box.

Here’s an attention-grabbing idea from iContact: an upside-down menu display to show that something went wrong. Smart, funny and including all the necessary links - the perfect all-in-one!

Cute is the new black - or so it seems, looking at the 404 page by ModCloth.com. The pattern to follow lies in buttons with strong calls-to-action linking to the most popular shop categories.

Never enough of British humour, especially on The Telegraph page. Nice move - connecting users to Twitter account for real-time updates. Why haven’t others thought of that?

Lego’s error page contains the minimum of what you may expect from a user friendly 404 - ultra short copy and a home page button - but the design was just too sweet to ignore it.

Freezing Freddie welcomes you to the MailChimp page oblivion. Search is an easy way out, just as directing the user to navigation buttons above the message. Email marketers certainly won’t get lost!

GitHub also relies on a search box to get their visitors out from the website dead end, together with links to support and status pages (with a dedicated Twitter profile). Kudos for a Star Wars reference - geeks for geeks at its best!

Last but not least… Tech tips!

Enough said about the content and copy of a perfect error page, there are also a few technical points to consider when creating one:

• should I include a notification box for them to let me know?
• how do I know when my users receive an error page?
• how do I make sure that the users see my custom website instead of the browser’s default version?

The answer to the first question lies in a simple analogy. Imagine you are a customer who finds out that the product you have recently bought is faulty. When you get to the shop and make a complaint, asking: “Did you know there were defects in the products you sell?”, the shop assistant answers: “No, we didn’t. Can you show us where they are?”. You show the defects and the assistant replies: “Thank you, we have no procedure of checking our products’ quality, so we rely on customers to tell us.” How do you feel about this reply?

This is exactly the same as if you asked your user to notify you about the error page, even worse if you want them to do something more engaging than clicking a button, e.g. fill a form. It is your job to know whether your whole page is working properly or not, not your visitors’. Luckily, this problem has a relatively simple solution. As Jeff Atwood states on Coding Horror, setting up automatic notifications about the error page display will do the trick for both you and the users (we use Rollbar for that). This also answers the second question from the previous paragraph - you are able to react instantly after you receive an emergency update.

Once you know all this, it’s time to have a critical look over your error page and… take action! How do you feel about it now? Do you use the practices described? Or maybe you have other tips worth sharing? Let us know in a comment!

Error pages done right are just a drop in the ocean of a perfectly crafted website. Check if you're not making the common design and dev mistakes on yours!