Creating User Friendly 404 Pages

March 16, 2007

We understand what 404 means: Page Not Found. But the average internet user has no idea what 404 means or what to do about it. To them, it's yet another unintelligible error message from the computer. Most 404 pages are unvarnished geek-speak. Consider the default 404 page under IIS:

default 404 page from Microsoft Internet Information Server (IIS) webserver

The default 404 page under Apache is no better:

default 404 from Apache webserver

Internet Explorer tries to shield the user from these poorly constructed 404 pages by automatically substituting friendlier error messages:

Friendly 404 page from Internet Explorer 7

It's not bad. It's certainly an improvement over the default 404 from Apache or IIS. But we can do better.

We can stop relying on the default behavior of our webservers and web browsers, and create our own custom 404 page. Unfortunately, many sites have custom 404 pages that are barely discernable from the generic webserver defaults. You wonder why they bother.

custom 404 page from Google

So, what exactly should a user-friendly custom 404 page do? Although there's an entire website dedicated to documenting funny 404 pages, funny isn't necessarily helpful. What can we do to help the user at this point? I have some ideas.

  1. Drop the 404

    Yes, the HTTP response code is 404, but there's absolutely no reason that ever needs to be shown on the actual page. Error codes aren't helpful. A simple explanation of the problem in plain English is all that's required. Any 404 page that has the characters "404" on it, if not already an outright failure, is already well on its way to becoming one.

  2. Automatically notify you of the 404

    Repeat after me: it is not the user's job to inform you about problems with your website. If you require the user to click a button to notify you about a 404, or if you require the user to fill out a broken link form, you have utterly failed your users. 404 notification should be automatic, and by that I do not mean "sit in my log files until I eventually have time to look for it". I suggest weekly or monthly 404 rollup reports, emailed automatically to the powers that be. I'd also recommend real-time email notification if there is a sudden spate of 404s, so you have an opportunity to fix the problem while it's still relevant-- before the world gives up on your seemingly nonexistent page.

  3. Try to find what the user was looking for and provide links to possible matches

    Don't just put a search box on the 404 page and force the user to perform a search. That's a cop-out. Instead, automatically perform a search on their behalf, using the erroneous URL as the search input, and display those results on the 404 page. You can also try to correct the URL, based on rules derived from the top ten or top fifty observed 404 errors. Does the URL end in .htm instead of .html? Is it spelled wrong? Are your URLs case-sensitive? Was the page moved, renamed, or reorganized somewhere else? It's sensible to have a search box on your 404 page for convenience's sake, but forcing the user to perform a search should always be the method of last resort.

  4. Present links to the most popular or most recent items

    If someone is visiting your website, statistically speaking, there's a good chance they are coming to see the same attraction everyone else is. Even if they aren't, your popular content is popular for a reason. Why not present links to your "greatest hits" on the 404 page? Similarly, if you run a periodic website like a blog, or a newspaper, display the last few articles or entries on the 404 page. And at the very least, you'll want a link back to the main website. Provide a filtered list of relevant links, and an errant user will never be more than one click away from escaping their current predicament.

  5. Keep the 404 page simple

    Your 404 page should be brief, concise, and to the point.* You're already dealing with confused users who can't find what they're looking for. Don't add insult to injury by spamming the user with a giant, complicated 404 page containing a complete sitemap of your website. For example, the apple.com 404 page makes this mistake.

I found that Jakob Nielsen, A List Apart, and 404 Research Lab also had good advice on making 404 pages potentially user friendly instead of the geeky, incomprehensible dead end signs they usually are.

Dead End sign

Unfortunately, I haven't had time to implement a better 404 page on my own website. Yet. If you're looking for live examples of 404 pages that get this right, I can recommend the 1976 design 404 page, as well as the useit.com 404 page. Sadly, this is an extremely short list because so few websites meet the criteria I outlined above. I sampled 404 pages from dozens of websites and most fail spectacularly, serving up 404 pages that are downright user hostile.

Whichever route you choose, never settle for the default 404 page. Replace it with a custom 404 page that is polite, illuminating, and most of all, helpful.

* But not too brief. You have to make your customized 404 page larger than 512 bytes, otherwise IE will assume it's a standard web server 404 message and replace it with its own friendly-ized version.

Posted by Jeff Atwood
133 Comments

Great suggestions.

Is anyone taking steps to prevent the error pages from being indexed by the search engines for any reason?

Wouldn't it be a bad idea for these pages to show up in the search results?

Jim Spencer on August 9, 2007 9:12 AM

Great roundup of more artistic 404 pages:

http://www.smashingmagazine.com/2007/08/17/404-error-pages-reloaded/

Jeff Atwood on August 27, 2007 9:10 AM

Here's another one: http://www.66mobile.com/404.shtml

Mark on February 21, 2008 7:50 AM

Hello

James on April 1, 2008 2:26 AM

The 404 is universal. Doesn't matter if the error page is in Uzbekistanese, because the error code is what matters and what the users are familiar with.

If you don't include the error code, you have to translate the message to every language there is to be really user-friendly. With it, you don't need any words at all because everyone knows what it means and if they don't, they'll start to wonder what it means and ask.

Jan on April 2, 2008 5:55 AM

Great article. I really like the 1976 404 page. When I have the time, I will model mine after that. The other wasn't very good--the formatting just didn't work for me.

Anyway, thanks for the article--very helpful,
Richard

Richard on April 28, 2008 7:07 AM

Thanks

Gazebo on May 6, 2008 5:36 AM

Great tips

