Posted by Megan Oldcorn
29 September, 2015

A 404 page is a curious quirk of web design, being the content you create but hope nobody will ever see.

It’s the page that crops up when all else fails, appearing if you come across a broken link, make a spelling mistake in the web address, or happen to pop in during a website’s maintenance. Even though they shouldn’t ideally be viewed, we’ve all been faced with a 404 page at some point.

Because they’re not an intended part of a web user’s journey, many companies don’t pay much attention to them. But not bothering with your 404 could be a big mistake. The standard message visitors see is often a variation of ‘This page cannot be found’. A default response is almost always an unhelpful dead end where the only way out is to press the back button or give up and close your window. Sadly, in this scenario, most users choose the latter.

Creating a good custom 404 page, on the other hand, makes a big difference to your website and its visitors. It needn’t take long to do, but it could have a tangible impact on your marketing.

One of the most important things to bear in mind is that you don’t want to lose the reader. Hitting a 404 error can be a jolt: the online equivalent of turning up at a shop door and finding a ‘closed’ sign. A helpful page with links to other content is vital for keeping them on the site and making their experience positive. It’s the note underneath saying ‘Sorry, this door is stuck – please use the one around the corner.’ Instead of walking away, most will happily wander around to use the other entrance.

We recently took this navigational metaphor and ran with it for a custom error page for our client, Luxury Family Hotels. As a quirky, family friendly brand, a warm but simple solution fits well with who they are.

As this shows, a custom URL is, at the very least, a chance to have some fun with your website. Of course, it still needs to be useful. So if you’re creating one, here’s a quick run-down of what you might like to include:

  1. A brief note explaining there’s been an error. Readers need to see straight away that they’re not where they think they are.
  2. An explanation of why this has happened. The most common reasons are a typo or broken link, but try not to make it sound like you’re blaming the user. ‘Something went wrong’ is a far more neutral statement than ‘You’ve done something wrong.’
  3. A navigation bar. There’s nothing more irritating than an error page that has no options for moving onwards, so keep your main navigational elements to allow people to try somewhere else. It’s important to make it as easy as possible for them to stay on the site – at this point, they’ll be frustrated and tempted to leave.
  4. Links to other pages the user might need. It’s hard to know exactly where they thought they were going, but it’s nice to suggest some places anyway. Your homepage or most popular pages are good options to start with.
  5. Contact information for any enquiries. If you’ve kept your standard page footer, this will probably be included already. Having this means the person can get in touch if they can’t find what they were looking for or can’t be bothered to search for it.

Another useful addition is an indication of your brand personality. The best examples of error pages you’ll find are those that fit perfectly with the tone of the rest of the website. Hitting a problem is jarring enough without reading formal, unfriendly text too. Alternatively, consider adding an image or illustration to make the experience altogether more pleasant.

The Luxury Family Hotels website 404 error page.

Our custom 404 page for Tresco Island does just this, using a bright illustration to distinguish it from the typical ‘black on white’ error notice. The text gets to the point quickly and places blame away from the user. Finally, a clear onward path is indicated by the ‘continue browsing’ link, while keeping the navigation bar at the top of the page provides other options.

The 404 error page on the Tresco Island website, featuring an illustration of people on the beach.
http://www.tresco.co.uk/

Similarly, Cornish Duck’s error page takes a fun and friendly stance by including a humorous picture and ‘Oh, ducky!’ tagline. The statement ‘Let us take you back to the homepage’ is helpful and nurturing, deflating any tension the user might be feeling. And if they’d rather go elsewhere, the top navigational links are still in place.

If you work with a design agency, simply ask them if they have any ideas for how you can do something different. If they’re like us, they’ll most likely jump at the chance to liven up this most elusive of pages.

The 404 error page from the Cornish Duck website, with a picture of some ducks.