Jesper Tverskov, July 21, 2006, 2. edition

User friendly 404 error messages reconsidered

For years we have praised the wonders of user friendly 404 error messages tailored to the website. But most often such error messages are as bad as they can be even forgetting to use the 404 status code in the HTTP header. It is high time to reconsider if the job is better left to an improved default 404 provided by web servers where it naturally belongs.

1. Design for error

When you have used the web for some time, you know that an URL does not always lead you to what you expected and that links can be broken. Just like telephone numbers. No big deal. You don't need to hear "we are sorry", or to be presented for a long list of possible causes or a similar long list of suggestions for how to proceed.

We want to recognize that a "404 Not Found" has happened as fast as possible. It is not necessarily better to make a less technical message. It will probably be longer and also less clear at a glance. We want to correct the typo or mis-spelling in the address line of the browser right away, if that is the problem, or to go to the homepage of the URL not found in a split second, and to proceed from there.

The proper way to explore a website is from the homepage. It is better for your learning process to get acquainted with the homepage and how it relates to sitemaps and search engine than to become best friends with an error message.

2. Hypertext Transfer Protocol

The "Hypertext Transfer Protocol -- HTTP/1.1" is specified in RFC 2616, June 1999. The 404 error code is one of nearly 50 codes called Status Codes. The 4xx class of codes are called Client Error codes. The name of error 404 is 404 Not Found.

An error 404 message should be as close to the specification as possible. I strongly believe that an error 404 message should not only include 404 Not Found in the HTTP header but also as text in the error page. 404 Not Found should also be the content of the HTML "title" element and of the "h1" element.

Since the spec calls "404 Not Found" for a Client Error, and since the word "error" is easier to understand than just "404 Not Found", I also recommend to include the word "error" in the text message. Better play it straight than hiding the fact that some error has occurred.

3. Code 404 must be returned

A 404 error message must include the 404 Not Found status code in its HTTP header. This makes it possible automatically to detect if a page was not found or if a link is broken.

Very many websites making a self-made 404 error page forget to use the 404 error code. If they are extremely bad they use status code 200 OK or typically status code 301 Moved Permanently or 302 Found.

I have used Link Valet to test the error messages of twelve websites we are going to use as cases in this article. I will update the table, probably once a year, to give the bad websites a chance to get better.

My test page can be found at www.xmlplease.com/articles/error404/error404-test.html, if you want to use it. I don't link to it directly in order not to trigger more errors at the websites than necessary.

NoWebsite2006-07-15
1Google404 Not Found
2Jakob Nielsen404 Not Found
3IBM404 Not Found
4PHP302 Found
5Microsoft404 Not Found
6Yahoo404 Not Found
7Ebay301 Moved Permanently
8Wikipedia301 Move Permanently
9W3C404 Not Found
10Evolt404 Not Found
11Alistapart200 OK
12Amazon302 Found

Almost half the websites don't use status code 404 for their 404 error message. This makes it impossible to detect automatically if an URL was not found or if a link is broken.

4. Default 404 in web servers

The default error messages of the web server are short and often cryptic. Microsoft’s web server, "Internet Information Services" (IIS), returns for a "404 error" only one line: "HTTP/1.1 404 Object Not Found":

Figure 1: The default 404 error message in IIS.

It is nice that ISS includes "404" so it is easy to se what status code we are talking about. Other web servers like Apache, return a similar error message: "Not Found. The requested URL /[name of the file] was not found on this server:

Figure 2: The default 404 error message in Apache.

It is nice that Apache includes the name of the requested web page and information about the web server. Most users seeing the message have no idea of what it is all about. But an error message is allowed to have detailed information to the users that would like to know.

You can redirect these default error messages to your own more user friendly error pages. There are many tutorials on the net about how to do it in Apache and in ISS. This article questions if it is at all a good idea to make your own, and takes you deep into the issues of BEST PRACTICES, and the usability and accessibility problems of "404 Not Found".

Since the primitive error messages of web servers are not that user friendly, newer versions of some of the web servers also provide more user friendly so-called "custom" error messages. In IIS it is most often not the "default" error messages but these "custom" error messages you have to redirect to your own error pages. It all depends on how the web server is configured.

As default all web applications on the web server use the same error messages, but every single web application can have its own "Custom Error Pages" in its own directory typically on the root of the web application. There are error messages for all sorts of things.

