So, what do we do?<\/em><\/p>\n Turn adversity into opportunity, of course!<\/p>\n 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 \u2013 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<\/em>. This is your time to deflect those bad feelings and offer a solution that inspires positive\u00a0feelings!<\/p>\n Follow these five<\/em>\u00a0steps to get on your way to creating custom 404 error pages that make your customer feel like you\u2019re there for them, even when\u00a0your content can’t be.<\/p>\n Keeping your 404 page branded means your 404 error page should make it\u00a0clear that the visitor is still on your website. This can mean keeping your custom 404 error page within the template of your website \u2013 complete with standard top and footer navigation \u2013 or, simply making sure to include a logo if you build a custom 404 page outside your standard template.<\/p>\n 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.<\/p>\n The second two options approach the 404 error page in very different ways, but both make it clear which website you\u2019re on. In the first one, there\u2019s no logo and no clues; who knows? Which experience do you want your users to see?<\/p>\n 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<\/em>, keep your messaging professional and straightforward. If your brand voice is conversational and appreciates a good laugh\u00a0here 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.<\/p>\n Your visitor was looking for a page, and what they\u2019re seeing isn\u2019t that page. Help them understand what happened by telling them what happened<\/em>. You can do it with your own spin, but do tell them there was an error and that \u2013 for one reason or another \u2013 the page they are looking for cannot be found. You can choose whether to mention the \u201cone reason or another\u201d like Adidas does in the center\u00a0example below (\u201cmaybe it\u2019s moved, or maybe the URL is incorrect\u201d).<\/p>\n 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\u2019s 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?<\/p>\n Consider:<\/p>\n <\/p>\n \u201cFocus on the user and all else will follow.\u201d Wise words\u00a0from Google<\/a> 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 \u201cPage Not Found\u201d dead-end, then they have no choice but to use the back button and head toward someone else\u2019s online shoe store to make their purchase. Unless you can use your 404 damage control page<\/em> to offer resources that help them find what they need, or discover new options they never knew they needed\u2026!<\/p>\n Think about the needs of your personas; what are their needs?<\/p>\n Your 404 error page is your damage control page, but it is also your opportunity<\/em> page. Remember, we\u2019re striving to turn adversity into opportunity, here! Think of this page as an opportunity for you to keep the ball rolling\u2026 and why not tilt the ramp so the ball rolls strategically toward one of your conversion funnels? Always keep the user first, but there\u2019s no reason to\u00a0assume that customer happiness and conversion completion are\u00a0mutually exclusive.<\/p>\n 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.)<\/p>\n The key is to tell them what you want them to do<\/strong>. If you want them to shop women\u2019s clothing, give them a link that says shop the women\u2019s section \u2013 don\u2019t send them to the home page where they might get lost or distracted. Notice in the Land\u2019s End example, below, that they give you links to shop women\u2019s, men\u2019s and kid\u2019s, or home goods, but they don\u2019t mention heading to the home page once? Their conversion goal is clearly to increase sales in\u00a0their\u00a0top four categories.<\/p>\n The 404 error page is also a good time for you to ask them to help you solve the problem<\/strong>. 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\u2019s 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.<\/p>\n On the flip side, make sure you don\u2019t tell them to do something you don\u2019t<\/em> want them to do \u2013 like \u201creturn at a later time.\u201d You want them to stay put.<\/p>\n The world is an imperfect place. Screws fall out all the time, URLs are mistyped and \u2013 as much as you try to prevent it \u2013 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.<\/p>\n 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.<\/p>\n","protected":false},"excerpt":{"rendered":" Whatever baby wants, baby gets. Unless baby mistypes a URL — then baby gets a 404 error page.<\/p>\n So, what do we do? Turn adversity into opportunity, of course!<\/p>\n 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 \u2013 what a perfect opportunity for you to tell them you could 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!<\/p>\n Follow these five steps to create a custom 404 error page that makes your customer feel like you\u2019re there for them, even when your content can’t be. <\/p>\nFive\u00a0404 Error Page Design Tips that\u00a0Keep Visitors On-Site<\/h2>\n
1. Keep It Branded and On-Brand<\/h3>\n
![\"branded-404-error-pages\"](\"https:\/\/www.bruceclay.com\/blog\/wp-content\/uploads\/2014\/12\/branded-404-error-pages.jpg\")
<\/a><\/a>2. Acknowledge What Happened<\/h3>\n
<\/a>3. Thwart the Back Button by Showing Your Personality<\/h3>\n
\n
<\/a>\n
<\/a><\/p>\n\n
<\/a><\/p>\n4. Do the Best You Can to Serve the Customer<\/h3>\n
\n
<\/a><\/p>\n\n
<\/a><\/p>\n\n
<\/a><\/p>\n5. \u00a0Serve Yo\u2019self! Ask for What You Need and Funnel\u00a0Conversion<\/h3>\n
<\/a><\/a>404 Errors are Inevitable: Be Proactive!<\/h2>\n