{{ searchResult.published_at | date:'d MMMM yyyy' }}

Loading ...
Loading ...

Enter a search term such as “mobile analytics” or browse our content using the filters above.

No_results

That’s not only a poor Scrabble score but we also couldn’t find any results matching “”.
Check your spelling or try broadening your search.

Logo_distressed

Sorry about this, there is a problem with our search at the moment.
Please try again later.

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

3. The North Face

4. GeekSquad

5. Disney

6. Zivity

7. Blog by Bape (404 real-time Tweets) 

8. Hulu

9. NextWave Performance

10. Dilbert

11. Redtag

12. huwshimi

Jake Hird

Published 8 September, 2009 by Jake Hird

Jake Hird is Econsultancy Australia's Director of Research and Education. Follow him on Twitter and Google+, connect with him on LinkedIn or see what he's keeping an eye on via diigo

126 more posts from this author

Comments (33)

Comment
No-profile-pic
Save or Cancel
Avatar-blank-50x50

Greg

This is one of my favourites (flash-based):

http://www.bluedaniel.com/404

about 7 years ago

Avatar-blank-50x50

Peter

A few more great examples

  1. http://carsonified.com/lorem
  2. http://www.reading-glasses-direct.co.uk/lorem
  3. http://www.alistapart.com/lorem
  4. http://slonky.com/lorem

about 7 years ago

Avatar-blank-50x50

Paul Ashton

Nice one recently seen http://theodin.co.uk/404

about 7 years ago

Avatar-blank-50x50

Jacob Dutton

How about this one:

http://www.383project.com/404

about 7 years ago

Avatar-blank-50x50

SeoNext

Wow!!These are really an amazing themes.I really like this post.Thanks for sharing such an wonderful post with us.Thanks

about 7 years ago

Avatar-blank-50x50

ed

#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

about 7 years ago

Avatar-blank-50x50

mkhelif

Great.

Here is another beautiful 404 page: http://www.bluedaniel.com/404

about 7 years ago

Avatar-blank-50x50

Jill

Yet another snarky one: http://homestarrunner.com/error

about 7 years ago

Avatar-blank-50x50

Alex

Thanks for posting my 404. Its fun to see my work being appreciated. :)

about 7 years ago

Ashley Friedlein

Ashley Friedlein, Founder, Econsultancy & President, Centaur Marketing at Econsultancy, Centaur MarketingStaff

@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

about 7 years ago

Avatar-blank-50x50

Guy

Say opps up side you head..... say Opps up side your head......

about 7 years ago

Avatar-blank-50x50

Ray

Hulu's 404 is much more entertaining than the one you display — it's a video collage of Homer's D'ohs.

about 7 years ago

Avatar-blank-50x50

Pete Mason, Director at Local Search Team

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.

about 7 years ago

Avatar-blank-50x50

Ryan

Here's another:

<a href="http://doleaf.com/404">http://doleaf.com/404</a>

about 7 years ago

Malcolm Duckett

Malcolm Duckett, VP Operations & Marketing at Celebrus Limited

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....

about 7 years ago

Julian Grainger

Julian Grainger, Director of Media Strategy at Unique Digital

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

about 7 years ago

Avatar-blank-50x50

Peter

@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.

about 7 years ago

Avatar-blank-50x50

venkat

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

about 7 years ago

Avatar-blank-50x50

Most Interesting Ideas

How about this error page 404 idea

about 7 years ago

Avatar-blank-50x50

beddemon

brilliant works! lessens the frustration of the surfer and a smile is earned!! cool

about 7 years ago

Avatar-blank-50x50

Andrea Moro

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.

about 7 years ago

Steve  Gorney

Steve Gorney, Owner at s-go Consulting

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.

about 7 years ago

Avatar-blank-50x50

michael

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

about 7 years ago

Avatar-blank-50x50

ellrr

yet another nice one: http://www.fax.co.uk/404yet another nice one: http://www.fax.co.uk/404

about 7 years ago

Fran Jeanes

Fran Jeanes, Internet Business Consultant at i-contact web design

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. 

about 7 years ago

Avatar-blank-50x50

David Travis

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.

about 7 years ago

Avatar-blank-50x50

Nders

Nice collection here my 404 http://www.factormetal.com/404

about 7 years ago

Avatar-blank-50x50

Katja

This one was shot... - http://tinyurl.com/yhhyo6m
(on www.ccvision.de)

about 7 years ago

Avatar-blank-50x50

NickJ

Well, I just stumbled across Blizzard's 'EU' 404. Incidentally, I didn't break nothing. ;)

about 7 years ago

Avatar-blank-50x50

Taras

Excellent collection. I must get one of those too :)

almost 7 years ago

Avatar-blank-50x50

Ben

I love the Geek Squad and Dilbert ones.

almost 6 years ago

Avatar-blank-50x50

James Anderson, Manager at SEOSOPT

These are a hell of good way to describe 404 error. because like normally when u see 404 you get really exhausted and this the coolest way to make that less.

over 3 years ago

Avatar-blank-50x50

Branden S, Founder at The Informr

The Heinz ketchup example is a great one but the URL has changed. You can now see it here: http://www.heinz.com/error.aspx.

Some others that got us inspired: http://lockerz.com/404 (w/ parallax effect), https://www.titleist.com/404 (golfers will sympathize), http://www.eharmony.com/404/ (broke our hearts).

This is what we came up with: http://theinformr.com/404/. What do eConsultancy readers think? Any ideas on how can we improve it?

Thanks for the round-up Jake!

almost 3 years ago

Comment
No-profile-pic
Save or Cancel
Daily_pulse_signup_wide

Enjoying this article?

Get more just like this, delivered to your inbox.

Keep up to date with the latest analysis, inspiration and learning from the Econsultancy blog with our free Daily Pulse newsletter. Each weekday, you ll receive a hand-picked digest of the latest and greatest articles, as well as snippets of new market data, best practice guides and trends research.