5. Friendly HTTP error messages in Internet Explorer

It does not make it less confusing that some browsers, like Internet Explorer, show their own error messages, if the web server the browser has requested for a page returns a primitive error message (a short one). At the bottom of the error messages of Internet Explorer 6 it says "Internet Explorer". Nice to be honest about it.

If Internet Explorer detects that an error message from a web server is less than 512 byte, IE shows its own "friendly" error message. This is also the case if the web server is e.g. an Apache. In Internet Explorer in the menu item, “Tools/Internet Options/Advanced” you can switch "Show friendly HTTP error messages" off and on.

6. Microsoft's "custom" and "friendly" 404

Let us take a closer look at Microsoft's "Custom Error Messages" in "Internet Information Services" (ISS, Microsoft's web server) and the similar "Friendly HTTP error messages" in Internet Explorer. They are by far the most common 404 error messages around and of a very high quality. They are actually role models, and even so good that it is difficult to imagine them much better. Below we show the "friendly" 404 error message in Internet Explorer 6.

Screen dump of 404 error message in Internet Explorer

Figure 3: "User friendly" 404 error message in IE6. Could it be done much better?

In IE6, The "404 Not Found" of the error message, supposed to scare some users, is not in focus, but it is there. You are told in plain English that the file was not found. Several reasons are suggested: "The page you are looking for might have been removed, had its name changed, or is temporarily unavailable". What to do about it is in focus: "Please try the following", and you have a link to the homepage of the website, using the website's own name, etc.

Except for the fact that the requested filename should have been included in the error message, it is difficult to imagine a better generic 404 error message, that can be used by any website. Microsoft’s error messages are far, far better than most of the so-called user friendly 404 error messages made by web designers at individual websites!

I only see three problems with the "friendly" 404 error message in IE6:

Microsoft’s error messages should not be replaced because they are bad. If we correct the three problems just mentioned, the error message of IE6 becomes a clear winner almost impossible to compete with. The saying goes that Microsoft’s error messages should be replaced because the users have seen them so many times that they are dead tired of them. They even make users angry. Most users hate these error messages so much, that they don't even read them or scan them. They just hit BACKSPACE as fast as possible. I am not so sure.

The main reason to try and replace the default 404 error messages of web servers and "custom" and "friendly" 404 of Microsoft is to optimize the chances that the user will stay at our website finding what they are looking for or something else. It could be made more clear that the user has actually arrived at the right website only the wanted file is somehow missing. It could be made more clear for the user how best to proceed.

7. The friendly 404 in IE7 beta

Let us have a look at the friendly 404 error message in IE7 beta to see if Microsoft has come up with something better.

Screen dump of 404 error message in Internet Explorer 7 beta.

Figure 4: The 404 error message in IE 7 beta. Note the "More Information" link. "HTTP 404" is still there to the far right.

The friendly 404 error message in IE7 beta is not as good as in IE6. There are five problems:

Problem number one: Microsoft in the year of 2006 still employs web designers making static, "fixed", DTP pseudo webdesign. No fluidity. The full error message can not be displayed without a horizontal scroll panel in small less than maximized browser windows or on small screens with low resolution.

Why should the links be underlined in this case? An important accessibility guideline says: "Don't rely on color alone". If a link is not underlined it can be almost impossible for some users to recognize it as a link. If a link is not underlined it must be an item in a menu of navigation, or in a list of items easily recognized as links, or in footnote "brackets", etc. [1]

8. The short and the expanded error message

As we have just seen, Microsoft has now introduced a 404 error message consisting of a short and of an expanded version. You click the link, "More Information", to get the full message. This idea is great also for 404 error messages and have been used for a long time in webpages and dialog boxes.

Screen dump of the additional information in the 404 error message in Internet Explorer 7 beta.

Figure 5: The "More Information" section in the 404 error message in IE7 beta.

An error message, as good as it can get, does not need to consist of more than the short story. No need for each and every error message in millions of websites to sport a long story about all the things worth knowing and to consider if an 404 error is thrown. I would go as far as to say that all we need is one longer version of the error message described and discussed in Wikipedia.

Some websites can make error messages with additional information initially hidden behind a "details" or "More Information" link if they like to but it is not a requirement.

