Do you want to increase conversions on your 404 error page? This humble page on your site can actually make a big difference, if you optimize it properly. In this post, we’ll share 15 tips to improve your 404 error page and increase your conversions (with examples).
Did you know that the average lifespan of a webpage is about 100 days? Links tend to go bad over time due to moved or deleted content or changes in permalink structure.
In fact, you can expect to lose about one quarter of your links every seven years.
When a user lands on one of these “rotten” links, they will see your 404 error page. They’ll also see it if they mistype a URL, or click on a broken or truncated link.
You should never leave your users hanging with a run-of-the-mill 404 error page. By default, the 404 error page goes against all good principles of user experience design. It will make your visitors want to rip their hair out and flee your site immediately.
On the other hand, if you optimize your 404 error page, you can reduce your bounce rate and increase your conversions. Let’s go over 15 tips for improving your 404 error page…
1. Use Human Language
The first thing you need to do to improve your 404 error page is replace all the technical mumbo jumbo with normal human language.
Remember: most people don’t know what a “404 error” even means. All your users know is that they didn’t get the page they wanted. Using technical terms that they don’t understand will only frustrate them more.
Instead of the default 404 error message, use phrases normal human beings can understand, such as:
“Page not found.”
“Sorry, we can’t find the page you were looking for.”
“Oops! Something is broken.”
“Oh dear, this link isn’t working.”
Here’s an example of a 404 error page that uses relatable (and fun) copy:
Here’s another example from Disney. Instead of “404 Error”, it simply says, “Uh oh! This page doesn’t exist.”
2. Be Apologetic
Never point the finger at the user for the error– you don’t want to make them feel stupid. Instead, be apologetic.
When explaining what went wrong, don’t use absolutes. Instead, use words like “might have” or “possibly”, so the user doesn’t feel like it is their fault.
In fact, go ahead and place the blame on yourself! By slapping yourself on the wrist, you’ll actually cause users to love you more.
Here’s a great example from Email Center UK. They not only put the blame on themselves, but they actually ask you to punish one of their development team by allowing you to pick who to fire.
When you choose which person to fire, you’ll see the results of your decision on the next page. Here’s what happens when you fire Luke…
Poor Luke!
Not only is this little game a cathartic exercise for Email Center’s users, but I’m sure it also significantly reduces their bounce rate.
3. Give Possible Reasons for What Went Wrong
Good user experience design says that when you deliver an error message, you must explain what went wrong.
Here is a list of possible reasons for the 404 error:
Mistyped URL
Copy-and-paste error
Broken link
Truncated link
Moved content
Deleted content
De-mystify your users by explaining these to them. Here’s a great example from Hootsuite:
The last two bullet points are a nice touch… “You were looking for your puppy and got lost” or “You like 404 pages”. Yeah right, good one Hootsuite!
4. Give Users an Immediate Solution
The most annoying part of 404 error pages is that it’s a dead end: there’s nowhere to go next. That’s why some of the best 404 error pages provide an immediate solution to their users.
For example, you could ask users to check their spelling. Better yet, you could perform a spelling check yourself on the requested URL, and suggest any close matches.
Here’s an example from Brett Terpstra. When I type in http://brettterpstra.com/2016, I get a list of posts that include the keyword “2016”.
Make sure that you hyperlink all of those suggested posts so that the user can click through to them right away.
5. Help Them Find What They’re Looking For
Another way to fix the dead end is by allowing the user to browse around your site until they find what they were looking for.
To help them find it, your 404 error page could include:
Menu navigation
A link back to the homepage
A link to your sitemap
A search bar
Links to popular posts
Links to popular products
The Hustle simply says, “Sorry, we’ve lost that page…” with a big link to “Head Home”. The Find Waldo image is a great touch– it expresses exactly what the user is feeling (and may even increase time on page… I’m actually tempted to find Waldo myself!).
Twitter automatically fills out the search bar for you based on the requested URL, so you can simply hit the search button to find what you were looking for.
MailChimp also includes a search bar on their 404 error page, along with an animated image of a hulk-like version of their monkey mascot.
If you’re an eCommerce site, you could display popular products like ModCloth. What a smart way to keep visitors engaged!
6. Don’t Overwhelm with Too Many Choices
Although you want to give users a way to find what they’re looking for, you don’t want to overwhelm them with too many choices.
Stick to one primary call to action, and possibly a secondary call to action so that they aren’t paralyzed by choice. Remember: too many options means your user will be unhappy with whatever they ultimately decide.
Here’s an excellent example from Android Dev 101. The simple image does it’s job of eliciting a chuckle, and the only choice is to go back to the homepage.
Milkable doesn’t even need an image on their 404 page (except for their logo). The copy says it all, and the big “Back” button is almost irresistible to click.
7. Empower Users to Report the Problem
When you get an error message, don’t you wish you could do something about it? Give your users a chance to report the problem, and they’ll feel instantly better.
All you have to do is include a contact form on your 404 error page. Here’s an example from UX Booth.
When you click on the link to “let us know so we can fix it”, you’ll be taken to their contact page.
Here’s another example from Path. What’s nice about this design is that the “Contact Path Support” link is the clear, primary call to action. But– they have still included a footer navigation menu in case you’d rather browse around.
8. Maintain Brand Familiarity
The terrible thing about the default 404 error page is that it doesn’t look like your brand at all. There’s no familiarity for your user to take comfort in, so it feels like they’ve just fallen into a barren wasteland.
When designing your 404 error page, make sure that it maintains the same look, feel and voice of your brand. Rather than disorienting your users, it will be re-assuring for them to experience the same brand that they have come to know.
Dropbox’s 404 error page is one of the best examples of this. They use the same hand-drawn illustrations that their users love, but this time the box is an empty, tangled up maze.
9. Remind Users of Why They Love You
TED speaker and marketer Renny Gleeson said of the 404 error page,
“A simple mistake can tell me what you aren’t. Or remind me why I love you.”
Use your 404 error page to remind users of why they came to you in the first place. What is your unique value proposition? What makes you different from your competitors?
Magnt’s 404 error page uses a Venn Diagram quite creatively to explain the error. This reminds users of why they love Magnt: because they are very creative. In fact, they come right out and say it: they’re “very creative”, “witty” and “innovative”.
Copyblogger’s 404 error page pokes fun at themselves, while simultaneously reminding users of what they do: provide smarter solutions for communicating with your prospective customers. They go on to list out their offerings, and finish up with a call to action to register with their site for free.
10. Use Humor to Diffuse Anger
It’s a proven psychological principle that humor diffuses anger. So when you’ve made a mistake, do everything possible to make your users laugh.
When Tumblr experienced a serious error causing their site to go down, millions of users were miffed. However, they recovered that goodwill when they uploaded this hilarious image of wild “Tumbeasts”.
Here’s another humorous example of a 404 error page: who doesn’t remember this iconic scream from the 90’s?
11. Translate into Multiple Languages
Especially if you serve audiences in different countries, don’t forget to translate your 404 error page into multiple languages.
Yes, even your cleverly designed 404 error pages need to be translatable for users across the globe.
Here are a couple great examples of 404 error pages in languages other than English…
From Raptxt:
From Subcultura:
12. Increase Time on Page with Interactivity
Increasing time on page and reducing bounce rate is important for keeping your website in Google’s search results. A really great way to do that is by adding an interactive element to your page.
Adding interactivity isn’t rocket science. You just need to give your users something to do on your 404 error page. The more fun or entertaining that thing is, the better it will work to increase time on page.
Good Dog Design included this interactive missing dog sign on their 404 error page.
Focus Lab entices you to click on their mysterious “…or see what happens when you click here” link…
…which then opens up into a funny video.
If you watch the video (and it’s kind of hard not to), you’ll increase time on page by 2 minutes right there!
Bitly keeps you on their page with an interactive animation that moves on hover.
The frog on Twikito’s 404 error page makes a squeaky toy sound when you hover over it.
However, you don’t even need fancy animations to increase time on page. Distilled uses an infographic-style illustration with a witty dialogue that makes for fun reading. (The only thing I’d test here is adding a call to action at the bottom.)
13. Boost Search Traffic with Internal Links
Neil Patel says that he has boosted traffic for his clients by as much as 9% in one month by simply linking to internal pages on the 404 error page.
The reason this works is because internal links help Google to index the pages on your site. The more pages on your site that get indexed, the more you can increase your search engine traffic.
I should note that Neil used an algorithm to add 25-50 random internal links to the 404 error page, so these links would automatically change each time the 404 error page was loaded.
However, randomization is more important if you have a really large site with lots and lots of pages to be indexed. If you are a smaller site, you can simply include a list of not yet indexed posts, organized by category perhaps (so the user can easily browse through them).
14. Reduce Bounce Rate with Exit-Intent
Every 404 error page should be using OptinMonster’s signature exit-intent technology to reduce bounce rate. It’s so easy to install, and it works to increase your conversions every time.
Exit-intent works by detecting when a user is about to abandon your 404 error page, and then presenting a popup right at that moment. This prevents you from losing over 70% of visitors who leave your site, never to return.
Here’s an example of a popup that appears when the user is about to bounce from a 404 error page.
(This was created using OptinMonster’s Canvas theme.)
This popup is a welcome site for the user because it assists them in finding what they need. And it works wonders for you as the website owner because it gives them one last chance to keep browsing your site.
15. Use MonsterLink to Improve Conversions
Wouldn’t it be great if you could actually turn your 404 error page into a high-converting lead generation page? You can do that quite simply by adding a MonsterLink.
MonsterLinks are one of OptinMonster’s cool features that allow you to turn any link, button or image into a 2-step optin process.
Here’s an example of a MonsterLink from our own 404 error page (which converts like gangbusters).
The 2-step optin requires the user to initiate the process by clicking on the link first before the optin form appears.
Here’s what that 2-step process looks like:
These types of optins are proven to boost conversions by as much as 785%! Click here to add a MonsterLink to your 404 error page.
That’s it! 15 tips to improve your 404 error page and increase conversions.
If you enjoyed this article, you may also want to check out 11 reasons why your emails go in the spam box (and how to make sure they don’t).
What strategies are you going to implement on your 404 error page? Let us know in the comments!
The post 15 Tips to Improve Your 404 Error Page and Increase Conversions (with Examples) appeared first on OptinMonster.