Four Oh Four – The art of designing 404 pages

25/10/2010

What’s all this 404 geek speak?

HTTP 404 Not Found

That means the page you are trying to see is not there. Maybe the page has been deleted or moved. The standard page looks something like this:

“Yuk yuk” we hear you cry. That’s not very useful or appealing to a user. They will not stick around to find the correct page. If that user has come via a link form another website then it’s highly likely they will just leave. Whats the answer? How can we maximise the chances of keeping visitors who come across a 404 on our site? How could we convert them into a sale even?! The solution is to design a bespoke 404 page which fits in with the style and branding of your website. A page which contains useful information, maybe a search box and a few useful links.

You might also wish to add something a little comical to the title of the page to keep your visitor interested. On our 404 page we use the classic line “The page you were looking for has grown legs and run away”!

Some examples of well designed 404 pages

Here are some examples of what other websites are doing and hope you might find some inspiration for your own. Enjoy – and don’t forget to leave a comment…

BBC

The Beeb have a very simple but mildly useful 404 page. It explains whats happened and directs the user to the site index.

Value My Stuff

We love the copy on Value My Stuff’s 404 page. “Oh dear this is awkward” is witty and keeps the user interested in the site. the user is directed to three key areas of the site. Engaging and helpful.

Vimeo

This one is simple and offers up 8 key areas of the site to the user. There is also advertising which is not advisable as you normally want to retain visitors to your site not send them elsewhere. However if you are a site which earns it’s revenue on advertising space like Vimeo it makes sense to sell it on your 404 page as this will be a popular page as time goes on.

Twitter

Straight to the point! “Sorry this page doesn’t exist!” The user is then given a search box – this is a very helpful thing to offer as it encourages the user to try again to seek the page of their desire.

02

Simple and professional. This 404 page lets the user know what’s happened and even gives themes one of the reasons as to why they might be seeing a 404 page. They then give the user some useful links.

Last FM

Slightly witty with “woops, sorry this pages does not exist”. Again they give the user some useful links to keep them on their website.

Mail Chimp

Well what do you expect from the friendly and fun brand image that the guys at Mail Chimp have got going on? A huge monkey asking if you are lost! Just what you need if you hit a 404 page! It really adds to their brand identity and other links are then offered to help the user become found.

We also noticed if you refresh the 404 page a different message comes up – keeps the user continually interested even if they hit a couple of broken links on the trot. He’s a clever monkey that mailchimp.

istockphoto

A comical illustration with the words “Hang in there” is used by istockphoto as their 404 page.They offer a useful link to go back to the last page the user was looking at as well as a link to their home page.

404 Page resources

Ok so now you’ve seen how it’s done do it for yourself! Here are some resources which will help you to create your own custom 404 pages:

Conclusion

So, by collating all the info from the sites above these are the options you might want to consider adding to your site:

  • A witty comment and illustration
  • A search bar
  • Useful Links
  • A link to the previous page the user was looking at
  • A link to your homepage

We hope this post has been interesting and inspirational to you. Please feel free to leave a comment – perhaps you have got a brilliant 404 page which you would like to share?! Maybe send us your own 404 page after you have redesigned it after reading this blog post. Comment away!

Author

Attitude Design

View Attitude's Profile

Attitude Design

One Response to “Four Oh Four – The art of designing 404 pages”

  1. v1nc3nt

    25th October 2010

    And for more amazing 404 error page : http://www.bonjour404.fr

Tell us what you're thinking...

Your Contact Details

Your Comment

Recieve Attitude Mail?

Are You Finished?

Let's Filter Through!

Choose one of our blog categories below

Questions?

Call us on 0845 0700 820
or get in touch using the buttons below

contact details

project planner