Julio Cortazar, Jr. on May 30, 2008 3:02 AM

I mostly agree, but beg to differ on not having the number 404 on the page at all. I think by the now the meaning of '404' has sunk pretty deeply into at least portions of our society, and a fair number of people will be confused and distracted to have to read halfway through an explanation before they suddenly realise oh - it's a 404!.

Of course, the 404 should coexist with a plain language explanation for our mums and dads.

Steve Taylor on July 24, 2008 5:29 AM

Very useful information. I am creating my own.

Anh Wu on September 13, 2008 9:38 AM

Why it still Internal Server Error ? i already make .htaccess

masarip on November 21, 2008 10:25 AM

LOL!

F'in show me a helpful 404 page. I dare you.

I know I’m late (but my blog is only 3 months old)...

http://www.eroticachallenge.com/notachanceitshere

Helpful? *grins*

NookieNotes on November 27, 2008 7:22 AM

Linkgraph is a 404 widget that gets the correct URL of the page the visitor wanted.

It works with a database that is fed location information of a websites pages. As a widget, it's a bit like the Google 404 widget (http://googlewebmastercentral.blogspot.com/2008/08/make-your-404-pages-more-useful.html), except Linkgraph uses a pages history to get its new location.

Oli Loftus on December 30, 2008 10:29 AM

Sorry... the URL being http://linkgraph.net/

Oli Loftus on December 30, 2008 10:30 AM

Check out my 404 i made.
http://www.reelfishn.net/404.htm

Ryan on January 8, 2009 3:00 AM

useit's 404 page is a joke. classic example of function overpowering form. 1976 is better but not best. just because it meets all the criteria does not make it the best.
http://autoprestizh.ru/

Olef on January 9, 2009 5:40 AM

LinkedIn's has two 404 pages - a good one and a bad one. Mistype a name, get a 'good' one.

Leave a trailing slash on a URL and you get the raw apache tomcat error page. I'm guessing they need to reconfigure something:
http://www.malcolmcoles.co.uk/blog/linkedin-404-page-bad-review/

malcolm coles on January 13, 2009 2:16 AM

If you don't include the error code, you have to translate the message to every language there is to be really user-friendly. With it, you don't need any words at all because everyone knows what it means and if they don't, they'll start to wonder what it means and ask.
http://stroybalans.ru/

Oleg on January 31, 2009 1:39 AM

I have already issues with 404 pages in my site: http://www.otimizacao-de-websites.com that generates too much duplicate content and that happens because of bad hosting!

Great article.
Ive already bookmarked and subscribed the feeds.

Marcos on March 30, 2009 10:46 AM

Its always good to have some custom page with some links to the most important pages of the site!

Emprestimo Pessoal on April 9, 2009 10:03 AM

muito bom :}

Transportadora on April 27, 2009 12:13 PM

I am glad that I dont have problems with 404 pages any more. Angela from http://www.squidoo.com/errorsmartreviewdownload

Angela on May 4, 2009 7:38 AM

First, let's look at why they come up. They come up because someone or something called for a page that simply cannot be loaded for some reason. This may have been accidental, or intentional. They may not even truly be generated by a person.

Neil on May 7, 2009 11:05 AM

First, let's look at why they come up. They come up because someone or something called for a page that simply cannot be loaded for some reason. This may have been accidental, or intentional. They may not even truly be generated by a person.
http://landnew.ru

Angel on May 7, 2009 11:06 AM

Haha, I like the Dead end sign. I find that most 404 error pages arise from misconfigured .htaccess files / bad mod-rewrite settings.

MMORPG on July 6, 2009 7:10 AM

Here are one more error page 404 http://www.kontain.com/bickov/entries/36756/page-404/

Alexander Bickov on July 14, 2009 2:28 AM

great article! Thank you for sharing!

free mmorpg on August 4, 2009 4:05 AM

Great article! Thank you for sharing!

free mmorpg on August 4, 2009 4:06 AM

After a bit of a database problem and a complete redo of my personal site I still seem to get alot of traffic to old urls.

Because of this I've already put quite a bit of thinking into my 404 and it seems to be redirecting traffic quite well now.

You can see an example at: http://foobr.co.uk/error/javascript

it looks at the url you are trying to reach, the referrer to see if it is a search-engine and if so can it get any keywords from the query string and then uses this information to display links which might match what you were looking for.

The more relevant the information is the darker background it is placed on.

Aaron Bassett on February 6, 2010 10:02 PM

You always need a 404 page because of the following reasons:

Users may not type a URL correctly
Users may bookmark a URL that is no longer active (site re-organization, etc.)

However, supplying the default 404 page is not very good.

Here's my now defunct football site:

http://www.oneweekwonder.com

Now type in this:

http://www.oneweekwonder.com/xyz

That's my 404 page, doesn't even say 404 because 404 is useless to non technie, but this page is plenty useful to get people back to the areas they were in.

With IIS it is easy to overwrite the 404 response pages and any other HTTP error page. Not sure about other web servers.

Jon Raynor on February 6, 2010 10:02 PM

How is it that a web site that blogs about the importance of good 404 pages does not even have one?

http://www.codinghorror.com/gimmea404.htm

I am blown away. Simply shocked.

Chase Wallis on April 9, 2010 8:31 AM

Using 404 is making user more friendly
I accept we can config in Most Server with Asp, Php, CFM, Asp.net

www.cambodia-tourism.org/news is work fine for me

:)

Khmerclassified on June 2, 2011 2:11 AM

«Back

The comments to this entry are closed.