Creating Friendly 404 Error Pages

Error pages are inevitable on any website either from an old link, incorrectly formatted link or typos.  The big problem with error pages is usually the website visitor is presented with an unhelpful page that says the page couldn’t be found with nowhere to go.  Customizing your 404 page to give a friendly error message and having some way of navigating to a good page is essential to keep visitors on the site.

Let’s start with the classic error page:

Here is what I see as the biggest issues for this page:

• Unfriendly error message
• Nowhere to navigate
• No branding or site identification

Once a user is on a 404 page such as the one above then the only choice they have is the back button which may mean they are leaving the site completely or they decide to type in a new web address or perform a new search from a browser toolbar. If someone came from another website to the 404 page then you just lost a potential customer without ever really knowing.  A better option is to state in a friendly manner that the page or resource could not be found and offer options to navigate to other content.  Here are some things to add to your 404 page to make it friendly:

• Add site header
• Add site footer
• Add navigation
• Add a search bar

For the header, footer and navigation use the same elements that you use on any other page.  If you use a breadcrumb on the rest of the site consider having the breadcrumb show something such as:

Home >> 404 Error Page

Some sites will present search results or redirect visitors to the home page when a 404 occurs via a redirect.  Although this is better than displaying an unfriendly error page with nowhere to go it could confuse a visitor who is looking for specific content but keeps ending up at a search page or home page.  The frustration can be alleviated by telling the visitor the content cannot be found and offering other options.  Here is an example of a better 404 page:

You can also view the page at /images/uploads/404

For those that think they do not have any 404 pages remember that 404 pages can result from other sites linking to you.  This can cause unrealized 404 pages because someone is using a broken link.  You can get an idea of how many of these you have with Google’s webmaster tools.  You can even customize your 404 page with a snippet of JavaScript supplied by Google in webmaster tools.  Google calls it “Enhance 404 Pages” and it is under Tools > Enhance 404 pages:

What have you found works on your 404 error pages to increase customer traction?  Leave a comment and let others know what you do.