In this article I’ll be reviewing a few techniques that will help Web designers and UI professionals to improve their error pages in order to engage visitors and improve overall website experience. As C. S. Lewis once said, “Failures are finger posts on the road to achievement”. Web designers should take this to heart. I’ll be focusing on error and maintenance pages, both from tracking as well as usability perspectives. I’ll also be providing a good number of examples on how to use analytics and defensive design in order to optimize user experience for such pages.

Image designed by Daniel Bronfen

First, let’s go over the error pages and cover the questions on how to optimize them efficiently:

• Is your 404 page succeeding to engage visitors, following the frustration of not getting what they are seeking for?
• How does one decrease the number of people landing on a 404 page?
• How do you monitor your 404 page traffic efficiently?

Following, I will discuss techniques that can be used to improve conversion rates even when the website is under maintenance. Here are some of the questions you’ve probably been asking yourself:

• How do I choose maintenance time wisely?
• How do I increase visitor engagement while using a maintenance page?

Optimizing 404 Pages

The subject of improving error messages was thoroughly described on Defensive Design for the Web, a book written by the 37signals team. They cover 40 guidelines to “prevent errors and rescue customers if a breakdown does occur.” Guideline #16 tells us to offer customized “Page Not Found” error pages; and they provide an interesting insight into how to create error pages (page 93):

“Instead of merely saying a page is not found, your site needs to explain why a page can’t be located and offer suggestions for getting to the right screen. Your site should lend a hand, not kick people when they are down.

Smart things to include on your 404 page:

1. Your company’s name and logo,
2. An explanation of why the visitor is seeing this page,
3. A list of common mistakes that may explain the problem,
4. Links back to the homepage and/or other pages that might be relevant,
5. A search engine that customers can use to find the right information and
6. An email link so that visitors can report problems, missing pages, and so on.”

A while ago I came across the great examples shared here on Smashing Magazine (part 1 and part 2) and was very inspired to create my own 404 page. But since I believe it is so important to understand and analyze online behavior, I asked myself, “Is it really good enough? How can I make it better?” On the sessions below I go over a few techniques that can be used in order to both monitor and optimize 404 pages.

If you do not have a customized 404 page, please refer to this simple explanation on ‘How to Setup a 404 Page‘.

Monitoring 404 Page Traffic

How often do you check the traffic to your 404 page? Most of the companies I have worked with never did, not once. The importance of monitoring 404 pages constantly should not be underestimated. For example, if a website is linked from a prominent blog and the link is broken, this will cause a very negative experience to users (which will not find what they expected) and also to search engines (which will not crawl to the right content). Below, I show a few tips on how to track those pages in a seamless way using Google Analytics.

Note: The screenshots were taken using the new Google Analytics version, which is still in Beta, so your mileage may vary.

Create an Alert on Google Analytics

As you can see in the screenshot below, it is possible to set alerts on Google Analytics that will let you know each time your 404 traffic reaches a determined number of visits per day. This will enable you to do the work once and be alerted every time there should be a problem.

This image shows how to create a custom alert to track 404 pageviews.

Track Your 404 Page as a Goal

Setting the 404 page as a goal on Google Analytics will produce important information that can be achieved only through goals, e.g. the last three steps before getting to this page. In addition, it will make the task of finding traffic sources with broken links much easier. Below is a screenshot of how to do it:

This image shows how to create a goal to track 404 pageviews on your reports.

Add Your 404 Content Report to Your Dashboard

Every report on Google Analytics can be added to the dashboard. By adding the 404 page to your dashboard, you will be able to constantly monitor the trend of visits to your 404 page:

This image shows how to add the 404 goal to your dashboard.

Check Your Navigation Summary Report

This will help you understand what visitors do after landing on a 404 page, which is very important in order to optimize it:

This image shows the navigation summary for a 404 page on Google Analytics.

Track Internal Searches

If you do not have a search box on your 404 page, you should seriously consider adding one. Through searches performed in this page you will be able to understand what people were expecting to find there and you will get insights on which links you should add to the page. Below are the metrics you will be able to analyze if you use this feature:

• Total Unique Searches
  The number of times people started a search from the 404 page. Duplicate searches within a single visit are excluded.
• Results Pageviews/Search
  The average number of times visitors viewed a search results page after performing a search.
• % Search Exits
  The percentage of searches that resulted in an immediate exit from your site.
