Clicking on an interesting link and getting a plain ol’ 404 Error Page is like being given a beautifully wrapped present and discovering it’s empty. A webmaster will hate 404 pages, because, while an increased number of them is a warning signal to Google, it’s the poor UX of your site that hits your credibility the hardest.
Also, your website’s bounce rate will increase – imagine a random user arriving at your page through a search engine results page and being smacked in the face with 404. Of course, he won’t stick around! Multiply such instances (as is in many cases when site owners underestimate the impact of removing pages they do not like anymore gleefully) and you are dwarfing your ranking. Backlinko’s thorough analysis of 1 million Google Search results discovered that websites with low average bounce rates are strongly correlated with higher rankings. They state further:
Google may use bounce rate as a ranking signal (although they have previously denied it). Or it may be the fact that high-quality content keeps people more engaged. Therefore lower bounce rate is a byproduct of high-quality content, which Google does measure. (Source: Backlinko)
4 reasons you should think about 404 Error Page design:
- There will be errors, so get yourself covered. Designing a smart 404 Error Page has nothing to do with thinking fatalistic – it’s about thinking futuristic. Somebody will make mistakes, whether it will be you doing something unintentionally or an external force. Be ready to plug that hole with a creative 404 Error Page, that uses friendly language to guide the user to a helpful location.
- You will annoy users. Somebody comes to your website seeking information and gets nothing. They made that journey, trusted your link and just learned that you removed the piece of content that was the only reason of them visiting your site in the first place. Don’t leave them hanging! In fact, use them: provide a way for them to report a broken link.
- It’s a lost opportunity. A lifeless 404 page, which does not help your user access information they could be looking for, is a lost visitor. Which means increased bounce rate, broken conversion path or in general a bad impression.
- They are cramping your style. The default 404 pages are just… ugly. Dip your digital brush in the digital paint bucket and make them look like they belong to your brand.
How to track 404 Error Pages?
- If you want to start tracking 404 Error Page in Google Analytics, check this cool post with tips on how to set up error page tracking in Google Analytics console.
- You can also use Google Webmaster Tools to find the sources of URLs causing “not found” errors. Google Webmaster Central Blog explains how to view crawl error sources.
Convinced that your error page needs a revamp? (If you don’t know how to see it, add/404/ to your website’s URL). Scroll down and dig deeper into these 10 great Page Not Found examples from real websites, which I am breaking down to show you how different CTAs (call to actions) and designs can prevent your visitors from leaving your site.
#1 404 Error Page with a Simple Message from TwelveSkip
TwelveSkip sits in the same industry as me, an online marketing consultancy. Her visual identity is polished, bold and steel-cut, also when it comes to her copy. Notice how she requests that the user lets her know that the website has a broken link. There is a search box underneath in case the visitor would like to give the website another go and a clean user-friendly menu on the right to aid navigation.
I like this design because mistakes happen and a webmaster asking visitors to get involved and help them flag a page error is a great way to give your visitor the impression that you are serious about your website.
#2 Awkward Llama + Easy Navigation by QuickSprout
If Neil Patel, an internationally acclaimed content marketing guru, does simple but clear 404, you should follow. This 404 Error Page from his QuickSprout website embodies Neil’s brand personality. His language and style of writing are funky but professional, not free from random metaphors which deliver his points home. Underneath the funny image of a confused llama you can see two buttons leading to key areas on his page – notice how blog comes before ‘About me’ page. This is a clever move because blogs are in general more engaging and, if interesting to visitors, tend to draw them in for longer.
I like this design because it shows the user, where his key destination should be – the blog – or who the person behind the website is – Neil Patel. When you build a 404 page, think about the pages you want your user to head over to when they stumble on an error message. What is your biggest asset that will have them hooked after this small faux-pas?
#3 Comedy Goat from BlueEgg
BlueEgg has a running undertone of fun nested on every page of their website. No wonder their 404 Error Page is no different – a short message featuring a screaming goat will have you gasping with laughter. To be honest with you, entertaining people is one of the best strategies to prevent somebody getting annoyed at you.
I like this design because it fits so well with BlueEgg’s tone of voice, their culture and affinity for making fun of life. In fact, their laid-back attitude makes me think that they would be pretty cool to work with.
#4 Aww-Factor Page Not Found from Zoella
I did a quick run through 404 Error Pages of the UK-based YouTubers I used to watch religiously in my youth and sadly registered that most of them left their 404s to their own devices. Not Zoella though! This girl’s brand is thorough and I think ‘thorough’ is the biggest compliment I can ever give to anybody. She obviously does not manage her website on her own but the picture on the 404 page is of her lovely pug, which produces an image of a brand, which takes care of everything. Since Zoella is her brand and vice versa, you immediately make the connection.
I like this design because it’s personal, it’s warm and you can’t get annoyed at it. You also are being redirected to the homepage without having to scroll back up to the main navigation menu. Nice touch.
#5 Red Bull and Their Content Marketing Focus
Red Bull is my favourite Austrian brand when it comes to online marketing. They know their stuff and push it heavily whenever an opportunity presents itself. The same goes for their 404 Error Page – clever funny two-liners is followed by an embedded video of their recent content and a button, which toggles the video playlist and gives you another episode of their sports TV.
I like this design because it’s part of their content distribution network. Even if you end up on their Page Not Found, you get to watch their recent videos and see what Red Bull has been up to. It’s a good idea to keep your 404 Error Page updated. I suggest you should treat it as a landing page if you want to get more advanced with how your website visitors consume your content.
#6 ‘Don’t Be Upset, Child’ from Airbnb
Just like a child, which just lost their treat to gravity, a user, who arrives at 404 is in a vulnerable state. Sorry, but it’s kinda true. Airbnb makes sure that once the error occurs, they give the visitor enough options to let them return onto the right path. Look at the simple menu categories lined on the left and a plain layout, which does not distract you from your options or have you roaming the page desperately looking for a way out. This minimal design stands next to formerly mentioned Neil Patel’s proposition of a 404 page and they both make sense – if somebody gets lost, you do not throw a library of maps at them, but give them a clear and short directive.
I like this design because it’s 100% user-friendly and solution-centred. Think about listing the most visited pages of your site on your 404 Error Page to facilitate safe return.
#7 Bold Simplicity by the Guardian
News outlets and media websites are my gold standard for no fluff page structures. There is no unnecessary clutter or blabber, just hard facts, clear CTA and bold sales copy following ‘take it or leave it’ rule. This is a good example of this straight-forward approach:
I like this design because of the Guardian links to all of their main sections on the website, it’s got a plain layout and a sitemap structure. Direct and functionality-based. Love it.
#8 Emotional Apologies from Hubspot
Add a little bit of emotion to your content and you get a reaction. Hubspot, one of the most active hubs of inbound marketing knowledge, opted for a simple layout with heartfelt copy and an image of a broken heart. They threw in three navigation links in their usual enthusiastic tone of voice and voila! You have a recipe for making visitors forgive your website’s unfortunate malfunction.
I like this design because it’s aligned with Hubspot’s brand identity (orange) and helps customers smoothly get out of this virtual cul-de-sac.
#9 Smart Sales Copy from TripAdvisor
I am sorry, did this once ugly tourist reviews portal win the medal for the best 404 Error Page out there? You bet. TripAdvisor used a dreamy image of a traveller’s destination and added a tongue-in-cheek dare, inviting visitors to browse for their next holiday essentials. Recently the brand started pushing their hotel booking option and this change of direction is displayed in prime spots of their most visited pages.
I like this design because it’s 100% TripAdvisor and connected to their conversion goals, enticing users to make the most of TripAdvisor’s attractive offer.
#10 Selling Clothes off 404 Error Page by Modcloth
Curiously, I couldn’t find a good example of an online store that would use their 404 Error Page for selling. I am feeling that some webmaster judge the effort to be too great to bother with designing a custom 404 page but let’s be honest here. If you are an online store your website has a lot of page publishing/un-publishing so it makes sense that you will need to cover the Page Not Found base too. ModCloth is a good example of a website, which went the extra mile. Their interactive 404 Error Page asks you to select styles from their catalogue, matching your preferences as you digest the disappointment of discovering a broken link.
I like this design because it’s the physical representation of a brand not wanting to leave their customers hanging when it failed their virtual expectations. Not to mention the web design which is intricate, interactive and simply stunning.
I hope these 10 404 Error Pages design ideas gave you the inspiration to look at your own Page Not Found and redesign it into something useful and meaningful. Don’t forget that user experience online is not a standalone concept – it’s proven that website visitors dissatisfied with website performance are less likely to pursue a physical visit. Don’t give them a reason to dislike you!