A Better 404: What to Do When Visitors Get Lost

Picture this. You are exploring a giant theme park and looking for a bathroom. You see something promising and turn down a path, only to end up in a dead end. You see an employee on their break so you ask for help. Which response would you prefer: a cute joke loosely related to the theme park or some concrete directions to the nearest bathroom?

I’d rather have help, and I’m willing to bet you would, too. Yet how many sites take the other route and leave lost visitors with a cute joke instead? In researching best practices for this article, I came across plenty of sites listing the “best” 404 pages. Nearly all of them had large images with some kind of funny or cute joke. Only a few of them offered help beyond a link back to the homepage. I think we can do better.

How did they get there?

Your visitors should never intentionally arrive on a 404 page (unless you happen to write an article about 404 pages or get featured for having a good one). The most likely scenarios for getting to a missing page are:

• following an incorrect link on an external site. It happens. Someone either copied a link incorrectly or their site links to a page that no longer exists.
• following a broken link from inside your site. Everybody makes mistakes sometimes. As sites grow, occasionally links will change and break. Another common internal broken link is forgetting to add the protocol when linking to external sites. Leave off the http:// and a link to www.google.com suddenly links to yoursite.com/www.google.com.
• by typing a URL incorrectly or copying an incomplete link. Maybe your visitor saw a link on a flier, maybe part of a URL was cut off by the link being pasted across multiple pages in a magazine. Whatever the reason, typos happen.
• visitors trying to “navigate” by changing the URL. This happens primarily with tech savvy users who are trying to find other areas of your site by educated guesswork.

No matter how they got there, it’s rarely your visitor’s choice to end up on a 404 page. They may arrive frustrated or confused. Put yourself in their shoes and create a page that will gently nudge them back in the right direction.

How can you help?

In rethinking the 404 page for UXcellence, I asked myself what tools I had at my disposal to help my visitor get back on track. Here’s what I came up with and how I used them to make a better 404 page:

• Header: I tell visitors clearly that there was an error, I apologize for it, and offer to help them.
• Search: The first route I offer the user is a search box, but I take it one step further. I automatically populate the search box with the last portion of the URL (converted to a space separated string). Because the tail of the URL is typically the most specific element, this gives me my best shot at guessing what they were really looking for and helping them find it.
• Report: Next I have a brief message in case the visitor wants to help report the problem. A prominent call to action button links them to the contact page. Adding variables to the link lets me pass along data to prefill the subject line AND record the URL of the page in question.
• Topics and Tags: Next I include a list of the overarching topics for the site (with a count of the number of articles) and the top 20 tags (again with a count). If the search option isn’t working for my visitor, perhaps they’ll have better luck browsing through the site.
• Recent Articles: Finally, just in case, there’s a feature list of the most recent articles to guide the visitor to the latest content.

Best practices

Regardless of how you set up your 404 page, here are some best practices to keep in mind.

• Don’t blame the user. It’s highly unlikely they arrived there on purpose. Apologize and offer to help them instead.
• Don’t use jargon. Many people know what a 404 error is but not everyone. You can include the error code, but you should also include a concise message explaining it in friendlier terms, like “This page was not found”.
• First help your visitor. Your number one task on a 404 page is to get the visitor back on track to where they were going.
• Maintain your brand style. Your 404 page shouldn’t be a radical departure from the style of the rest of your site. Otherwise visitors may think they’ve ended up on a different site altogether and could lose some trust.
• Keep it simple and concise. Don’t overwhelm your visitors. Aim to fit most or all of the content of the page within a single scroll.
• Use humor sparingly and wisely. Adding some fun to your 404 page is fine, provided it’s not at the expense of your visitors getting to where they need to go. Keep in mind while sprinkling in some personality that some visitors may arrive frustrated or confused. Put yourself in their shoes to see how well that humor will land.
• Test it. As with anything, test your 404 page to find where it works and ways to improve it.
• Lose the ads. Ideally this page will be seen only rarely. The amount you’d make from ads on a 404 page is not worth the potential performance hit of those ads.

Want more?

Here’s advice from a few other great resources:

• Make your 404 pages more useful — Google Webmaster Central Blog
• The Perfect 404 — A List Apart
• 5 Tips to Make Your 404 Page More Usable — UX Booth
• 404 Best Practices — CSS Tricks

Originally published at uxcellence.com on February 1, 2017.