How to Create Better 404 Pages

AB Tasty › Blog › UX Design › How to Create Better 404 Pages

Nearly all of us have come across a broken link when browsing online: a “404 Error, Page Not Found” message instead of the expected content. It can be a frustrating experience, not finding the information you’re looking for, and often it marks the end of the journey with that site.

Along with high bounce rates, having multiple 404 error status codes across a website can have a negative impact on overall SEO performance, which is why it’s important to minimize these types of pages. But, the occasional error message may be unavoidable. What then?

In those instances, it’s important to think of clever and creative ways to optimize these pages to keep visitors from leaving the site. If done well, it could even help to save what would have been a lost lead. 

We looked at some of the more engaging 404 page designs to see how they managed to avoid the frustration of a “page not found” error. Here’s our rundown. 

404 Errors and the User Journey

A 404 error occurs as an HTTP status code, telling a user that the server couldn’t find that page on the website. It can occur if the URL was misspelled or if a user tries to follow an expired link that had been previously bookmarked. 404 errors can also happen when a webmaster changes the URL of a page and forgets to redirect users to the new version. 

404 errors will happen even to the best websites, so why not tap into their potential and create a productive feature that has a higher chance of generating leads?

Four Tips To Turning 404 Journeys Round

Having a broken link doesn’t need to have a negative impact on your website. Try incorporating one of the following features when designing a 404 error page to keep visitors on the site.

1. Add A Search Function

Adding a search bar on a 404 page offers the user another alternative to finding the product or page they were looking for. It’s a simple but effective way to keep them on your site by offering them an alternative solution. 

Search functions should be included on a website as a form of navigation but also as an opportunity to gather user-led searches. Most websites will have some kind of search function for users. Why not use the search box function on a 404 page as an opportunity to gain user-led data from your on-site search function too, by capturing all of the searches made from the 404 pages and creating additional content to serve their requests!

Proving even the professionals can suffer broken links, the SEO company Moz has an internal search function on their 404 page (which stays on brand with their robot character). 

Moz-search-404
Source: Moz

Using the date from these internal site searches can be invaluable fo understanding user intent and how to improve the experience of your website. 

2. Engage Users With An On-brand Message Or Gamification

Use a 404 error page to show your brand’s personality and make what is usually an annoying experience a little more fun! 

Games are a way to engage with users and keep them on the site a little longer, even if they can sometimes turn into a distraction or a bit of a novelty. But, gamification is a great option for websites with bigger budgets or the proper in-house tech support.

The toy brand Lego has a great 404 game on their error page, engaging directly with their audience in a way that’s on-brand.  They also have a search function for those that aren’t interested in playing. It’s a great example of a brand really knowing their two main target audiences and offering a better experience than a simple broken link message.

Lego-404
Source: Lego

 

If you don’t have the budgets for creating a game on the 404 page, try using a fun and engaging message that apologizes for the broken link. Marketing expert site Hubspot is a great example of creating a more memorable and apologetic message on their 404 page. 

 

hubspot-404
Source: HubSpot

 

3. Add A Lead Capture Function

Reverse the typical result of losing leads via a 404 error page, and use it as another chance to capture a user’s email address or information.

For first-time users that have yet to engage with your brand, a broken journey could turn them off altogether, making them less likely to visit again. A lead generation opportunity for any business would be to capture their information on the 404 error page, using their data to reach out once more, offering an alternative product or page via email while improving interaction with the brand almost immediately.

Most users are unlikely to convert on the first interaction with a brand, and if their first experience is of a broken link message with no incentive to visit other areas of your site, they will simply leave. Use the 404 page as an opportunity to gain a new lead by placing a simple email or sign-up box.

If your site is in e-commerce and the 404 error occurred because of out-of-stock products, capture the user’s details and email them when stock is back. Alternatively, contact them about similar or related items and create a rapport, reinforcing your brand appeal and creating a much better opportunity to gain a new lead!

4. Direct Them to the Homepage

Another simple but effective way to keep traffic on your site is to redirect them back from an error page to the homepage. Homepages tend to offer users ample opportunity to find what they’re looking for so point them in the direction of yours! The homepage should also offer a better view of products or content available.

It doesn’t even need to be a fancy icon to direct users to the homepage. A simple hyperlink back works just as well. Users are more likely to interact with a 404 page that offers them an alternative. 

Remember, a 404 error page that simply says ‘sorry, the link is broken’ will turn users away almost immediately and deliver a poor user experience. 

Three Great Examples Of 404’s That Have Been Designed To Convert!

Let’s take a look at some other companies that have nailed the 404 error page.

Amazon combines two of our suggestions, the search function and linking back to their homepage, to give users two alternative solutions. This will keep users on their site, steering them back into the search for products. By adding the dog picture, they have gamified their 404’s. And being Amazon, they’ve taken it a step further by encouraging users to ‘meet’ the other dogs that feature on their 404s. 

amazon-404

 

Digital expert Neil Patel not only preempts the initial reason why a visitor may have come across his site but also offers several alternatives to keep them both entertained and their interests piqued (which comes back to understanding your audience). He points users straight to his SEO tool, encouraging them to test it out.

Neil-PATEL-404

 

Swedish furniture store IKEA also combined three of the four tips we recommend for a high-performing 404. Using a search box, a fun gamified spaceship that moves along the screen and beams up a chair, and a link back to their homepage. 

Ikea-404

 

At AB Tasty, we would always recommend testing a combination of these features, to find the perfect formula for your visitors.  Including even one of the above tips in your 404 page can help to improve the user experience, and may even decrease bounce rates (and generate a few leads!) as a result. 

Share on Linkedin
Share on Facebook
Share on Twitter

You might also like...

Enable your product team to put users in the center of product strategy, while enabling engineering to deploy code faster.
Trusted by
Request a demo
Don't throw away hard-earned traffic.
Make your website work overtime - so you don't have to.
+250%
click-through rate
+19%
conversion rate
+5%
average order value
Trusted by
Request a demo