Handling error pages

No matter how well built your website is there is no avoiding the fact that sometimes the page a user is looking for just can’t be found. What matters is how you handle the problem when it occurs.

When pages cannot be found they generate 404 error pages. This is usually shown to the user as an unfriendly generic web page generated by the browser itself. It does nothing to help the user find the content they are looking for and in many cases doesn’t even give them a decent explanation as to why the page didn’t appear in the first place.

What causes a 404 error?

404 errors can be caused by a number of factors. Some of the most common reasons include:

Pages being moved

Reorganisation of a web site is a common practice and one that often leads to broken links. Sometimes these can be links internally which were missed in the update, however more often than not they are external links from search engines or third party web sites that become out of date.

Mistyping

Where web site addresses appear in printed form it is neccessary for users to retype them into a browser. Unsuprisingly this can sometimes lead to mistakes being made and a 404 error being generated.

Designing perfect 404 error pages

As with all web design there is no perfect way to build a 404 error page. However there are some general principles that you may well wish to take into account:

Avoid redirecting

Many sites choose to redirect users to the home page instead of displaying a custom 404 error page. This can prove hugely confusing. Take for example this web site, imagine you had arrived on this site following a link to a specific article. If I had removed the article it would be confusing to find yourself redirected to the home page which would display totally different content to that which you had expected.

Make it obvious what the page is

It is important to make this page stand out. It needs to be made clear to the user at a glance that they have not been taken to the page they are expecting and how they should go about overcoming this problem. The design should be minimalistic while still containing the navigation and branding from the rest of the site.

Offer a site map

A site map helps a user gain a quick understanding of the overall structure of the site they have arrived at. It provides a context that should help them quickly and easily find the content they are looking for.

User friendly terminology

As somebody responsible for your web site I am sure you know what 404 error pages are (at least you do now you have read this article), however that doesn’t mean your average user does. Avoid using the term 404 error when creating your custom page. Rather explain that the page cannot be found in as an apologetic way as possible. Avoid giving the user the impression that you consider it their fault they can’t find what they are looking for.

Make sure the user can search

If you have an internal search engine use it. There really is not much more to say on this point. It’s a not brainer really. This will help users quickly and easily find what they are looking for on the site.

Conclusions

The web is a hard enough place to navigate anyway, without the further confusion of pages dissappearing when you try and access them. An intuative, well considered 404 error page makes a big difference to the usability of a web site. However avoiding the error in the first place is even better. Where possible fix broken links that occur. If the page has simply moved try setting up redirects to the new page or ensure the link is updated. Don’t see a 404 error page as a quick fix to fundermental problems with your site.

  • http://www.adanoo.com/ Tom Miller

    Tip: Tracking 404 Pages
    Besides telling you from which sources your site traffic originates, Google Analytics also tracks just about any activity that occurs on your site, including popular navigation paths, plus track downloads, outbound links, and activities on cross-domain properties. But one shortcoming is the lack of reporting on 404 pages, which appear when there’s no file or page that corresponds to the visitor’s request. For example, sometimes visitors will type in a filename that they think is available on your site, or sometimes your site might have a obsolete link which routes to a deleted or non-existent file or directory. In both cases, a 404 or “Not Found” error page will appear on the browser.
    It’s valuable to see these requests so you can learn what visitors are looking for, and consider adding new content or fixing the broken link.
    Reporting on missing or error pages requires a few steps:
    1. Add the Google Analytics tracking code to a custom 404 error page
    2. Modify the tracking code on the 404 page as follows (see the urchinTracker modification in red below):
    _uacct = “xxxxx-x”;urchinTracker(“/404.html?page=” + _udl.pathname + _udl.search);
    This code sends a virtual pageview of “/404.html?page=[pagename.html?queryparameter]” to your account, where [pagename.html?queryparameters] is the missing page name.
    3. Look for /404.html in your Top Content report. Or to make it easier open the Dynamic Content report and expand the list for “/404.html.”

  • http://www.slava-slavik.com Slava Slavik

    Good point, Tom, but is there a way to find out the name of the requested page not found in JavaScript or PHP? I would prefer storing it in a a special log file than running a script on another server.

  • Slava Slavik

    Please, disregard my previous post. I found a good tip on logging 404 requests here:
    http://tips-scripts.com/?tip=not_found#tip

  • http://ianandersongray.com Ian Gray

    Thanks for this, Paul. I found the article on the A List Apart website quite useful by Ian Lloyd- http://www.alistapart.com/articles/perfect404/
    I’ve been working on getting a 404 page right for a website recently. I’ve used php to implement a version of Ian Lloyd’s example. I think it’s better to use a server side solution as what if the visitor has javascript disabled?
    I won’t jibber on here about it, but a question I have is, is there a better way of describing a URL? Most people don’t really know what a URL Is. Would you describe it as a web address? Any ideas? I’m trying to make my 404 as user friendly as poss!

Headscape

Boagworld