Have you tried Flywheel? Learn moreJoin the best designers and creative agencies in the world. Learn more

×
Creative 404 pages

Creative 404 pages 7 tips to make an error look cool (and convert!)

Uh oh! You’ve stumbled on a 404 page!

Generally speaking, landing on a 404 page is frustrating for your users. It’s also bad for your SEO, as most people’s first reaction is to click away, sending your bounce rate tumbling.

But 404 pages don’t have to be a nightmare for your user experience. Instead of ignoring your 404 page or using a dull, generic template, you can use it as an opportunity to reinforce your branding and even encourage some conversions.

What is a 404 page?

A 404 page is a standard HTTP error code that appears when the page you’re seeking cannot be found on the server. Essentially, it’s a tool that tells users a page is unavailable.

There are various reasons for its appearance. The page could have been moved or deleted, or the link broken. It could also indicate that the user typed in the wrong address. This last option shows that finding a 404 page can be out of your control. So the best thing you can do is design a user-friendly, creative page that delights your users and directs them to the right place.

Here are seven tips and tricks to designing a creative, memorable 404 page.

We believe design matters! Want to know why? Check out these lessons learned from famous design flaws.

1. Lose the technical mumbo-jumbo

It’s important that people can tell at a glance that they’ve landed in the wrong place. However, it’s likely that many users won’t know what a 404 page actually is. So avoid the technical mumbo-jumbo and tell it to them straight.

Use normal, human language, such as:

  • ‘Oops! Something is broken’
  • ‘Uh oh! This page doesn’t exist’
  • ‘Oh dear! This link isn’t working’

Injecting a little personality and humor can go a long way to alleviating some of the frustration of ending up in the wrong place.

Hootsuite gets this spot on with its witty 404, depicting a lost icon and suggesting some sensible and amusing reasons for why users may have landed on their 404 page.

layout by flywheel creative 404 page convert hootsuite screenshot

2. Shoulder the blame

The goal of a 404 page is to keep the user on the website, even if they’ve landed on a page that doesn’t exist. So you don’t want to make them feel stupid for typing in an incorrect address.

Never point the finger of blame at your users, even if they made the mistake. Instead, take ownership of the problem and apologize for the error.

Emailcenter UK takes this one step further by accepting the blame and asking you to choose an employee to fire.

layout by flywheel creative 404 page convert emailcenter UK screenshot 1

The humor continues once you’ve chosen which employee gets the boot.

layout by flywheel creative 404 page convert emailcenter UK screenshot poor james

Poor James! (Gotta love the developer nerd/Star Trek humor!) 

3. Offer an immediate solution

The worst 404 pages are the ones that leave users hanging, telling them they’re in the wrong place but not offering a solution.

Instead, you want to extend a helping hand. Your goal is to ensure your users stay on the website and find what they came for. So suggest some tools to help them out.

Good options include a link to the homepage or sitemap, a search bar, a link to your most popular posts/products, or a contact form so they can report the error.  Use one or a combination of these, but take care not to overwhelm the user with choices – the less clutter there is, the higher their chance of choosing the most useful option.

HubSpot has an excellent example, offering a link to their blog, main product page, and inviting users to sign up for a free demo (great conversion tactic!).

layout by flywheel creative 404 page convert hubspot screenshot broken heart

4. Keep it on brand

One of the biggest mistakes brands make with their 404 pages is leaving them void of personality. Indeed, you land on their error pages and you could be anywhere online.

The key is to keep your 404 page on brand. Maintain the same look, feel, and voice as the rest of your website to reassure people that they’re in the right place.

The Financial Times has designed a fabulous 404 page that will appear to finance nerds everywhere, which asks leading economists why the page couldn’t be found. All you need is a highbrow sense of humor and a solid understanding of economics theory…

layout by flywheel creative 404 page convert financial times screenshot

5. Make them smile

People can become angry or frustrated if they can’t find what they’re looking for. The best way to defuse that anger and keep a potential customer is by making them smile.

Offer an amusing graphic, animation, or video that will amuse people and leave a lasting impression on them.

Audiko is a UK company offering free ringtones. They created a vibrant 404 page that’s filled with London imagery, including Sherlock Holmes looking for clues. It includes a link to the homepage and a search bar.

layout by flywheel creative 404 page convert audiko screenshot with magnifying glass cartoon

And who can fail to smile when they accidentally land on LEGO’s cute 404 page. Come on guys, plug it back in…

layout by flywheel creative 404 page convert lego man holding wall plugin cord disconnected

6. Be interactive

Introducing an interactive element to your 404 page will increase the time spent on the page while decreasing your bounce rate. The more fun and entertaining you make it, the longer they will stay.

Daniel Karcher Film Design Studios created an excellent animation of an empty train pulling into a subway station. There are lost and missing-themed posters lining the station and excellent sound effects. You’re invited to hop onto the carriage and ride the train for a while, and there are plenty of opportunities for you to find your right stop and hop off.

layout by flywheel creative 404 page convert Daniel Karcher Film Design Studios subway scene with graffiti directions

Android, meanwhile, appeals to the gaming crowd by offering an interactive game to everybody that lands on its 404 page.

layout by flywheel creative 404 page convert android screenshot game

Once you’ve pressed play, you launch a cute little game that involves catching desserts in the right pipe. It’s quite addictive once you get going…

layout by flywheel creative 404 page convert android screenshot game

7. Regularly check your links

Finally, while adding a creative 404 page is fun, you don’t want it to become a regular sight for your users. It’s recommended that you run a frequent check of your site for broken links to ensure you keep them under control. About once a month is a good period of time.

Using a plugin like Broken Link Checker is a useful tool.

404 pages used to be a huge source of frustration, but it doesn’t have to be that way. By designing a user-friendly page that gently guides people in the right direction while bringing a smile to their faces, they can be a great way of keeping your users entertained, introducing your brand, and helping to solve people’s problems. Just ensure that they don’t see them too often!

What are your tips for designing a great 404 page? Can you add anything to our list? Tell us in the comments below.

2 Comments

Join the discussion

Share this article:
Get more great content in your inbox

More articles

Get content like this sent directly to your inbox!

Install WordPress locally free
[if lte IE 8]
[if lte IE 8]