10 awesome 404 pages for wasting time and encouraging user engagement

A part of my role on Edit Agency’s Insights Team is removing manual link penalties issued by Google. Part of our link auditing process involves manually looking at each website linking back to the client. In other words: I look a lot of websites during my working day.

This post isn’t about manual link penalties or link auditing, it’s about cool 404 pages that people here have spotted and shared. It began with Team Insights e-mail saying:

“Found a link on this site, check out the 404:”

With this image attached…

Dog 404

(I can’t seem to find the site – if you know it, comment below!)

This then started a chain of our favourite 404 pages which then spread to the entire agency!

Without further ado – here are our favourite 404 pages:

The Engaging

The Engaging

Found At: Personal website of web developer Benjamin Reid – http://nouveller.com/404/

What is this 404? In this 404 page, Reid recreates a scene from the 1993 classic, Jurassic Park. You can attempt to hack the Jurassic Park Console, but after three unsuccessful attempts…

The Engaging 2

…Ah Ah Ah! You didn’t say the magic word!

Why is it awesome? Reid’s website showcases some of his development projects and extending that to the 404 page is a very clever idea.  He even wrote a making of post for anyone interested in learning from his experience. Not only is the page an example of good coding a fun user experience, but failing to “hack the console” displays Reid’s social details and clicking “Reboot and try again” leads the user back to the homepage.

The Creative

The Creative

Found At: Digital Publication software company Flipping Book –  http://flippingbook.com/404/

What is this 404? You start out at The Lost Page and you are given an exciting treasure map with the option of finding a treasure!

If you follow the map through the site, you will see the “continue the game” flag appear on each page you visit.

Flipping Book

 

When you continue the game, you eventually find… the treasure!

Treasure

A very cool 25% off their products.

Why is it awesome? The route the map takes you on is a conversion funnel dressed up in an interesting way. You go back to the homepage, learn about the company, learn about the products, are given the 25% discount and then lead onto the pricing page. For a potential customer, encountering a 404 page can be a massive turn-off. However, Flipping Book made it very engaging and adding the lucrative bonus of 25% discount may encourage those users would might have been discouraged by seeing a 404 page to continue to consider Flipping Book as their service provider.

The Easter Egg

Lush

Found at: Ethical high street health & beauty product retailer, Lush – https://www.lush.co.uk/404/

What is this 404? It looks like a regular 404 page, but the image links to a product you won’t find anywhere else on the website.

Why is it awesome? This campaign is now expired, but for Easter 2014 Lush launched their own “Easter Egg Hunt”. If you found the Easter Egg (Lush’s Error 404 Bath Bomb) you could add it to your basket for free. The only way to find the Easter Egg was to access this 404 page. Clicking the image above took you to a product page which listed the Error 404 Bath Bomb – for free.

Bath Bomb

Lush’s user base is hardly going to turn down a free bath bomb. And if they’re paying for shipping they might as well buy a few other things while they’re there…

A clever campaign that makes people think of choosing Lush at Easter.

The Retro

The Retro

Found at: Personal website of French web developer Romain Brasier – http://www.romainbrasier.fr/404.php?lang=en

What is this 404? If you were gaming in the 90’s you probably remember having to rescue Lemmings from their potential doom. Brasier’s 404 allows you to play a variant of this classic.  Hover over the Lemmings to give them an umbrella or return to the main website to let them die (poor Lemmings).

Why is it awesome? The score counter encourages people of a competitive nature to share this page with their friends. Similar to Benjamin Reid’s page, Brasier’s Lemmings shows off his fun side and his programming side for people who are interested in learning more.

The One that helps you Back on Track

Virgin Cruises 404

Found At: Richard Branson’s luxury cruise brand, Virgin Holidays Cruises –  http://www.virginholidayscruises.co.uk/404page.phtml

What is this 404? You’re stranded and you don’t know where you are. This page allows you to book a ship out which an easy to use widget. It even comes with a handy map when you click “Navigate your way off”!

Virgin map

Why is it awesome? Firstly, it was designed by Tami from our Design Team. Secondly, it immediately gives the user something to do in a fun way that fits the Virgin Holidays Cruises brand very well. Combining the thought process of “404 – page not found – stranded – desert island – get a boat out” with lovely visuals is a fantastic bit of storytelling to get people to where they want to be.

The Kooky

The Kooky

Found At: Social, Technology and Business new hub – Mashable – http://mashable.com/404/

What is this 404? A really close up picture of a foot and the good news that Mashable have found your missing socks.

Why is it awesome? The design is perfect for Mashable’s large and clear web design. They acknowledge the fact that getting a 404 isn’t fun and make a joke of it, leading into the ability to “find more stuff” (after finding your missing socks). Simple way to guide people back to whatever they were hoping to find.

The Audience Aware

The Audience Aware

Found At: Collaborative programming management giant, Github – https://github.com/404

What is this 404? A cute reference to the “These aren’t the Droids you’re looking for scene” from Star Wars Episode IV: A New Hope with the added ability to find whatever you are looking for.

Why is it Awesome? If you did a Venn diagram of “programmers” and “people who like Star Wars” I imagine the overlap would be relatively large. Github obviously know their audience. Their audience probably don’t need too much handholding on how to navigate a 404 page, but there is a nice search box at the bottom for them to quickly find the page they’re looking for.

The Hypnotic

The Hypnotic

Found At: Human vs Zombies MMORPG, Brain Chef! – http://brainchef.com/error

What is this 404: Just one simple text box that appears to tell you that the page hasn’t been found. It then continues to type at you in a very flattering way.

Why is it awesome? Given the fact that Branded3’s 404 page is a Hypnotic Cat I felt I had to include one “hypnotic” page. Brain Chef!’s ever populating page definitely increases the time on site. The primary users of the website are there to play a game, and this page evokes the feeling of old text-based adventure games.

The Awkward

The Awkward

Found At:  Personal website of artist Steve Lambert – http://visitsteve.com/404.html

What is this 404? As the title says, it’s the most awkward 404 page you’ll ever encounter. You land on it and Steve starts trying to make awkward conversation with you. He recommends how you could get off the page and what cool things you could be looking at on his site.

Why is it awesome? Everyone has experienced an awkward conversation in their life. Awkward makes people nervous. The video is a clever way of telling you what’s on his site while actively encouraging you to get off this page. It’s very creative and a nice reflection of Lambert as an artist.

The Good Cause

The Good Cause

Found At: Website that wants to use 404 pages for the better – NotFound.org http://notfound.org/404

What is this 404? A simple bold statement: “Page not found – neither is Edward Greathead” along with details as to who to contact if you know anything about the missing person. This 404 generates a random missing person each time.

Why is it Awesome? Everything about NotFound.org is awesome. They encourage people to make better use of their 404 page by raising awareness of missing persons by turning it from a standard 404 page to a Missing Persons 404. Nearly  200,000 people go missing each year in the UK. If using a 404 page can help reunite a person with their family – that in itself is awesome.

Takeaway: Considerations for your own 404 pages

When creating a 404 page for your website, here are some things to consider:

  • Always direct the users to another page on the website. The homepage is a good start, but most popular products or blog posts may be another good option. A search box would be well placed here.
  • Know your audience. Would they appreciate something fun or favour a more direct push in the right direction?
  • Don’t blame your users for ending up on a 404 page. Use language that shifts blame to the website, not the user.
  • If you can use your 404 page for a good cause, consider it!

Related Posts