UX Designer, HubSpot Design & GDD Certified, Designer for 70+ Sites for HubSpot and Various CMSs
August 20th, 2015
Now I know what you’re thinking. “How can a 404 page delight someone? Shouldn’t the goal be to avoid these pages?”
You’re right. In a perfect world, every visitor would end up on the correct page without any unforeseen detours. Unfortunately, not even the biggest tech giants can defend against that accidental keystroke or rogue 301 redirect.
It’s times like these where you can take what would be a major inconvenience and turn it into a pleasant surprise. -- or as we say, a “delight.”
Sometimes the best discoveries are the ones that you weren’t expecting to find. Was that cheesy? Yes. Accurate? Absolutely.
Here’s a few valuable tweaks to turn your 404 pages from a negative moment for your brand into a positive one:
Be Transparent About the Issue
Start off with explaining the cause of the issue in your content. Tell them why they aren’t seeing what they expected. People hate being left in the dark.
When a visitor arrives at a generic 404 page, like the one below, the initial surge of confusion that consumes visitors is enough to turn them off from your site for good.
Sympathize with your visitors when explaining what might have landed them on this page -- a mistyped URL, a faulty redirect.
Everybody makes mistakes; addressing the issue shows them that you're human and understand, making you more personable. After all people like to feel like they’re doing business with other people, not machines. Right?
Make sure to refrain from getting too technical. Explain the issue in simple terms. Visitors are already frustrated at this point, no need for them to have a degree in computer science just to understand the issue.
Pro Who Got it Right: Propeller
Check out 404 page from Propeller (now AOL) for example. They keep the explanation short and sweet, apologize for the error, and suggest a few causes for the issue.
Note: When suggesting the causes for an issue, try not to directly blame the user. You don’t want to start your new friendship off on the wrong foot. A List Apart suggests using words such as “possibly” and “might have” to lessen the blame.
Provide Visitors with a Remedy to their Issue
Once a user knows the cause of an issue, it’s time to provide them with a solution. Giving them a few different paths to follow will help them stay on your site and find a page relevant to the one they were looking for.
Try including a few of the following options:
Site Navigation:Including site navigation will give visitors the opportunity to view all of the available paths to navigate throughout your site. It will also help create a seamless brand experience, letting users know they’ve reached the right site, just not the right page.
Search Bar:A search bar is one of the quickest ways to help users find the page they were looking for. They can search in their own terms and find the exact page they want, rather than you sending them elsewhere.
Contact Information:Giving the user the ability to reach out to you accomplishes a couple different things; It shows them that you want to work with them to help them solve their issue. It will also notify you of errors on your site that you may not have been previously aware of.
Quick Links:In addition to your site-wide navigation, you can provide visitors with 4-5 quick links that lead to the most visited pages on your site. If a user has landed on your error page there may be a good chance they were trying to visit one of those high traffic pages (I typically include a link to the homepage, a conversion page, and contact page.)
Pro Who Got it Right: MailChimp
MailChimp does a good job of providing users with the right amount of helpful links on their 404 page. They give their visitors the option to search for a specific page as well as navigate through their full site navigation.
Note: When including these elements remember to be careful about including TOO many different paths. You don’t want to overwhelm users.
Don’t Be Afraid to Add a Touch of Personality
In the words of Simon Sinek, “People don’t buy WHAT you do, they buy WHY you do it.”. This ideology should be applied to every aspect of your site.
Even if a 404 page is someone’s first interaction with your site it doesn’t mean you have come across as rigid and cold. People don’t want to do business with a company that doesn’t feel human.
Inject a bit of your company’s personality to the page and introduce them to your company’s tone. People need to be invested into your company regardless of what page they’re on.
Pro Who Got it Right: Email Center UK
Take a look at how Email Center UK adds a splash of their personality onto their page. They’ve included their actual developers on the page which lets users see the guys behind the scenes, who may actually be correcting the problem for them.
This makes Email Center UK look more human and makes me more likely to forgive an innocent 404 error. They’ve also added a bit of humor to the page playing off of the idea that one of these developers are to blame for the issue.
Create an Opportunity for a Conversion
Remember when I dropped that cheesy line earlier? “Sometimes the best discoveries are the ones that you weren’t expecting to find.”
A 404 page is the perfect time to capitalize on that saying. Use your error page to start engaging with your visitors by presenting them with a high-level offer or a linking out to a few relevant blog articles.
Taking advantage of that opportunity will help get your visitors into the funnel, help make you appear more helpful to your visitors, and depending on the offer can even help delight your current customers.
Pro Who Got it Right: HubSpot
Hubspot’s took a nice approach to including an offer on their page, by putting very subtle free trial offer link in the list of their helpful links.
They’re not beating visitors over the head with a huge graphic (remember the main point of this page is too still help your visitors), but still gives them the opportunity to convert without feeling pressured.
People make mistakes and errors are going to happen on a website. It’s how you help your visitors during this time of frustration that’s going to keep them on your site and without a bad taste in their mouth.
Give your users the proper tools to fix their issue, speak in simple terms, be personable, and don’t be afraid to continue their journey with an offer.