Two Schools of Thought to 404 Error Page Designs

There appear to be two schools of thought when it comes to 404 error page design.

The first, as exemplified by Apple and BMI, present the 404 page as a standard page within the regular site template.

Apple.com 404 error page

Apple 404 page

The second — see Twitter for an example — present the 404 page completely independently from the design of the rest of the site. As such, it tends to look more like a website maintenance page.

Twitter.com 404 error page

Twitter 404 page

I've always appreciated the creativity that can go into the design of the 'independent' style of 404 pages and I would love to use my sites' 404 pages as a sort of creative 'easter egg' for someone who has the misfortune to arrive on them.

However, I've held back from doing so because I feel that error pages which fit within the overall site design are more user-friendly. They make it easier for the visitor to correct their course and navigate, if not straight to the right page, at least to the right section of the website.

But that's just one person's opinion, and I'm sure there is good reason why so many designers take the other approach. I've just never seen it explained.

So, is one approach better than the other or does it even not matter? I'd be interested to hear people's thoughts.

Posted on: August 22, 2009 | 16 Comments

Recent Entries in "Web Design"

16 Comments Posted

Can't you just be creative within the framework of your site?

problem solved.

You certainly can, and there are plenty of examples in this 404 error page showcase.

However, what I was wondering is why many designers opt to create a completely separate 404 page, outside of the design of the site?

I think I have the answer for you here and unfortunately it's perhaps a bit more basic than you hoped.

In my experience the development of 404 pages falls into 2 very distinct categories:

1: a page that has been considered and scoped - thus is actaully designed, fits in with the site and offers quick access back to the main navigation.

2: a page that is remembered during the last stages of testing and is thrown together during a mini panic; thus giving the designer an opportunity to let his hair down and throw something different into a page that requires minimal sign off.

I don't really find one to be especially more usable than the other. It's rare that the list of suggestions as in the Apple example actually help me out.

What I dislike the most is when a 404 error redirects me to something like http://example.com/error/404.html. Usually I get a 404 as the result of a typo, and ditching what I typed (or pasted) as the URL makes that harder to debug.

I am probably an edge case.

I dislike the Apple style... It's almost a slap in the face. "We messed up, but you get to do the work by reading all of this."

The Twitter one is nice... short and to the point.

If it's not there, then it's not there. No point in wasting my time.

If the user followed a link from within another page on the site, they may be more familiar with the navigation and style than a link from elsewhere. But, I think the page needs to be different enough that people will spot it isn't the exact content the were expecting very quickly. Customisation to the context should also be considered:

  • If a user is authenticated in some way, it can be useful to show them user-specific links, rather than just generic public ones
  • It may be possible to suggest the correct address for the URL entered:
    • if the address of a replacement page for old content is known
    • if common typos or embedded linking faults might be the cause - such as case sensitivity or a trailing ".", ")" or "]"

I see the Twitter page doesn't actually say "Page not found" or the like in the title. "<title>Twitter / ?</title>" really doesn't mean very much. That's going to make it harder for some folks.

I usually go with a 404 page inside the regular template and place a link to the site map and a search form there. That way, it's not overwhelming, but they have a choice to search more if they want. Seems most practical to me. Not sure why you'd put a page there all alone.

I'm the author of the BMI 404 page and was happy to see it mentioned. I love a good 404 and catalog the ones I find on my site:

http://dfbills.com/category/fourohfour

To me, the 404 should convey three things:

1. That you've come across an bad link or application error.

2. What you can do to work around this bad link or application error.

3. It should be clever in treatment and should never be a default Apache (arge, black times font on white) or IIS error page (small, black verdana text on white).

I like this one: http://www.danielscholten.com/error/error404.html. It goes the opposite way than all other 404-pages: Enhancing the feeling of being lost by dark fullscreen images and verses of Dante. Okay, it's a crime writer's website. All others better won't do this :)

any way to make the 404 page more interesting gets my vote!

Independent are really cool but i think Apple 404 page style is best according to me as it can help the visitor . I am also planning to design a similar one for my website .

I am relativity new to web design and has recently started a web design company in South Africa. Until then, i was always under the impression that the 404 pages was produced by the browser because I always saw only the default 404 pages.

It is only recently that I realized you can design your own 404 and other error pages and my personal opinion on the design of these pages are that it does not matter what they look like, as long as they are more effective than the browser (or hosting company) default page. In sites with fewer than 30 pages, why not add your sitemap in there, and possibly a search box.

For bigger sites, it might be a good idea to place only the links to your first level pages, ie. all the links you can reach from your home page.

Really a cool one and very informative. It really made me think so starting work on 404 pages soon.

I like 404 page of Twitter page concept

I hate the Twitter 404 page, it just annoys me, I prefer a combination of something that it stlyed nicely but links to useful pages I like a bit of humour, mt favourite was a 404 that came up 'whoops this page has gone on holiday, perhaps you'd like to see its friend instead with links to home, sitemap and a leavea message after the beep which wen't through to a support form for the webmaster' wouldn't be tasteful on all websites but at leas I'm not pissed off at seeing that bloody twitter page again

I personal prefer 404 pages that are programmed to suggest what page you night have wanted to got to or something related. I've created some in PHP before you would still have some sort of sorry your page cannot be found message.

Subscribe

Subscribe to my RSS FeedSubscribe to my RSS Feed

Categories

Proud member of 9rules network