Four Oh Four - The art of designing 404 pages
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"!
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...
The Beeb have a very simple but mildly useful 404 page. It explains whats happened and directs the user to the site index.
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.
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.
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.
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.
Slightly witty with "woops, sorry this pages does not exist". Again they give the user some useful links to keep them on their website.
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.
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.
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:
So, by collating all the info from the sites above these are the options you might want to consider adding to your site:
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!