How to Design a 404 Error Page that Saves a Sale

Whatever baby wants, baby gets.

Unless baby mistypes a URL or tries to navigate to a bookmarked page that was moved or retired in 2012. In that case — regardless of what she wants — baby gets a 404 error page.

When baby gets a 404 error page and not what she wants, there’s a good chance she’s going to be confused, annoyed, or frustrated. Nobody likes it when baby doesn’t get what she wants…

So, what do we do?

Turn adversity into opportunity, of course!

I like to think of the 404 error page as your damage control page. Your customer just tried to go to a page on your website, and now they are faced with disappointment. The 404 error page greets them immediately at their peak moment of disappointment – what a perfect opportunity for you to tell them you couldn’t care less with a machine-generated white-screen error message. Said no one ever. This is your time to deflect those bad feelings and offer a solution that inspires positive feelings!

Follow these five steps to get on your way to creating custom 404 error pages that make your customer feel like you’re there for them, even when your content can’t be.

Five 404 Error Page Design Tips that Keep Visitors On-Site

1. Keep It Branded and On-Brand

Keeping your 404 page branded means your 404 error page should make it clear that the visitor is still on your website. This can mean keeping your custom 404 error page within the template of your website – complete with standard top and footer navigation – or, simply making sure to include a logo if you build a custom 404 page outside your standard template.

And oh, what a difference a logo can make. Compare the three examples below: a standard machine-generated 404 page, a custom page outside the website template, and a 404 message built inside the standard website template.

The second two options approach the 404 error page in very different ways, but both make it clear which website you’re on. In the first one, there’s no logo and no clues; who knows? Which experience do you want your users to see?

Keeping the 404 error page on-brand means every word and image you use accurately represents the personality and tone of your brand. If you are a serious brand like The New York Times, keep your messaging professional and straightforward. If your brand voice is conversational and appreciates a good laugh here and there, your 404 page can be a good time to toss in an ice-breaker joke. Whether or not you apologize or say thank you also falls into your brand voice guidelines. Only you know how much formality and silliness your brand voice allows. Figure it out, and follow it to a T. Always.

2. Acknowledge What Happened

Your visitor was looking for a page, and what they’re seeing isn’t that page. Help them understand what happened by telling them what happened. You can do it with your own spin, but do tell them there was an error and that – for one reason or another – the page they are looking for cannot be found. You can choose whether to mention the “one reason or another” like Adidas does in the center example below (“maybe it’s moved, or maybe the URL is incorrect”).

3. Thwart the Back Button by Showing Your Personality

When a customer is dished up a 404 page they are going to be surprised; they were expecting one thing and they are seeing another. It’s inevitable. Whether this is an annoyed surprised or a pleased surprised is up to you (and your web designer). 404 error pages are rarely seen, so why not use your brand personality to make this rare occurrence memorable in a good way?

Consider:

• Using an on-brand image to visually engage the visitor. With the right image, you may even be able to turn your visitor’s inconvenient “this is annoying” moment into a fun Easter Egg that makes him/her like you even more.

• Use your headlines and body copy to make the exchange feel more human. It’s often much easier to accept an apology from a fellow human than it is to accept an access denied notice from a robot.

• You know that awkward moment at dinner when someone just needs to break the tension with a joke? This tactic works wonders on 404 pages as well. Nobody likes being disappointed; including an on-brand joke on your 404 page is a great way to break the “something went wrong and you didn’t get what you want” tension.

4. Do the Best You Can to Serve the Customer

“Focus on the user and all else will follow.” Wise words from Google with deep-seated truth. Your visitor lives in a cyber world where they are surrounded by endless purchasing options; if they try to buy some shoes on your website and your website offers a “Page Not Found” dead-end, then they have no choice but to use the back button and head toward someone else’s online shoe store to make their purchase. Unless you can use your 404 damage control page to offer resources that help them find what they need, or discover new options they never knew they needed…!

Think about the needs of your personas; what are their needs?

• Make an educated guess about what they were trying to accomplish when they landed on this error page and offer some links that help them accomplish that task. This can save sales, turn disappointment into satisfaction, and help keep bounce rate low(er).

• Add a search box and a link to your sitemap to make it easier for them to find what they need on their own.

• Make it easy for them to contact you if they need help.

5.  Serve Yo’self! Ask for What You Need and Funnel Conversion

Your 404 error page is your damage control page, but it is also your opportunity page. Remember, we’re striving to turn adversity into opportunity, here! Think of this page as an opportunity for you to keep the ball rolling… and why not tilt the ramp so the ball rolls strategically toward one of your conversion funnels? Always keep the user first, but there’s no reason to assume that customer happiness and conversion completion are mutually exclusive.

For instance, if one of your conversions is lead generation, why not offer a link to your free demo page, like Hubspot does? (See example below.)

The key is to tell them what you want them to do. If you want them to shop women’s clothing, give them a link that says shop the women’s section – don’t send them to the home page where they might get lost or distracted. Notice in the Land’s End example, below, that they give you links to shop women’s, men’s and kid’s, or home goods, but they don’t mention heading to the home page once? Their conversion goal is clearly to increase sales in their top four categories.

The 404 error page is also a good time for you to ask them to help you solve the problem. Error pages are delivered when something goes wrong. Sometimes it is user error (a mistyped URL, for instance), but other times is a hidden website error (a moved, removed or broken page). By landing on your 404 page it’s likely your visitor just discovered an error on your website; use this page as an opportunity to ask them to send you an error report. Make sure to include a link that makes it easy for them to take action.

On the flip side, make sure you don’t tell them to do something you don’t want them to do – like “return at a later time.” You want them to stay put.

404 Errors are Inevitable: Be Proactive!

The world is an imperfect place. Screws fall out all the time, URLs are mistyped and – as much as you try to prevent it – web pages get moved, removed, or even broken. Since error pages are inevitable, I vote we take the proactive route and create the best darn damage control pages possible.

Since every brand is different, there will never be a one-size-fits all model for how a custom 404 error page should look. Instead, marketers should use the five steps outlined in this post as a guide to create a custom 404 error page experience that represents their brand, serves their customers, and supports their conversion goals.

Chelsea Adams Brooks is a long-distance cyclist, aspiring cob house builder, schema/analytics/algorithm obsessor, and a former senior content writer at Bruce Clay Inc.

See Chelsea's author page for links to connect on social media.