How To Test Web Forms in 7 Steps
July 25, 2009
Introducing Testing Tools
August 8, 2009
Show all

Why Web Sites Should Have Custom 404 Pages

Standard 404 page not found error

Standard 404 page not found

Several of the web sites that I’ve been testing recently have suffered from not having a custom 404 page. It is a very quick and simple test that many web testers complete practically straightaway because it can give an indication of whether a web developer or designer has thought about what they are doing and offered a bit of attention to detail to what they are building or designing.

Because I have come across several web sites not having custom 404 pages in place at all, the screenshot above is taken from a major UK supermarket chain’s main web site, I thought I would write a post on what a custom 404 page is and why you should have one.

As is practically always the case with web development, think of the user first.

What is a custom 404 page?

When you type a web address into your browser or click on a search engine listing, the browser sends a request to the server that hosts the web site and gets a response back. This response from the server is called a response code. If the page that was requested displays within the browser then the response code would most likely be a success code such as 200, which is ok (that is what the response code means, that the request is ok).

There are a whole series of response codes that you can see a list of on Wikipedia and it is useful to know some of the main ones.

The 404 response code is ‘not found’, which means that the page that was requested cannot be found. So the first thing about a 404 page not found error is that it is generally bad if a visitor to your web site encounters this because it means that they could not be given what they requested.

What would you do if you encountered the following when browsing a web site?

A typical 404 Page Not Found error message

A typical 404 Page Not Found error message

A likely followup to this is that you would click back to the search results or wherever you came from and then click onto a different web site.

But instead of hitting the visitor with the standard awful looking 404 page not found error page, you can implement a custom 404 page that fits in with your web site’s styling and includes a nicely worded message that tells the visitor what might have happened and what the next step is that they can take.

That sounds a much better way of handling the problem doesn’t it?

Why would visitors hit a 404 page in the first place?

At this point you may be thinking why would any visitor to my web site hit a 404 page not found error in the first place? I bet you check all your links regularly to make sure none are broken and keep everything pretty neat and tidy so would not expect to get any 404s happening on your site.

However, you may be surprised at what visitors can do and what they may come across on the Internet. That sounds quite cryptic, and perhaps a little worrying, so let me explain a couple of scenarios.

1. Visitors may type in the URL of a particular page on your web site and get it wrong, this is natural and it happens. Perhaps they type in www.mywebsite.com/contactus.html instead of the correct URL of www.mywebsite.com/contact.html. If they do then they will hit a 404 page.

2. Visitors may bookmark a particular page and use that to reach your web site. Over time you may take that old page down or move it to another address. Any visitors that bookmarked the old URL will hit a 404 page everytime they use the bookmark (possibly only once as they will think you have gone away).

3. People may pick up on a page from your web site, perhaps a news article or press release and add a link to it on a forum or blog. Again, this link may become out of date and anyone clicking on that link will hit a 404 page.

4. Sometimes you will delete a page or remove a section of your site and actually want visitors to hit a 404 page. Why? Because you use the custom 404 page to actually tell the user that the page no longer exists but that they can still access the other sections of your site.

5. Typos happen all the time either with internal links that you place on your site or incoming links and having a decent 404 page mops up any visitors that stray onto a URL that is not found.

6. If you redesign your web site then you may use completely different filenames for your pages and so all old links need to be updated to the new URLS. If this does not happen then lots of people will hit 404 pages. Moving to a new web site will be covered in more detail in another post so please look out for it if this is an issue for you, or contact me with any queries, I would be glad to help.

So there are 6 scenarios where 404s can get displayed to visitors and totally realistic for any reasonably active web site.

I’m Convinced, What Should My Custom 404 Page Do?

The first think it should do is inform the visitor in a nice way that they have encountered a problem. The wording that you use is entirely up to you and should be written in the same style or tone as the copy used elsewhere in the site.

Once you’re past explaining the problem to the visitor you can try to help them find the page or section that they might have been looking for. So at the minimum give them a link to the web site’s home page as when visitors get lost they like to go back to the home page and start again. But you don’t have to stop there, you could give them all the main sections of your site as links with a small piece of text explaining each section or you could offer an ability to complete a search on your site. A link to your site map should also be included.

Or include an ability to email someone or link to a contact form, so the visitor can continue to pursue what it was they were interested in.

Include anything that helps the visitor and it will help them to realise what a great web site this is.

Use the same styling for your custom 404 page as you have for the rest of the site. This shows the visitor that it is a part of the same web site and they haven’t been redirected off onto some nightmare page not found machine.

An example of a good 404 page in my view is the one used at high street retailer Next, as shown in the screenshot below:

Next custom 404 page

Next custom 404 page

You could also get creative with your 404 page if your web site’s brand or subject matter allows for it. Have a look at some of these examples of creative custom 404 page designs.

Update – the above link now goes to a 404 page (wouldn’t you believe it) so I have found another worthy blog post to link to providing creative examples of 404 page designs.

Whilst you are being creative and including lots of helpful links for where the visitor may want to go next please remember to keep it simple and user friendly. A custom 404 page is not an excuse to throw everything on it, you should still approach it from the point of view of helping your visitor find their way as quickly and easily as possible.

Conclusion

To recap then, all web sites should have a custom 404 page for the visitors benefit so they do not get hit with a nasty standard 404 page such as the screenshots shown above, help them find their way.

Custom 404 pages can make a big difference in capturing any users finding URLs that do not exist and helping them onto the next step. Please make sure you include a custom 404 page in all of the web sites that you build.

Tom Batey
Tom Batey, founder of Testing Web Sites & WebDepend, is a hands on website tester focusing on quality across web, mobile and email.