Optimizing Error Pages: Creating Opportunities Out Of Mistakes

In this article, we’ll review a few techniques that will help Web designers and UI professionals improve their error pages in order to engage visitors and improve the experience. As C.S. Lewis said, “Failures are finger posts on the road to achievement.” Website designers should take this to heart.

We’ll focus on error and maintenance pages, from both a tracking and usability perspective. You’ll find examples on how to use analytics and defensive design in order to optimize the user experience on those pages.

First, let’s go over error pages and how to optimize them. We’ll try to answer the following questions:

  • Does your 404 page succeed in engaging visitors, who are already frustrated from not finding what they came for?
  • How do you decrease the number of people who arrive on your 404 page?
  • How do you monitor 404 page traffic efficiently?

After, we’ll discuss techniques for improving conversion rates, even when the website is under maintenance. Here are some of the questions we’ll consider:

  • How to time maintenance periods wisely?
  • How to increase visitor engagement using a maintenance page?

Optimizing 404 Pages

The topic of improving error messages was thoroughly covered in Defensive Design for the Web, a book written by the 37signals team. They go over 40 guidelines to “prevent errors and rescue customers if a breakdown does occur.” In guideline 16 (page 93), they advise us to customize our “Page not found” error pages, and they offer interesting insight into how to create error pages:

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 home page and/or other pages that might be relevant;
  5. A search engine that customers can use to find the right information;
  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 on Smashing Magazine (part 1 and part 2) and was inspired to create my own 404 page. But because understanding and analyzing online behavior is so important, I asked myself, Is what I’ve come up really good? How can I make it better? Below we’ll go over a few techniques to both monitor and optimize 404 pages.

If you do not have a customized 404 page, please refer to this simple explanation of how to set one up.

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, even once. Yet it is hard to overemphasize the importance of consistently monitoring it. For example, if a prominent blog links to your website but the link is broken, this will make for a very poor experience for users (who will not find what they expect) and for search engines (which will not crawl the right content). Below are a few tips on tracking those pages seamlessly using Google Analytics. (The screenshots were taken from the new Google Analytics version, which is still in beta, so your mileage may vary.)

Create an alert on Google Analytics.
As seen in the screenshot below, you can set Google Analytics to alert you each time 404 traffic reaches a certain number of visits a day. This way, you have to do the work only once, but you’ll be alerted every time there is a problem.

Google Analytics Alerts
This is where you create a custom alert to track 404 page views.

Track your 404 page as a goal.
Setting the 404 page as a goal on Google Analytics will yield important (and otherwise unattainable) information. For example, you’ll be able to see the three steps that visitors took to get to this page. In addition, setting this goal makes it easier to find traffic sources with broken links.

Google Analytics Goal
Create a goal to track 404 page views in your reports.

Add the 404 content report to your dashboard.
Every report in Google Analytics can be added to the dashboard. By adding the 404 page, you will be able to constantly monitor visitor trends on the page.

Google Analytics Dashboard
Add a 404 goal to your dashboard.

Check your navigation summary report.
This will help you understand what visitors do upon leaving this page, which is important for knowing how to optimize it.

Google Analytics Navigation Summary
The navigation summary for a 404 page on Google Analytics.

Track internal searches from this page.
If your 404 page does not have a search box, seriously consider adding one. From searches performed on this page, you will be able to understand what people were expecting to find, and you will get an idea of what links to add to the page. Below are the metrics you will be able to track with this feature:

  1. Total unique searches
    The number of times people started a search from the 404 page. Duplicate searches from a single visit are excluded.
  2. Search result page views after searches
    The average number of times visitors viewed a search results page after performing a search.
  3. % search exits
    The percentage of searches that resulted in an immediate exit from your website.
  4. % search refinements
    The percentage of searches that resulted in a new search using a different term.
  5. Time after search
    The average amount of time visitors spend on your website after performing a search.
  6. Search depth
    The average number of pages that visitors viewed after performing a search.

Decrease Your Errors (Fixing Broken Links)