9. Brain storm for a good 404

By analyzing the default error messages in IIS and Apache and the so-called custom error messages in ISS and friendly error messages in IE6 and IE7, we now how a pretty good idea of what constitutes a good error message. Let us have a brain storm for a good error message:

  1. Status code 404 must be included in the HTTP header.
  2. Be short, friendly and precise.
  3. Have the look and feel of the website.
  4. Should look like an error message.
  5. Have focus.
  6. Font size bigger than normal.
  7. An apology is ok.
  8. "Error" and "404 Not Found" should be in the message.
  9. "Error" and "404 Not Found" could be down-played (small letters).
  10. What went wrong on what website.
  11. Suggest the possible causes of the error.
  12. Suggest how to proceed.
  13. Tell that error has been logged.
  14. That webmaster has been notified by email.
  15. A link to the homepage is enough.
  16. A short message is always enough.
  17. Sometimes a short message could link to more details.

The above is a brain storm not guidelines or a list of requirements. The best way to learn how to make a good error message is to analyze real error messages.

10. Google's 404 error message

Google's 404 cached 2006-07-07. Go to www.google.com and provoke an error yourself to see if message has become better. [2]

Google's error message is nice in the great simple style of Google. This is an excellent example of a customized error page tailored to the website. No one doubts that we are arrived at Google. Only the page we are looking for is somehow missing. Google's error message is probably just a styled version of the default Apache 404 error message using Google's flying colors.

Screen dump of Googles 404 error message.

Figure 6: Google's 404 error message is almost as good as it can be.

The error message is rather short, the possible reasons for the error are not listed, and there are no hints of how to proceed. But the error message is very good anyway, the simplicity is all important. Google's Error 404 message has two problems:

11. Jakob Nielsen's 404 error message

Jakob Nielsen's 404 cached 2006-07-07. Go to www.useit.com and provoke an error yourself to see if message has become better.

Jakob's error message is much better today than it was when the first edition of this article was published in 2003. The error message is still too long and talks too much. Take a look at the cached version. Is it an error message or is it one of Jakob's "alert box" articles?

Screen dump of 404 error message of useit.com.

Figure 7: Jakob's 404 error message is too long and talkative.

The important link to the homepage in the bread crumb menu is not too obvious. That is the reason why another link to the homepage has been added. Sad that it is located halfway down the page but out of sight "under the fold" on very many computer screens.

Take a closer look at the "Most Popular Pages" section. Why list a great article about frames that sucks, relevant more than 10 years ago? Why list an article about WAP? Drop the whole section, completely irrelevant for 99 percent of the users encountering a 404 error.

It is not a good idea to include the search field at the bottom of the error message. The user was probably trying to type some URL into the address line, and is now tempted to type it into a text search engine. Much better to send the user to the homepage in order to proceed from there.

12. IBM's 404 error message

IBM's 404 cached 2006-07-07. Go to www.ibm.com and provoke an error yourself to see if message has become better.

The 404 error message of IBM is just bad, bad, all the way. It looks like a subpage of a web application not as an error message. Why tell the user that the page can not be displayed when the problem is that it can not be found? Why have a "return to previous page" link? The user will most likely leave the website if it is used.

Screen dump of 404 error message of ibm.com.

Figure 8: Ibm's 404 error message is bad al the way.

Why tempt the user to report the error using a form when errors are logged and it is easy to automatically send a mail notifying the webmaster? I do that.

IBM's error message only works at the root of the website. If we go into a subdirectory the default page of that directory is returned instead. This was also the case in 2003 when the first edition of this article was published.

13. PHP's 404 error message

PHP's 404 error cached 2006-07-10. Go to www.php.net and provoke an error yourself to see if message has become better.

PHP has a long tradition for 404 error messages that couldn't be worse. When this first edition of this article was published in 2003, the error message linked to a handful of search engines. Month later errors were just redirected to Google's homepage.

Screen dump of 404 error message of php.net.

Figure 9: PHP's 404 error message is a complete misunderstanding.

Today the PHP 404 error message is so far out, that it could win a prize. A PHP Function List is returned having nothing to do with an 404 error message. The idea is probably that users of PHP don't need a 404 error message. So why not misuse the error message as some sort of shortcut too look up functions.

14. Microsoft's 404 error message

