A successful website should encourage a visitor to explore more content on your site.
If they’re arriving on an error page, you’re failing at the first hurdle.
Straight out of the box, these error pages look pretty ugly.
But there is a way to turn these error pages to your advantage and have your 404 page put in an appearance in the hall of fame for brilliant 404 pages.
Let’s look at some of the things you can do to turn around this potentially diabolical user experience into one which works for you, instead of against you.
And we’ll look at examples of creative 404 pages along the way.
What you're about to read
1. Turn the error into an opportunity
Landing on an error page is frustrating for the user and a missed opportunity for you as a website owner.
The default version of an error page leaves the visitor with only one option and that’s to hit the back button.
When you’ve worked hard to get someone to your site in the first place, this is one massive leak that we need to fix.
Designing a 404 page that encourages users to explore other parts of your site keeps them moving forward towards your content.
Giving them a list of navigational links they can follow is a good start, but give them some useful options, such as:
- most recent blog posts
- most popular resources
- current special offers
- upcoming events
I’m not suggesting that you present ALL of those, but pick one and run with it.
AirBnB add an animated cartoon and a simple series of links.
Including a search bar on that page too gives them back some control.
Pipcorn does a good job of that with their simple, but beautifully animated error page.
2. Make it unique
Steve Lambert’s error 404 page features a cringe-worthy video of him in an empty room with a headline to suggest that you’ve landed on the most awkward 404 page on the internet – which you probably have.
3. Reinforce your branding
M&M’s 404 page has an image of a worried-looking M&M which can’t help but make you smile and sends you back on your way to the home page.
4. Use humour and/or personality
Adding some lighthearted animation or quirk can keep your visitors happily engaged. Mailchimp achieves this with their error 404 page.
5. Keep it simple
This page doesn’t need to be complex or cluttered. Keep in mind that functionality on this page is key. This page isn’t the final destination, so be sure to signpost visitors to an area of the site where they’re going to easily find what they’re looking for.
Here’s a really straightforward 404 page from Designer News
Ikea does a similarly good job with their 404 page at keeping it simple, and they also manage to squeeze in a few of their products too.
6. Reflect your brand personality
I’ve saved one of the best for last as I love the simplicity of this 404 page from Marie Kondo who is all about decluttering
How to create your error 404 page
Most WordPress themes have a template for a 404 page. I use and teach Divi and it makes it really easy to create an error 404 page.
If your theme doesn’t offer a template for the 404 page, there are plugins which make it really straightforward for you to create a normal page and assign it as a 404 page. You can check out the 404Page plugin to get you started.
It doesn’t need to be complicated or take a lot of time to pull together a fabulous error 404 page, but it can go a long way to enhance your user experience and give your brand a boost.