Monitoring 404 pages is important, but that alone won’t do you any good unless you act on it. Taking action means doing all you can do to decrease the number of people who reach the 404 page and improving the experience of users who do reach it (see the next section). Below are a few tips on finding and fixing both internal and external broken links.

Check the navigation summary report.
This will show you the route that visitors took on your website to get to the 404 page (and thus tell you which pages contain broken internal links). You will see the percentage of visitors who arrived on this page from internal sources as well as from external sources; and the internal sources will be listed in this report (see the navigation summary screenshot above).

Check the sources of traffic that lead to the 404 page.
This will clearly show which websites have broken links to your website. With the list, you should either contact the sources or create 301 redirects to the correct pages.

Google Analytics Landing Pages
Traffic sources that lead visitors to a 404 page.

Usability Tips to Improve 404 Engagement

Basically, usability practices for error pages are not much different from general usability practices. Below are a few tips to help you increase the conversion rate of your 404 page. For our purpose, conversion is essentially the click-through rate (CTR), because our main objective is for visitors to find what they’re looking for.

  1. Be simple and focused.
    Appealing images and an original design are important, but a clear focus is critical. Users are already disoriented from landing somewhere they were not expecting, so make their lives easier by presenting a clear action to take.
  2. Know your visitors.
    Many 404 pages use humor, including geek humor. Keep in mind that you are not your visitor, and jokes can be misunderstood, so use humor wisely.
  3. Let the visitor decide.
    As I said in “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.” The best way to understand what works for visitors is to present a few page versions and let the best one win. (See the review of advanced A/B testing techniques by Paras Chopra.)

Optimizing Maintenance Pages

Not long ago, I worked on a website that had weekly downtime for maintenance, about one to two hours a week. The owners chose the day with the least traffic for maintenance, but I believe they did not completely understand how this affected the website and, more importantly, how they could have optimized the user experience and taken advantage of the downtime. In a post on Smashing Magazine, Cameron Chapman provides a good checklist for designing effective maintenance pages:

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

Two other rules are especially important to satisfy and engage visitors…

Time Maintenance Periods Wisely

Common practice for timing maintenance is to choose the time of day or day of week that has the lowest traffic. But this overlooks an important point: websites should be optimized for performance, not for traffic. By choosing the maintenance time based on visitor count, you could be optimizing for traffic and not for dollars. A better way to decide would be to run an hourly report and check what time of day or day of week has the lowest conversions.

Increase Visitor Engagement Using Maintenance Pages

Increase visitor engagement while the website is in maintenance mode? Yes, you read that right. While in maintenance, you have a great opportunity to promote your other marketing channels: offline stores, Facebook fan pages, YouTube channels and Twitter accounts.

Maintenance Page Example
The maintenance page for Online Behavior.

Parting Thoughts

Errors happen, and we must be prepared for them. We must lend a hand when visitors are most frustrated and make them feel comfortable again. People’s patience and understanding are decreasing, and users have a world of choices just a 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!

(al)

↑ Back to top