Microsoft's 404 error cached 2006-07-07. Go to www.microsoft.com and provoke an error yourself to see if message has become better.

The error message of Microsoft does not look like an error message but as a sitemap. If you like this "sitemap" idea, I don't, then link to it from the error message instead. The error message should only be point of departure for getting to the proper tools. It should not be one more alternative way to start exploring the website.

Screen dump of 404 error message of microsoft.com.

Figure 10: Microsoft's 404 error message is just a sitemap.

In the first edition of the article published in 2003, the links in the sitemap were difficult to read without bullets in front of the items. Microsoft has later added such bullets.

If Microsoft thinks this sitemap is useful, it is surprising that it is no where to be found at the website. If users find the sitemap useful, they will have to remember to provoke an error in order to get to it!

15. Yahoo's 404 error message

Yahoo's 404 error cached 2006-07-07. Go to www.yahoo.com and provoke an error yourself to see if message has become better.

When the first edition of this article was published in 2003, I wrote: "Yahoo has error messages with banner adds and even popup adds!" Yahoo is now giving us a 404 error message that is much, much better, at least the direction is right.

Screen dump of 404 error message of yahoo.com.

Figure 11: Yahoo's 404 error message is almost there.

I still prefer that the name of the URL not found is included, and that the error message somewhere says "error" and "404 Not Found" written with big or small letters. I also prefer a shorter version just linking to the homepage with or without a link to more information. Also it is better to lead the user to the search engine via the homepage.

16. Ebay's 404 error message

Ebay's 404 error cached 2006-07-07. Go to www.ebay.com and provoke an error yourself to see if message has become better.

Ebay's error message is bad, bad, bad. It does not look like an error message but as some beginner's first webpage. A confusing mixture of suggestions and a sitemap. Ebay states that "This page is no longer available". Could be right in some cases but most often the user has just misspelled the URL.

Screen dump of 404 error message of ebay.com.

Figure 12: Ebay's 404 error message is too long, too confused.

It is a sad story to read the detailed suggestions at Ebay and incredible that users are recommended to report 404 errors. Errors are easily logged, and it is easy to make an error trigger an email to the webmaster automatically.

17. Wikipedia's 404 error message

Wikipedia's 404 error cached 2006-07-07. Go to www.wikipedia.com and provoke an error yourself to see if message has become better.

Wikipedia's error message is a scandal. After 5 seconds you are automatically redirected to either an article with the name of the URL, if such an article exists, or to a more detailed error message. This is confusing since the 404 error message is about URLs not found. "Asdf", a common pseudo password or keyboard test, redirects you to an article. "Asdf.html" redirects you to a more detailed error message.

Screen dump of 404 error message of ebay.com.

Figure 13: Wikipedia's 404 error message is a scandal. Notice the redirection!

You can redirect the default error messages of the web server server-side to your own error messages, but you should almost never use redirects client-side in the browser. Accessibility guidelines clearly states, that "count downs" that can not be stopped by the user in need of more time, must not be used.

It is also far out that the "404 error" and "URL" of Wikipedia's error message are links to articles about these subject in the Wikipedia. If we want to confuse the user and blend everything together in the same bag, that is how to do it.

At a site like Wikipedia a two level solution seems to be a good idea. The short error message should have a link called "More Information" or "Details". A few users could then use this option if they need to.

18. W3C's 404 error message

W3C's 404 error cached 2006-07-07. Go to www.w3.org and provoke an error yourself to see if message has become better.

The 404 error message of W3C is today much better than in 2003 but we still have some problems. Note the link to "Webmaster FAQ", that is frequently asked questions to the webmaster, and the link "Webmaster". Both links take you to the same FAQ. Delete both links. A 404 error message should not link to a general "Webmaster FAQ".

Screen dump of 404 error message of w3.org.

Figure 14: W3C's error message would be better with a two levels solution.

The World Wide Web Consortium's 404 error message is a good example of an almost correct error message where the main problem is that it is too long. The error message of Yahoo has exactly the same problem but is a little shorter making it less obvious. It is enough:

19. Evolt's 404 error message

Evolt's 404 error cached 2006-07-07. Go to www.evolt.org and provoke an error yourself to see if message has become.

In 2003 when the first edition of this article was published, Evolt's error message was a complete misunderstanding. The error message was a return message from the website's search engine. The concept is now more traditional but still all wrong: basically just some sort of filtered sitemap.

