Creating User Friendly 404 Pages

Show you a helpful 404 page? I did already, in the post itself:

http://www.1976design.com/gimme-a-404
http://www.useit.com/gimme-a-404

Although neither is perfect…

  • useit should automatically fix casing and file extensions, as others have pointed out
  • 1976 should automatically notify the site owner without forcing the user to do anything

… they’re the closest to the ideal 404 pages I’ve yet seen.

The SGI web site used to have a really funny 404, it was a random picture of a baby crying

It made me laugh out loud everytime I saw it.

btw, I think the 404 pages linked here have way too much text on it. SGI’s page was just ‘404 - page not found’ but it was a beautiful graphic design that made you almost feel happy to find a bad page

While useit’s 404 isn’t bad, this annoyed me:
“The most common mistakes in accessing useit.com are:
* Making the URL end in .htm - all pages on useit end in .html (note the trailing “l”)
* Using UPPER CASE CHARACTERS - all names are in lower case only”

Both of those “mistakes” are easily corrected with simple url rewriting rules. Since they obviously know about them and they are frequent enough to remark on them, this is user hostile behavior. If you know about it, and there’s an easy solution, just fix it.

I would agree that the 404 should actually stay. People do pick up on it quickly and it’s not actually that distracting or confusing, especially if you follow the rest of your tips. It just means that for those in the know it is much quicker to ascertain the problem.

I’m in two minds over the fact many different style of 404’s will confuse people. I think it needs to be well done, or not done at all. If you have half arsed “Woops” page it will confuse people more than it helps. But if you have a well thought out page which places links etc. it is probably more helpful.

What’s wrong with the IIS default 404?

As a tech writer for the IIS team, maybe I’m taking this too personal, but all those pages are MUCH better than ever before, and able to go toe-to-toe with the best error pages.

The IIS pages give you solid advice on what you should do to revover from the error, which in this case is pretty simple stuff: either fix a possible typo or you’re out of luck. Some things just can’t be made any better with a message. Case in point: the HTTP 404 error.

But back to the IIS 404 page. The exact http error designator (404) doesn’t even appear until half way down the page, but it does appear and that’s important.

Why? “HELLO?” Not everyone surfing the web is a total novice. Some of us actually want to know the name of the HTTP error code when we come across an error. On some of these 404 examples being held up as “good,” I have to scan for 5 seconds before I even realize I’ve encountered an error. That’s no good.

Finally the IIS page for 404 directly addresses an audience different than the average idiot: support personnel. Granted, it does seem a little lame to suggest these support professionals go to the MS.com site and search for 404, but what the hell: This is a template driven effort. In some cases, this section is going to be helpful to support people and the regular web surfers can disregard.

No way do the IIS default pages deserve this grief, but especially not from a dude who doesn’t even practice what he preaches: http://codinghorror.com/404

Great info - all my pages at http://www.software-dungeon.co.uk goto a default 404 page which stops would be hacks finding even more information.

you say that if you even include ‘404’ on the page you have alrady failed. YOu need to let the geeks know what the page is. If I see ‘404’ on the page, i don’t even have to read the rest of the text to know what it means.

Automatically guess where they want to go?

I would consider this to be a really bad idea! Mainly due to the fact if you transparently cover for the users error, they may never find out they made an error and keep using the same link (even to bookmarking and forwarding to friends). From then on they are depending upon your guesswork logic to keep their viewing pleasure.

Normally we will redirect it back to main page

you might want to avoid the ad-bloated 404 page: a lots of flashy adds surrounding the whole screen, and a small sentence here, written using the most invisible font possiblen saying the page does not exists.

