A huge part of user experience is ensuring site navigation is as easy as possible, in order to retain anyone who happens to be browsing your site. But what happens if there’s a broken link or a page doesn’t load?
The answer has two scenarios: Either the user will leave, or with a bit
of help, will find their way to the right page. More often than not, in
these situations, it’s the 404 page that will decide the outcome, so how can you maximise their effectiveness?
If a user who’s already in your site lands on a page with a standard 404, they have the option of pressing the back button, so it’s fair to suggest they might not exactly leave the site straightaway. However, if they’ve arrived on a 404 directly from a search engine, you have no chance of retaining the visitor, unless you’re able to direct them onto another page.
In both instance, the default error message is truly horrific and doesn't really help the user, which is something we’ve touched upon in the past, looking at publishers' 404 error pages.
Customising the 404 page of your website to make it more appealing and more helpful is a great way to improve experience and capture users for longer. It’s a no-brainer, but something that’s often overlooked, even by larger web properties who should know better.
Here a few example’s I’ve managed to scavenge from the internet that demonstrate engaging 404 content:
1. Heinz
2. HootSuite
4. GeekSquad
5. Disney
6. Zivity
7. Blog by Bape (404 real-time Tweets)
8. Hulu
10. Dilbert
11. Redtag
12. huwshimi
Recommended reports
Effective Web Design
The Effective Web Design guide has been created to provide you with a steer on all the key aspects of website design, ranging from conception and design, through to subjects such as usability and search engine optimisation. It is intended as a single point of reference covering best practice approaches for all the topics that anyone involved with website design needs.
User Experience Buyer's Guide 2011
An invaluable resource for those investigating the market for user experience agencies, with profiles of 27 suppliers, the latest market trends and tips and pitfalls for buyers. The 263-report covers issues and trends affecting this sector, and contains information about best practice, as well as useful advice for those seeking a suitable supplier.
10:59AM on 8th September 2009
This is one of my favourites (flash-based):
http://www.bluedaniel.com/404
11:21AM on 8th September 2009
A few more great examples
11:25AM on 8th September 2009
Nice one recently seen http://theodin.co.uk/404
11:48AM on 8th September 2009
How about this one:
http://www.383project.com/404
11:48AM on 8th September 2009
How about an A-Team reference: http://www.benpowell.co.uk/404
12:15PM on 8th September 2009
Wow!!These are really an amazing themes.I really like this post.Thanks for sharing such an wonderful post with us.Thanks
1:04PM on 8th September 2009
#2 HootSuite is horrific.
How did even include it?
The symbol for missing/exploited children + "flown the coop"
doesn't even make sense for a website page.
Making light of the 'milk carton campaign' makes you look as ignorant
as Hootsuite. #Fail
1:25PM on 8th September 2009
Great.
Here is another beautiful 404 page: http://www.bluedaniel.com/404
1:30PM on 8th September 2009
Yet another snarky one: http://homestarrunner.com/error
1:43PM on 8th September 2009
This is my favourite
http://econsultancy.com/404
3:05PM on 8th September 2009
Thanks for posting my 404. Its fun to see my work being appreciated. :)
CEO at Econsultancy
3:23PM on 8th September 2009
@Paul Cook
Did you really mean our 404 page? That's fairly dull.
I think you might have been after our 500 error page which has me wiping out on the skiing slopes?
Too many people have seen that given it's a 500 (internal/server error) page! And I can't link to it... ;)
Ashley
3:31PM on 8th September 2009
Say opps up side you head..... say Opps up side your head......
3:45PM on 8th September 2009
Hulu's 404 is much more entertaining than the one you display — it's a video collage of Homer's D'ohs.
Director at Local Search Team
3:45PM on 8th September 2009
From a usability point of view, only the Heinz one is any good.
I really doubt any of the "clever" ones particularly aid the user experience, and some (like Hulu) actually are worse than a default 404.
4:27PM on 8th September 2009
Here's another:
<a href="http://doleaf.com/404">http://doleaf.com/404</a>
VP Operations & Marketing at Celebrus Limited
6:21PM on 8th September 2009
if we are being dull - can I remind you all to make sure your web analytics solution knows about your 404 pages of course Speed-Trap - (being the smart-arsed people we are)- have a 404 report which helps you find how people get into this mess - so you can help the followers - I loved the subway.... VEry cool....
Head of SEO at Unique Digital
8:29PM on 8th September 2009
Wouldn't it be better to submit the right page to the search engine letting them know that one is dead?
Sounds like creative necessity over practicle user experience to me
12:39AM on 9th September 2009
@Ashley Friedlein I have seen the 500 error page, love it and I assume you were not privy to the fact that someone put it online.
There have been some great posts of 404 pages here from both Jake and the commenters but I still think my favourite is "the old" geek squad one, similiar to the one they have now but not quite.
And to @Julian Grainger not all links come from search engines, some come from outside linkage (i.e. bloggers who misspell a link...) not controlled by yourself and therefore a forementioned 404 page used as \ landing page is a great way to keep browsers on your site, hopefully directing them to what they were looking for.
7:04AM on 9th September 2009
When users lands on 404 page we need to amke him browsee through homepage so he will read some blgo posts heinz 404 page is very creative and awesome
7:27AM on 9th September 2009
How about this error page 404 idea
10:06AM on 9th September 2009
brilliant works! lessens the frustration of the surfer and a smile is earned!! cool
10:24AM on 9th September 2009
A correctly setup 404 web page is part of a good web design.
A well optimized 404 web page is important for usability
A 404 web page may be a risk for SEO. It mostly depends why it has been shown.
Owner at s-go Consulting
4:06PM on 9th September 2009
This seems to be one of the last details to attend to with a website client. So much energy put into good design, content and SEO. I was inspired by many of the examples. I believe that every site should have a good custom 404 page, but you must explain to clients why it is important and add it to the cost of the project. While it may be minimal, it is another expense.
5:34PM on 9th September 2009
I disagree with most of your choces - most are pretty lame 404 error pages, and others have a nice idea behind them but not very helpful.
In addition, the error page you provide for Hulu IS NOT an 404 error page - its an internal server error page and not a great one either.
Their 404 error page is much much better (with a Simpsons clip). Example:
http://www.hulu.com/sdgf/jtml
9:37PM on 9th September 2009
yet another nice one: http://www.fax.co.uk/404yet another nice one: http://www.fax.co.uk/404
Internet Business Consultant at i-contact web design
3:31PM on 10th September 2009
While the object of the game is to not have a 404 display in the first place this collection has inspired me to be more thoughtful about creating an interesting look for an error page, so thanks for posting them. It's better that a site visitor sees something like the above than the default 404s everyone's used to so that they'll feel compelled to actually remain on the site instead of going somewhere else.
11:32AM on 17th September 2009
This is an interesting article as it raises the question of "What makes a good error message?" Most of the research in user experience shows that a good error message should:
- Be as specific and precise as possible.
- Speak the user’s language, avoiding technical jargon and error numbers (like '404').
- Give constructive help and indicate how to resolve the issue.
- Be polite.
Reviewing the 404s you have on this page against these criteria shows that many of them are, frankly, rubbish. If you're not a geek, will you really understand what's happened at The North Face ("The 404 Goat is on a Rampage"), the Blog by Babe (with its mindless Twitter feed) or huwshimi ("A ninja stole this page")? On most of these pages, it will take most people a minute or so to realise there's even been an error.
2:07AM on 15th October 2009
Nice collection here my 404 http://www.factormetal.com/404
3:02PM on 20th October 2009
This one was shot... - http://tinyurl.com/yhhyo6m
(on www.ccvision.de)
9:32PM on 26th November 2009
Well, I just stumbled across Blizzard's 'EU' 404. Incidentally, I didn't break nothing. ;)
9:41PM on 9th January 2010
Excellent collection. I must get one of those too :)
9:39PM on 1st February 2011
I love the Geek Squad and Dilbert ones.