Daniel Waisberg is the Analytics Advocate at Google, where he is responsible for fostering Google Analytics by educating and inspiring Online Marketing professionals. Both at Google and his previous positions, Daniel has worked with some of the biggest Internet brands to measure and optimize online behavior. Daniel is also the Founder of Online Behavior. You can find him in Google+ and Twitter.

  1. 1

    A 404 page always make me scared. :) Thank you for nice article, Daniel Waisberg.

    5
    • 2

      I give you +1, because your comment just reminded me about the importance of a 404 page :D

      For the writer, thank you, the “Create an alert on Google Analytics” is new for me :D I just realized about this feature on Google Analytics after reading your article :)

      6
  2. 3

    As an end user I really appreciate if I get some proper information what happens and not just a cryptic server message. Thanks for the article!

    5
  3. 4

    This really helped me in understanding the importance of 404 pages.

    2
  4. 5

    Daniel, great article!
    I really like your maintenance page – “Bad Timing” : )

    Also, what do you think about using the Traffic Sources info to display relevant data to the user. For instance based on search queries, it is possible to display related content, and maybe even create a “Did you mean” feature.

    Again, loved your article – looking forward to more of this kind.

    4
    • 6

      Daniel Waisberg

      May 18, 2011 10:07 pm

      Thanks for the comment Michael. I think that using visitor information that we have about the visitor in order to provide a customized experience is a very wise thing to do. This will help the visitor navigate their way out of the frustration of getting an error page.

      0
  5. 7

    A great article. Thanks for sharing! it is an eye opener for me

    0
  6. 8

    Sites should take the blame on their 404 pages. I hate it when a 404 page tells me that maybe I misspelled something or suggests that since the page no longer exists I shouldn’t be looking for it. You broke the link; the 404 is your fault. Acknowledging that is a courtesy I’d like to see on more 404′s.

    -4
    • 9

      A 404 page is not always the sites fault. You said yourself that you may’ve misspelled the link!

      0
      • 10

        Daniel Waisberg

        May 18, 2011 10:10 pm

        While I agree that sometimes it might be the visitor’s fault, what does it matter whose fault it is? The website does not have to blame the visitor, I think it is important to look at 404 pages in a positive light: “Somehow you got an error, now what? Let’s make your experience awesome anyway!”

        2
        • 11

          @Daniel – I agree with you 100%! It doesn’t matter who is at fault; what matters is that even if the visitor makes a mistake, we use that opportunity to connect with him and continue our conversation.

          It is all about the experience we provide our visitors. :-)

          Nice article..Daniel!

          3
  7. 12

    Nice article! Though there are better tools then Google Alerts and Google Analytics to track exceptions.

    Instead of Google Analytics, I highly recommend using Google Webmaster, which gives you a clear picture of how Google is viewing your website, including crawl errors (404′s, 500′s, etc.), stats, suggestions and search query details.

    Instead of Google Alerts, I’d recommend an exception tracking solution such as getexceptional.com or hoptoadapp.com. Both of these have fees associated, but most definitely worth it. Also, both include JavaScript exception tracking (beta) which is super helpful now that a lot of business logic is moving to the client-side.

    Best,
    George

    AREA17.com

    2
    • 13

      Daniel Waisberg

      May 18, 2011 10:18 pm

      Thanks for the tips George. While I think Webmaster Tools is a great tool, and it should certainly be used to track errors, I chose to use Google Analytics in the post as I believe it provides a more encompassing solution. Also, Webmaster Tools is becoming more and more integrated with Google Analytics, so hopefully one day they will be one and this comment will be irrelevant :-) (see this article http://searchengineland.com/google-webmaster-tools-advances-towards-analytics-savviness-64303).

      As for the tools you mention, I will check them. But would you share with us why you think Google Alerts is not good enough?

      0
      • 14

        Hey Daniel,

        Thanks good point on GA. I think what I like about Webmaster are the crawl errors since the Googlebot is indexing all pages regularly whereas GA is relying on human traffic. So with Webmaster we can find errors before humans find them. But you are totally right, if they both became one, that’d be a good thing!

        Google Alerts is a good solution. I’ve heard of other people setting up a Gmail account and using threads to create roadmaps of which errors to fix first. I guess both these solutions work well on a small scale. But when working with large applications, they become overwhelming to handle.

        But even for small applications, I’d still recommend one of these exception trackers (if you can afford it). The difference is that it actually reports in real time and collects all the information you need to fix the problem. Also they integrate directly with your app and your code repository so when you fix an issue, you have a history (so if the issue crops up again, you can look back, see what was happening and what you did to fix it, etc.).

        Last but not least, Google Alerts is depending on a page (I believe), but many errors happen on a page without the entire page being an error. Especially today with so much javascript and AJAX. These services will help with all website errors not just the 404, 500, etc.

        I guess the bottomline is that Google Alerts works well to alert you of the problem whereas these services help you manage them over time.

        Best,
        George

        0
  8. 15

    Great article. I added some humor and incorporated my artwork into my 404 page a couple of years ago and it has made a big difference. I only know that because I get an occasional comment about it being so “cute”. (And then I go track down the 404 and fix it.)

    Tracking the 404 hits through Google Analytics is a great idea – I’m going to add that to my list of updates. Thanks!

    0
  9. 16

    I like this article a lot:)

    1
  10. 17

    Great article! This is a good opportunity for websites to add a bit of personality not to mention attention to detail.
    My non profit is for Crohn’s disease and colitis- it’s empowering and frank when it comes to an otherwise embarrassing disease. The 404 page is a silhouette of legs with their pants down, and the text says “OOPS! You didn’t make it” Something that patients, who are, of course, the target market, will fully understand and be able to laugh at.

    1
  11. 23

    Good article, thank you. How do you setup the goal if the 404 page isn’t always at the same URL? For example if I go to http://www.smashingmagazine.com/testing123, the URL remains constant even though I’m getting a 404 error. Does that automatically hit the 404 file and trigger the 404 goal in Analytics if it’s setup?

    0
  12. 25

    Laszlo Baranyai

    May 18, 2011 10:42 pm

    Nice article! Your approach is the quality assurance and user management. I always appreciate such feature as visitor and handling this issue reflects professionalism of the company/website as well. I would propose another functionality of the 404 service script. I am also using it to monitor breaking attempts. One can learn a lot from logs, e.g. what could be potential threats for a website. Scanning scripts try to find the weak services and entrance points.

    1
  13. 26

    I’ve made my website’s 404 page as user-friendly as possible. However, I never considered tracking 404 errors. Thanks for the valuable tip!

    0
  14. 27

    I’ve been meaning to write this article for a while Daniel, but now I won’t have to – great job!

    One additional tip is that often the CMS doesn’t give a tracked URL pageview in GA for 404 by default – think this is the case on our WordPress blog. So you will often need to add this to the custom 404 to register the page view and add referrer info I think.

    http://www.google.com/support/analytics/bin/answer.py?answer=86927

    1
  15. 30

    Great Post Daniel. Keep it up!

    1
  16. 31

    Funny how the first example is 37signals’ “defensive design for the web” with a link to the site which is currently down and is against all what you suggest in the article. Completely different scenario opposed to the maintenance screenshot you published in the article. http://twitpic.com/4zmtvo

    0
    • 32

      Daniel Waisberg

      May 20, 2011 4:32 am

      What an irony of destiny! The website had a temporary down time and the maintenance page was shown. Unfortunately it was not loaded properly when you checked it… But thanks for the screenshot for future reference :-)

      0
  17. 33

    Jonathan Hayward

    May 19, 2011 10:26 am

    You might take a look at the 404 page at http://JonathansCorner.com/missing.html

    0
  18. 34

    Daniel, great article. Very timely for my company’s redesign project. Do you think the 404 page deserves a unique search field if there is always one present in the header of our site?

    Just wondering if we should direct people to the top of the page, or drop another search box directly within the context of the 404 message.

    Would love your thoughts. Thanks!

    1
    • 35

      Daniel Waisberg

      May 20, 2011 4:44 am

      Kristin, I think that you should either include a very prominent search box on the body of the page or add a strong visual clue (e.g. an arrow or a person pointing at it) to the existent search box. But from my experience you should certainly direct your visitor attention to it.

      0
  19. 36

    Daniel, you certainly made the most out of this unexpectedly interesting topic :)

    Very insightful.
    Thanks!

    1
    • 37

      Daniel Waisberg

      May 20, 2011 1:59 pm

      I like your definition ‘unexpectedly interesting’; we should open a movement or something: “The 404 Followers: a place for people who like the unexpected!”

      1
  20. 38

    +5000… cool and very nice idea.

    2
  21. 39

    First of all, its a great article, it shines some light on the important subject of what a user does when they reach a dead-end.

    I like the idea of tracking 404 error pages to easily get alerted when something is wrong. On my own site i use event tracking, for monitoring 404 pages, and submit the page URL as a value. Mainly cause the URL of my 404 pages changes depending on what site the user requested, making it harder for me to assign a goal to track it.

    1
  22. 41

    Great article. I hadn’t thought of using GA to track errors this way.

    0
  23. 42

    Yofie Setiawan

    May 22, 2011 4:58 am

    Well, i also created a unique 404 error page for my portfolio website, maybe you wanna checkout :D http://yopdesign.com/error

    0
  24. 43

    I’ve made many a custom 404 page (some creative, so purely functional), but for most clients and even my own site, unless the site was previous HUGE and had tons of info, a custom error page seems unnecessary. Instead, I just modify the .htaccess file to say “ErrorDocument 404 http://www.doman.com/index.html” where domain is of course your base domain. That way everything that would generate a 404 simply redirects to the homepage.

    0
    • 44

      Daniel Waisberg

      May 24, 2011 2:42 am

      Nic, I think the problem with this is that your visitors might keep trying the same error because they were not told that, in fact, the link was broken or that the page does not exist anymore. I believe it is always important to tell the visitors what happened instead of sending them somewhere else. In addition, I think the 404 is an opportunity to be creative and even humorous (as we saw in some of the examples quoted in the article and in the comments), which might be a good opportunity to bring customers closer to you.

      0
  25. 45

    belajar hipnotis

    May 30, 2011 7:43 pm

    thanks …
    nice info

    0
  26. 46

    Personally, when I get a 404 page I get pissed off. If it was my mistake, than OK, my bad, but if it’s the site’s mistake…that’s annoying.
    So, when I see a cool 404 page I just feel joy that the webmaster had some guts to admit the mistake, and when its a cool one, like I saw on 888poker (the 404 page with the monkey, example here -888poker.com/texas/ ), I don’t mind if the site did have an error.

    -1
  27. 47

    I am looking forward to using GA in a totally different manner. Thanks for all the details on GA.

    0
  28. 48

    Thanks Danniel,

    you gibe me an great idea, whatchout for the Tiescher…

    thanks.

    0
  29. 49

    Thanks for share with us this very useful info I really appreciate.
    Sarchi

    0
  30. 50

    I have a 404 page on my extranet site which has the flash game Jet Pac on, as a form of compensation.

    I have a form on it so they can submit a message about their wasted journey but I never thought of setting an alert or a target in our analytics. Job for Monday morning.

    0
  31. 51

    I’ve never thought I could do monitoring 404 pages on Analytics. This is a good timing as I’ve just created a new custom 404 page for one of my website. Very interesting…

    0
  32. 52

    Anders Ekkje Slettebø

    September 19, 2013 10:23 am

    In the alert setup, what does the condition “Matches regular expression” actually means? How does this differ from “Contains”?

    0
  33. 53

    By the way, related to errors but more on a performance level, I’d also recommend one of these:

    https://scoutapp.com/
    http://newrelic.com/

    Lifesavers in working our performance issues, especially with Ruby on Rails applications! New Relic uses the Apdex scoring system (http://en.wikipedia.org/wiki/Apdex) measuring user satisfaction based off server/application performance.

    The cool thing is that you can see the performance of your system down to the second (any second of any day in the history of your app) and see where the bottlenecks are (eg. application, server, server software, etc.).

    -1
  34. 54

    Daniel Waisberg

    May 20, 2011 4:37 am

    That is very interesting to think about crawlers as indicators to where the errors are before visitors get there. It is not always the case (depends on crawling frequency), but I totally agree with using Webmaster tools.

    I think the idea of using Gmail threads “to create roadmaps of which errors to fix first” is very neat, I love it! As for scalability, I am not sure I agree with you but you might have a point.

    Last, you ceratinly can use functions like Event Tracking instead of Pageviews to track errors, it does not have to be dependable on pages.

    Thanks for your good comments and insights.

    0
  35. 55

    Daniel Waisberg

    May 24, 2011 2:44 am

    Thanks for sharing Yofie. While I like the overall idea of the page (the image), I think you could have made the links to additional pages more prominent. I think visitors can have difficulty to keep navigating the website as the links you included are very small and hidden.

    0

Leave a Comment

Yay! You've decided to leave a comment. That's fantastic! Please keep in mind that comments are moderated and rel="nofollow" is in use. So, please do not use a spammy keyword or a domain as your name, or else it will be deleted. Let's have a personal and meaningful conversation instead. Thanks for dropping by!

↑ Back to top