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.

branded-404-error-pages
A standard 404 error page, a custom page outside the website template, and a 404 built inside the 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.

keep-your-404-on-brand
Make your 404 page on-brand. Is your brand serious like the example on the left, or silly like the brand on the right?

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”).

404-error-pages-tell-them-what-happened
Each of these 404 error page examples tells it like it is. Help your visitor understand where they are by telling them their content cannot be found.

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.
on-brand-images-2
Your 404 error page is a great time to show your personality.

 

  • 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.

Use-human-language

  • 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.

404-error-page-joke-examples

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).

404-error-pages-that-serve-users

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

404-error-pages-search-option

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

404-error-pages-contact-us

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.)

Hubspot-404
In this example, Hubspot does a great job strategically directing their 404 traffic toward three conversion goals.

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.

landsend-404-crop
Land’s End uses their 404 error page to direct traffic toward four strategic shopping 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.

404-page-report-errors
These three 404 error page examples ask visitors to report errors.

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.

Comments (13)
Filed under: SEO — Tags:
Still on the hunt for actionable tips and insights? Each of these recent SEO posts is better than the last!

13 Replies to “How to Design a 404 Error Page that Saves a Sale”

It is surprising how many webmasters and designers do not take issues like this seriously. Pages will come and go within the natural life cycle of a good website. To assume that 404’s are dealt with automatically by the search engines, or worse, just don’t exist is an opportunity missed. A good descriptive article of how to maximize the opportunity.

Chelsea Adams

Mark F,

I 100% agree! 404 error pages — and even thank you pages — all too often fall victim to “out of site out of mind” neglect. And it’s such a shame, because they are such a critical part of the conversion flow process! Like I said in my article, I think it’s so important to think of 404 error pages as “damage control” pages that can help you dissipate disappointment and save a relationship when it really counts.

Glad you liked the article, Mark. And thanks for hopping into the conversation.

Also, a sidenote: If you’re interested in designing stellar 404 error pages, you might also be interested in designing stellar Thank You page. I wrote a couple articles about that, too. Here they are:

– How to Create a Thank You Page that Engages and Converts: http://www.bruceclay.com/blog/how-to-create-a-thank-you-page/

– How to Create a Thank You Page Call To Action: http://www.bruceclay.com/blog/thank-you-page-call-to-action/

– 4 Thank You Page Examples That Got It Right:
http://www.bruceclay.com/blog/4-thank-you-page-examples/

Cheers!

Durga Prasad Kundu

Hello Chelsea. Thanks for sharing such helpful content. Yes, most of the time while designing a web-site, less emphasis given to the 404 page. As you described here, now we have an idea of how to design a 404 page in good manner. The way of acknowledging what happened with a sweet message is a great idea to design a 404 page. Hope, we will share some more info in near future.

Hello Chelsea. Thank you for sharing your insight. I stumbled upon your page while searching for 404 designs and you just gave me some ideas. I checked your old posts as well and they’re all very informative. With that said, I just bookmarked your page! Thanks again and I look forward to reading your future posts. Cheers!

Chelsea Adams

Diane,

Hello, friend! I am glad that my 21 404 error page designs (and design suggestions) could get your inspiration spark ignited — and I really appreciate you taking the time to let me know you explored the website and decided to bookmark. Everyone wins! I love when that happens! Thanks for making my Monday.

:)

These are amazing suggestions and very witty, too.

hi,
404 errors are very important, especially in e-commerce, out buyer if landing on 404 page, can be easily discouraged to do shopping in our e-shop.

I totally agree with:”there will never be a one-size-fits all model” and Do the Best You Can to Serve the Customer! Thank You.

Chelsea Adams

Joe,

Sometimes the wisest words are the most straightforward, eh? Think about what you’re doing, why you’re doing it and what you want from it, then approach with ethics and everything you do will be better off. Brilliant.

Thanks for jumping in!

I am thankful I’ve found your blog. It would help me a lot since I just started to create my website. Thank you for sharing.

This I find hilarious as I went to look at the new 2015 debate….and got a 404 error!!!! Brilliant timing

I Love to see those kind of pages that create an affliction and imbibes a continuity among my visitors.

I Always wonder will good 404 pages indirectly affect seo?

Chelsea Adams

Great question, Traffikon! Here is an involved answer.

A custom 404 error page built to decrease bounce rate will help conversion, but it won’t necessarily help organic rank. On the other hand — making sure your 404 error page is setup correctly and relaying a 404 error message (not a soft 410, or a redirect to another page, such as your homepage) can affect your organic rank, because it affects how Google crawls and interprets your site. You can learn more about the SEO impact of soft 404 errors on this Google Webmaster Help page: https://support.google.com/webmasters/answer/181708

LEAVE A REPLY

Your email address will not be published. Required fields are marked *

Serving North America based in the Los Angeles Metropolitan Area
Bruce Clay, Inc. | PO Box 1338 | Moorpark CA, 93020
Voice: 1-805-517-1900 | Toll Free: 1-866-517-1900 | Fax: 1-805-517-1919