How to make a user friendly 404 error page

Search boxes

One device that's proving harder to shift, however, is the search box. Although it often makes sense to enable users to search from an error page, it's almost a method of avoiding truly helping the user out: you're providing the pretence of doing so, but actually forcing them to do further work themselves.

If you're keen on integrating a search, follow Microsoft's example. On visiting its 404, you're presented with a search form, but with results based on the erroneous string that led to you ending up on the error page.

Common misspellings are also corrected using a 'Did you mean... ?' sentence, and the entire system is far friendlier and more helpful than just presenting a barren search box. (Also, if your site has integrated search, try using your standard layout for your 404 – more on doing this later.)

If you have neither the time nor the inclination to work on an advanced search tool, there are other ways of helping users access your content. You could, for example, present a short list of links to particularly popular items or pages, or to recent posts on a news site or blog.

These shouldn't become a distraction, though, and simple design devices – headings, coloured boxes and so on – enable you to separate information regarding what's happened from suggestions regarding what to do next.

Fully integrated 404s

A final consideration is whether to fully integrate 404s into your site's design. Again, opinion is divided, with some suggesting that error pages should be simple and have no distracting elements.

Others note that if you do use your site's design on the 404 page it should be stripped back, lacking things like navigation. Frankly, we're not so sure: if your site has a fairly simple design there's really no reason why the 404 can't be directly integrated.

One of the best examples of this is Happy Cog's 404, which uses the site's standard layout, typography and navigation. Because all of the components of the site are clear, the user shouldn't be confused, and because the site's standard navigation is there, access to site sections is only a click away, rather than forcing the user back to the homepage before progressing. (Note, though, how Happy Cog still uses inline links within the error text to direct users to the homepage, design work and company information page.)

Apple also uses this kind of layout although its 404 is less successful, due to welding a site map (albeit a simplified one) to the page. Some might argue that these links enable you to access content more quickly, but Apple has a serviceable search in its navigation toolbar, and dozens of links clamouring for attention isn't what a lost user needs.

Once you're settled on the type of 404 you want to create and have put it together, making it live depends on the type of hosting you have, but is generally a simple process. For example, on Apache you can create a .htaccess file and use the following line of code to redirect the error message to your custom page (replacing '/path/to/file/' with the actual path to your file):

ErrorDocument 404 /path/to/file/404.html

Once you have your custom error pages up and running, things will be easier for your users. However, you can also take advantage of errors to make things easier for you. Consider setting up a system that provides you with reports detailing the 404 errors on your site.

The bulk of 404s will be mis-typed URLs, but many will be links to dead content from search engines, and some might unearth problems in your site itself. If you see the same strings showing up time and time again, you can do something about them, such as fixing broken links or redirecting popular URL misspellings to correct locations.

-------------------------------------------------------------------------------------------------------

First published in .net magazine, Issue 185

Now read 10 things to put on your web design to-do list

Sign up for the free weekly TechRadar newsletter
Get tech news delivered straight to your inbox. Register for the free TechRadar newsletter and stay on top of the week's biggest stories and product releases. Sign up at http://www.techradar.com/register

Follow TechRadar on Twitter