13 Tips to Improve Your 404 Error Page

13 Tips to Improve Your 404 Error Page

Do you want to keep your users on your website and not lose them 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 13 tips to improve your 404 error page (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 keep your visitors browsing the website. Let’s go over 13 tips for improving your 404 error page…

Note: In this article we will go over some great examples over the years and compare what their 404 pages were all about and what they are now. This will help us see if they managed to improve or not over the years.

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:

Source: Mashable

Did the 404 page change: No, it is the same. Mashable’s dev and marketing team might know the saying: “If it ain’t broken don’t fix it”. They are sticking to the same 404 page since 2017.

Here’s another example from Disney. Instead of “404 Error”, it simply says, “Uh oh! This page doesn’t exist.”

Source: Club Penguin

Note: Did the 404 page change? I can’t tell the website no longer loads.

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.

Note: Did the 404 page change over the years? Yes! But not in the way that you thought. The whole domain was bought and redirected to maxemail.xtremepush.com. Sadly the new business does not have the same sense of humor for their 404 page.

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:

Playing on facts and pointing the user in the right direction. That’s awesome! 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.

Note: Did the 404 page change over the years? yes, the design has improved! Here’s now it looks now.

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 had a great 404 page a few years ago! It simply said, “Sorry, we’ve lost that page…” with a big link to “Head Home”. The Find Waldo image was a great touch– it expressed exactly what the user was feeling (and might have even increased time on page… I was actually tempted to find Waldo myself!).

Note: Did the 404 page change over the years? Oh, yes, but sadly it no longer has the Find Waldo Image in it. It is more corporate and a lot less entertaining.

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.

Note: Did the 404 page change over the years? Oh, it did.

If you type something that might be considered as a twitter handle it leads you to a profile page. The profile might not even exist at all but it will lead you there. (That’s bad in my opinion)

And if you type something that is way off the possibility for a twitter handle it will lead you to a standart 404 page.

You could’ve done much better, Twitter! 🙂

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.

Note: Did the 404 page change over the years? Yes it did. It no longer has the search option in the 404 page web design but it has a lot more humor in it.

If you’re an eCommerce site, you could display popular products like ModCloth. What a smart way to keep visitors engaged!

Note: Did the 404 page change over the years? Yes it did. In my opinion it is better. It has more options for navigation and it has more options for the user to connect to the staff. Also the message is closely related to the niche.

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.

Note: Did the 404 page change over the years? Oh… yes it did. And for the worse, sadly. It’s sad to see such a spike in creativity lost over the years. Now it is just a plain simple 404 page.

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.

Note: Did the 404 page change over the years? Slightly. It now says the page has been eaten by a cow, not a bear. That’s concerning! 🙂

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.

Note: Did the 404 page change over the years? Nope, here’s exactly the same! 🙂

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.

Note: Did the 404 page change over the years? I can’t really tell. The website does not load and I can’t compare.

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.

Note: Did the 404 page change over the years? Yes it did, and I like it! It has more functionality and character.

9. Remind Users of Why They Love You

TED speaker and marketer Renny Gleeson uses his 404 error page to tell a story

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

Note: Did the 404 page change over the years? No, it is exactly the same! 🙂

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.

Note: Did the 404 page change over the years? Not really much, they have improved their copy but the idea stays the same.

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

Did the 404 error page change over the years? Yes it did. For the good? Well… I think not. You decide!

Here’s another humorous example of a 404 error page: who doesn’t remember this iconic scream from the 90’s?

Note: Did the 404 page change over the years? I can’t tell the website does not load so I can’t see.

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:

Note: Did the 404 page change over the years? I can’t tell the website does not load so I can’t see.

From Subcultura:

Note: Did the 404 page change over the years? I can’t tell the website does not load so I can’t see.

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.

Note: Did the 404 page change over the years? Oh, yes, and sadly it is just a plain server response.

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!

Note: Did the 404 page change over the years? Yeah.. It went quite the corporate way..

Bitly keeps you on their page with an interactive animation that moves on hover.

Note: Did the 404 page change over the years? Yes it did. Here’s how.

The frog on Twikito’s 404 error page makes a squeaky toy sound when you hover over it.

Note: Did the 404 page change over the years. No, it did not. It is the same!

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

Note: Did the 404 page change over the years. No, it did not. It is the same!

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

That’s it! 13 tips to improve your 404 error page and keep people on your website.

Leave a Reply

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