wordcamp / 30 creative website error pages for when it all goes wrong

30 creative website error pages for when it all goes wrong

13 / July, 2015 Andy Thorne

In 1996, before the days of the covered centre court, at a rain soaked Wimbledon, Cliff Richard performed to the crowd in an effort to keep the entertainment going.

It turns out that Cliff Richard’s technique worked and the crowd stuck around. Why? Because Cliff made the best of a bad situation and rather than being disappointed with the crowd, he took advantage of a bad situation and entertained everybody.

In continuing our Wimbledon theme for the month of July, here at Factory Pattern we have been taking a look at how you recover from a setback and make the best from a bad situation with your website, to ensure your valued users stick around or keep coming back.

When something goes wrong, it is vital that users are kept in the loop to ensure they do not leave. Technical messages full of numbers won’t help them, nor will it entertain them.

What has happened should be communicated in plain English. Imagine if you had to explain the error to someone face-to-face, I expect you would get a very confused and silent response if you just said the word’s “404 error”.

Error messages do not have to be dull or techy. Take the opportunity to make fun of the situation or if all else fails just blame the robots (that’s what Google does).

The following examples show how to both deliver your error message in plain English and how to entertain users when something goes wrong.

30 Great Examples of error or 404 pages

Foxrate

Foxrate have used a tongue in cheek approach to creating their 404 page. A simple design to make users smile. With the slogan ‘Oops, no Fox found.’ on the Foxrate site sits below an image of a brown dog, a friendly joke to warm the smiles of users who are unable to access the site currently.

ACM Interiors

ACM Interiors have got creative with their 404 page. ‘Oops! something’s missing’, ironic, we know. There are many elements missing from this interior design site including all content as we are left with an empty room. Clever work ACM!

Umbro

This is a top 404 for those football fanatics out there, using a 4-0-4 formation to illustrate why the website is down. ‘Let them make the mistakes to cover up the fact that you probably shouldn’t have under-manned your team in the first place.’ Umbro have named and shamed themselves for allowing their site to go down in a humorous way.

Angry Birds

Of course Angry Birds created a miniature game to play if you were to ever fall onto their 404 page. One way to keep users entertained and distracted from their original goals of searching for your site, provide entertainment and fun at all times. Well done Angry Birds.

West Midlands National Express Buses

West Midlands National Express have made is very clear to us that we have ‘missed our stop’ (not landed on the page we intended). National express have asked users to report the dead link so this can be removed to stop more user ‘missing their stop’.

Emoxie

Emoxie have created a simple yet classic 404 message. The Macaulay Culkin reaction is exactly how all of us users feel when we land on the 404 page. Good work Emoxie, a laughter well needed.

Omega

The watch brand OMEGA have taken full advantage of George Clooney’s new watch range with them. Being greeted by George Clooney isn’t so bad when hearing about bad news, or in this case the 404 page. A timeless message.

Golf Porcelaine

Not quite a hole in one for Golf Porcelaine. A topical page to land on, the brand haven’t included an explanation to their 404 however, the images speaks for itself. Simple, clear and well executed.

Heinz

Just like the disappointment of reaching the end of the Tomato Ketchup bottle, Heinz understand this pain is felt the same when landing on a 404. It’s great to see Heinz have supplied various different links to help guide you onto a more relevant page. Leaving users unguided can lead to a higher bounce rate.

Hot Dot Production

Dot Hot Production have produced a Dot Hot 404! The company have turned their name into a visual 404 message, lateral thinking can bring genius idea. Dot Hot Production have guided the users out of the broken page with a series of links. Great work!

Bluegg

We all remember the classic 2012 Goat meme that broke the internet with its various complications made by the general public. Bluegg jumped on the trend with their 404 page. This screaming Goat brings laughter, with an additional link back to the homepage, users have been guided out of the broken page.

Lego

“uh oh’ – When you’re as famous as Lego, their 404 error of course has to be visualised with Lego men. A simple illustration to inform users they have landed on a broken page. With distressed characters in the background, we know this is a page with issues.

Magnt

Magnt have comprised a venn diagram, accurately illustrating to us what 404 means. Something broken + Not being able to type = 404 Page. A very accurate explanation for this digital software company, clever and guided with a link out of the broken page.

GitHub

GitHub got straight to the point with their simple 404 illustration. ‘This is not the web page you are looking for.’ With the completely random design, we are fully understood that this is not the page users intended to land on.

CSS Ninjas

CSS Ninjas never miss a trick, their 404 inevitably included a Ninja, or as they call him ‘Shinobi’. We all know what word has been replaced with ‘Shinobi’. A simple friendly design that has been executed well.