How to create a useful 404 Error page

A 404 Error page is what a user will see if they attempt to reach a part of your site that does not exist, is broken, moved or incorrectly typed. The reason we call it a ‘404’ page is because this is the HTML status code that is returned from an incorrect page.

Here are our tips to optimise the 404 Error user experience and a few ways that you can lower your error rate and keep it that way.

Let the user know why the error has occurred and tell them in a simple and friendly way. Remember you want them to stay on your site. Example below from DropBox.

dropbox-404

Add links to your top content and home page so that the user can quickly navigate away from the error.  Also embed a search form to allow the user to find the content they were originally searching for.

If you have the capability you could also dynamically display content based on their previous actions on your site.  This Is likely to have a huge impact on conversion.

Offer the option for the user to report your broken links. This will allow you to fix the issue before more users get the same experience. If you ask for their contact details you could offer a reward for helping you fix issues.

Overwrite the default Google Analytics pageview values on all 404 Error pages to allow you to append the actual 404 URL and the referring link for quick fixes. Example tag change below.

  1. ga('send', 'pageview', '404.html?page='+ document.location.pathname 
  2. + document.location.search +'&from=' +document.referrer);

The main thing to remember for your 404 Error pages is to have a little bit of fun with it. As Shakespeare once stated “Laughing at your own mistakes can lengthen your own life.” Below are some examples of 404 pages that do just that.

blaze-404
mattel-404
mailchimp-404

For help with improving your onsite user experience or configuring Google Analytics get in touch.