• % Search Refinements
  The percentage of searches that resulted in another search ( i.e. a new search using a different term).
• Time After Search
  The average amount of time visitors spend on your site after performing a search.
• Search Depth
  The average number of pages visitors viewed after performing a search.

Decrease Your Errors (Fixing Broken Links)

Monitoring your 404 pages is very important, but it is useless if you don’t take action upon it. Taking action means doing all you can do to decrease the number of people getting to the 404 pages and improving the user experience of the page to your visitors (next section). Below, I provide a few tips on how to find and fix both internal and external broken links.

Check Your Navigation Summary Report

This will help you understand where your visitors are coming from within your site, i.e. it will tell you which pages contain internal broken links. You will be able to see what percentage of the visitors have arrived to this page from internal and external sources; the internal sources will be listed in this report (see navigation summary screenshot above).

Check the Sources of Traffic That Land on the 404 Page

This will clearly show which websites have broken links leading to your site. Once you have the list, you should either contact these websites or create 301 redirects to the right pages.

This image shows sources of traffic that are leading visitors to the 404 page.

Usability Tips to Improve 404 Engagement

Basically, the usability tips for error pages should not be too different from website usability common practices. Below are a few of the elements that can definitely help to increase the conversion rates of 404 pages; in this context conversion should be considered Click Through Rate (CTR), as our main objective is for visitors to find whatever they were looking for:

1. Simplicity and Focus
   It is very important to have appealing images and an original design. However, it is critical to have a clear focus on the page; users are already puzzled that they got somewhere they were not expecting, so we must make their lives easy and provide a clear action for them to take.
2. Know Your Visitors
   Many 404 pages use humour and technical jokes. It is important to keep in mind that we are not our visitors, and jokes can be misunderstood, so use them with responsibility.
3. Let Your Visitors Decide
   As I wrote in the Web Analytics Process: “Customers should tell us what to do, not consultants, friends or feelings; data and online surveys are the place to look for customers’ needs.” I believe the best way to understand what works for your visitors is by providing them with a few page version and let the best win (check the advanced A/B Testing techniques written by Paras Chopra).

Optimizing Maintenance Pages

Not long ago, I worked with a website that had weekly maintenance down times, about 1-2 hours a week. They chose the day with the least traffic for the maintenance, but I believe they did not completely understand how this affected the website and, more importantly, how they could improve the design of the page in order to optimize user experience and take advantage of this failure. In a previous post at Smashing Magazine, Cameron Chapman provides a good checklist to be used when designing effective maintenance pages:

1. Keep your maintenance pages simple and useful.
2. Realize it’s an inconvenience to your visitors.
3. Don’t be afraid to use humor.
4. Give your maintenance page the same look and feel as your regular site.
5. Let visitors know when your site will be back.
6. Provide recommended content.
7. Invite your visitors to come back when the site is online again.
8. Inform your visitors about the progress of the maintenance.

In additional to the tips provided above, I believe two additional rules can be especially important to please and engage your visitors.

Chose Maintenance Time Wisely

A very common practice for choosing maintenance time is to look at the traffic of the website and choose the time of the day, or day of the week that has the lowest visitor traffic. However, this misses an important point: websites want to optimize for performance, not for traffic. By choosing the maintenance time using visitor count, we might be optimizing for traffic and not for dollars. The best way to get this number would be to run an hourly report and check what is the time of the day (or day of the week) in which the conversions are the lowest.

Increasing Visitor Engagement Using Maintenance Pages

Improving visitor engagement while the website is in maintenance mode? Yes, you read it right. While your website is in maintenance mode you have a great opportunity to promote your additional marketing channels: offline stores, Facebook fan pages, Youtube channels, Twitter accounts, etc. Below you can find an example from the Online Behavior maintenance page:

This image shows a Maintenance page example.

Closing Thoughts

As we mentioned above, errors happen, and we must be prepared for them. We must give a hand to our visitors when they are most frustrated and help them feel comfortable again. The level of online patience and understanding is decreasing and users have a world of choices just one click away, so website owners cannot let one small error get in their way.

What are your thoughts on this subject? Feel free to share them with us in the comment section below!

© Daniel Waisberg for Smashing Magazine, 2011. | Permalink | Post a comment | Smashing Shop | Smashing Network | About Us
Post tags: 404, errors, maintenance, measurement, navigation, optimization