Screen dump of 404 error message of evolt.org.

Figure 15: Evolt's 404 error message is just a filtered sitemap.

Evolt's error message is too much "application" and almost no error message. Show the requested URL. Tell that it is a "Page not Found" (Evolt is doing that). Tell that it is a 404 Error. Have a link to the homepage, and maybe one more link to open up for "More Information".

20. Alistapart's 404 error message

Alistapart's 404 cached 2006-07-07. Go to www.alistapart.com and provoke an error yourself to see if message has become better

Alistapart's error message does not look like an error message. Mostly "application", logo, "design" and a lot of irrelevant navigation taking focus away from the error. It even returns a "200 OK" status code!

Screen dump of 404 error message of alistapart.com.

Figure 16: Alistapart's error message is far from best practices.

The 404 error message of alistapart.com is even a horror of fixed DTP pseudo webdesign with no fluidity and flexibility. You better browse in a maximized window to avoid horizontal scrolling.

The error message of alistapart is more in the league of a half-hearted humorous error message. Personally I don't like this "for Dummies" style of writing, and I think that many others are dead tired of it. Let go in a personal article or in a "quick and dirty" weblog but not in an error message.

21. Amazon's 404 error message

Amazon's 404 error cached 2006-07-07. Go to www.amazon.com and provoke an error yourself to see if message has become better.

Amazon's 404 error message is great. It is reduced to the bare essentials, which is good enough after all. Even the dog fits in and is accepted at once. Why explain in a long report, all that could have gone wrong? Many users know already. And if they don't they should not be patronized by Amazon but directed to the homepage right away.

Screen dump of 404 error message of amazon.com.

Figure 17: Amazon's 404 error message is one of the best.

I prefer that "404 Not Found" is part of the error message. This is not the case at Amazon but at least it is part of the page title as seen in the top left corner of the browser window. I prefer that all irrelevant elements and navigation be removed from an error message to put full focus on the error. In the case of Amazon a simplified version of the top menu and logo seems acceptable.

Of all the websites we have considered, Amazon's 404 error message is undoubtedly one of the best. Amazon has more pages than most websites, but can easily do with a simple 404 error message.

22. XmlPlease's 404 error message

XmlPlease's 404 cached 2007-01-29. Provoke an error here at this website to see if my message has become better.

I have tried to make a 404 error message good enough to be a model for a new customizable default error message provided by web servers. Most websites will probably like that the 404 error message is easily recognized as of the website ("yes, you have arrived but the URL points to nothing"). It must be easy to configure the "404" to include the logo of the website.

Screen dump of 404 error message of xmlplease.com.

Figure 18: XmlPlease's 404 error message. Note the "details" link.

Default or "custom" 404 error messages provided by the web server could easily detect the name of the requested URL and include it in the message. Apache has done that for a long time. And the web server could easily detect and include a link to the homepage of the website of the not found file. ISS has done that for a long time.

If the 404 of the web servers could be easily configured with a "details" section when needed, the web and its users would be much better off than with the myriad of 404 junk we see today. [4]

23. Common errors in 404 messages

  1. The 404 error message does not live up to being a HTTP 404 error message, technically speaking. The 404 status code must be send along with the message in the HTTP header. It must be possible to test with software if links are broken. An error message must not present itself as if no 404 error has occurred. The error message must not present itself as an ordinary webpage or redirect to e.g. the homepage.

  2. The error message does not look like an error message: too long, too loose, no focus. An error message should not look like a standard page of a web application. A little formality and some strictness is what sets an error message apart. Something equivalent to the "404 Not Found" should also be present as plain text. But it is ok to use small letters for that part of the message since it is just a mystification for most users, depending on the type of website.

  3. The error message should not be an alternative homepage, sitemap, Table of Contents, index or search page. The user should get off the hook as fast as possible and arrive at more solid ground on the proper homepage, sitemap, etc., and use the proper page as point of departure for exploring the website.

  4. The error message should not be a long list of possible ways of how to proceed. A link to the homepage is more than enough. Any additional link is more likely to hamper than to improve usability. No need for a list of possible causes in every single error massage at every website. It is enough that some web servers, browsers and websites do that. And that we can read about it in Wikipedia. The web should not be mostly redundant information.