also, if your 404 page design looks like any other page on your site, avoid messing up the parts: dont put the “page not found” paragraph where there is a navigation bar and a search box on other pages (http://www.club-internet.fr/actualite_v5/fdsq).

please avoid the lame error message: normal users dont know anything about template engines (http://www.club-internet.fr/actualite_v5/fjdk.phtml)

and last, let the user realize he made an error: dont redirect him automatically to the home page. if for some reason the user is not looking at the page (opening a bunch of links from an article for example), he will be surprised not to find what he was looking for on the page when finally looking at it. you may also understand that some people are slower to find, identify and read informations from a page, so a 2 seconds redirection is a definitive no-no (http://www.lycos.fr/fdsq).

If you have a custom 404 page, please, please, please just show it, don’t redirect to it, changing the URL shown in the user’s address bar. Doing the latter makes it so much harder to fix typos.

My 404 does a ton of stuff. First I have a list of redirects to make (I restructured my website several years ago but some links are still published with old information - there’s even one on a DVD somewhere). If the user comes in on one of those links, my 404 invisibly redirects to the right page. I use a redirect instead of a server rewrite because I used to have the redirected pages include a small yellow banner at the top that said something like “I’ve redirected you as best I can. Please note the new address. If this is not what you were looking for, then contact me.” But nobody ever contacted me so I dumped it.

Secondly, any 404’d image gets a blank image delivered. I was considering an image that says “image removed” but went for blank instead. I know I had a particular reason at the time.

I also get an email for every 404, telling me where the user was going, where my 404 sent them, and the array of server variables so I can see the referer and remote host and whatever if I ever need them. The email will NOT be sent for: favicon.ico, robots.txt or blank.gif (because those would be hit all the freakin’ time).

My 404’s look also matches the rest of my website, so it has less of a “dead end” feel and more of a “whoops, wrong way” feel, but the only people who get an actual 404 page are coming in from mp3 search sites like dogpile, and I really don’t like that my stuff gets catalogued in places like that (especially since I rotate my music), so perhaps it should just send people off into space.

Here’s a sample redirect:
http://www.planga-la.com/music/residents/

Something removed from a temp directory:
http://www.planga-la.com/stuff/stuffisgone

Other regular 404:
http://www.planga-la.com/404toyourmomma

And for anyone who wants to go straight to the 404:
http://www.planga-la.com/404.php

“Drop the 404”

No no no!

The average user who reports a fault is very bad at describing it. Without sensible information, you are going to have a hard time working out that the error is a 404 in the first place. Some users are even incapable of telling you that the problem is on a web page in the first place. You won’t know to even look at your web server error logs.

Something that non-technical users do manage at least some of the time is to report codes that they do not understand verbatim.

Include 404 in your error message. Somewhere identifiable. For example, all your errors might always have “Error code: xxx” at the bottom. This way, when somebody reports an error you can ask for it and have some idea of what is happening.

Please include this in your article…

Apache URL spellchecker - http://www.apacheref.com/ref/mod_speling.html
IIS URL Spellchecker - http://www.apacheref.com/ref/mod_speling.html

It eliminated round about 80% of my 404s.

Also, if you are redirecting your users to a different 404 page, please provide the broken URL so that they can fix their typos if needs be

The book “Defensive Design for the Web: How to improve error messages, help, forms, and other crisis points” has great tips on how to create good 404 pages.

  1. Drop the 404 (its just an error code)
    I would keep the numbers ‘404’ on the not found page. Waaay back dropping the 404 would have been a good idea. After all these years 404 has almost evolved into being a real word, not an error code.

Still, the not-found page should be crystal clear to Aunt May, and still have the 404 short hand for those who know what it means. So, 404 is ok to use, but never use 403 or 405 (what ever those are).

I always liked the 404 page from homestarrunner, not that is a good page or a well done implementation its just plan funny.

http://www.homestarrunner.com/404.html

One of the more amusing 404 pages I’ve seen:

http://cricketfeet.com/error

you didn’t get the page you wanted, but you get something interesting.

I think apple’s 404 page is great. A lot of normal people that view the site are even more incompetent then most webusers (think about it. Someone viewing your blog is bound to know more then average joe who wants a shiny mac).

The mac’s 404 page gives you a ton of places to go from your dead end, and I think that’s really what you want to do, especially if you’re a company like apple (i.e. wants people to buy their stuff).

It seems to me that you’re kind of driving toward an aesthetically pleasing before (but only slightly) usability.

But that’s just what I think :slight_smile:

On a previous incarnation of www.att.com, I did a few things:

First, if there are any upper-case characters in the path, permanently redirect to an all lower-case link. (We always used lower-case as a rule.)

Otherwise, examine the referring link. If empty, it could be a typo or a bookmark that no longer exists (shudder). This is also where a spellcheck module would come in handy (see Des Traynor’s earlier comment).

If it’s an offsite link, explain that and suggest notifying the webmaster of that site. If it’s an on-site link (d’oh!) then offer a simple one-button form to send a heads-up, which went into a queue. We did not auto-send this, lest a bot or script begets a flood of emails! (In hindsight, I suppose we could have de-duped the feedback, but we had to be mindful of server resources too.) Using the form also gives the visitor a nice sense of participation.

To be sure, our web analytics and proactive link validation caught 404s too, but with so many links and domains, things can still fall through the cracks. Adding some smarts to the handler helped alert us to the low-hanging fruit in rapid fashion (the proverbial 80/20 rule).

One last thought: Keep the 404 handler (and others) nimble and lightweight, but packed with informational goodness. Have fun!