24. Don't make smart error messages

It is easy to add all sorts of smart scripts to the web server doing "spell-checking" and comparing the file not found to known filenames. Using "Regular Expressions" (pattern recognition) we can make intelligent error messages asking: "Is this the file, you are looking for", showing a list of candidates. You could also test for obvious mistakes like wrong case and missing or wrong file types.

Consider the problem of automatic URL spell-checking and auto correction. Minor typos in links will no longer break them. Working links get copied. Soon we have links all over the place mis-spelled or with typos but still working. Who cares about correct URLs if they work anyway.

At www.microsoft.com only far out URLs not found return an error 404. If the URL looks like something the user could have been looking for, Microsoft sends the user to that page without a warning. If you want to be smart then do it in the open on top of an error message using the 404 status code.

I find "smartness" overkill most of the time. I don't recommend it as a general approach. I will even warn against it as a waste of time in most cases. Better put focus on making a good simple error message. It is hard enough. Some websites are welcome to try it out. It would probably work fine for some websites and cold even be worth the trouble.

25. Resources

On the Internet we can find many tutorials to the technical part of making user friendly error messages. But good advice about what an error message should look like is rare. The approach is most often "hallelujah, we most have one of those 404's". We need more articles of a critical and analytical nature and we also need more self-criticism.

Most articles forget to mention that the web server must send the "404" status code along with the error message in the HTTP headers. Most articles are blinded by the "read the manual syndrome". Most users don't read manuals or long error messages

Jakob Nielsen has two articles at his website. An excellent more general Error Message Guidelines, 2001, and a less good more specific Improving the Dreaded 404 Error Message, 1998. Jakob Nielsen's own "404 Not Found" is not good as explained above.

Madhu Menon, Useful 'Page not found' error pages, 2000, and Ian Lloyd, The Perfect 404, 2004, are some of the better "not good" articles.

Wikipedia on HTTP 404 also has some additional information.

The 404 Research Lab is a website dedicated to "humorous" 404 error messages! The "404 Research Lab" has a section on Do it yourself 404. A lot of the advice is not that good or counter-productive, but the website has an inspiring 404 link archive. XmlPlease is so God damned serious that it is wonderful to see examples of 404 error messages made mostly for fun.

The main problem with all the less serious error messages is that they are made for users that could easily recover from even a black screen as error message. Weak users, all sorts of beginners and users that don't use the web a lot, or even the average user, always need a serious error message.

26. Conclusion

For years we have praised the wonders of user friendly 404 error messages tailored to the website. But this article has documented that not even the best, biggest and most prestigious websites have been very successful in making and implementing there own 404 error messages.

The frenzy for making one's own 404 has been a disaster. Many solutions has nothing to do with an error message, often the "404 Not Found" status code is not even included in the HTTP header of the error page.

It is never wrong not to make one's own 404 error message. It is a natural task of web servers to provide a good default 404 easy to customize. It is much more likely that a couple of such web servers will one day get it right, than to educate millions of web designers on a daily basis.

Even if default and custom error messages of web servers have problems, it is much more sensible for users to relate to just a couple of easily recognizable error messages than to waste the time deciphering millions of completely different error messages of individual websites looking like all sorts of things, and being mostly a tour de force in how not to make a good 404.

Footnotes

[1]

If a link is just some inline text with another color, the link will not be recognized as a link on a monocolor display, or by some users with color blindness, or by any user with a notebook or desktop computer with less than optimal viewing contrast which is very often the case today with LCD displays.

[2]

To cach the messages I have simply saved them to my webserver. Nice that we now have them for eternity. Sad that I didn't do it for the first edition in 2003. Cached web pages are not the perfect solution. I you follow the links in them you either go to the live website, and that can be confusing, or links will be broken.

[3]

It must be said that the source code of Google's error message stinks. No DOCTYPE, a table used for layout, a third of the code is an out-commented stylesheet, misuse of the blockquote element, use of deprecated tags like the B-tag and the FONT-tag. Some of the text didn't even made it into a set of p-tags.

[4]

The toggle link "details" is made with JavaScript. It is important to make the link in such a way that it will work if JavaScript is not supported in the browser or if such support is turned off. In that case the link is not shown and the user gets the full message right away.

Updated 2009-06-12