The importance of custom 404 page design (+ what to include in your 404 pages).

So a user is browsing your website when they click on a broken link. What do they see?

A plain, generic 404 page provided by their browser?

Or something creative and engaging? A custom 404 page that directs them back to a working web page — and gives them a sense of what your brand is all about?

This simple error page can make a big difference to the user experience and a customer’s perception of your brand. It also prevents you from losing valuable business.

So here, we look at why creating a custom 404 page design is a wise move — and at the features that the best 404 error pages include.

What is a 404 page?

A 404 page is an error page on a website. It appears when a user tries to navigate to a URL that doesn’t exist. This occurs when:

• The page URL has changed or deleted but a user clicks on a link directing them to the old URL
• A user mistypes a URL
• You link to a URL that is not currently live, perhaps because the page is still a draft
• You have a new website and some of the old URLs have not been redirected to the new website correctly

In any of these scenarios, when the requested URL is not found, a website user is directed to your 404 page.

How to avoid 404 errors

When website users can’t find what they’re looking for, it creates a frustrating user experience. So, ideally, you want them to see your 404 page as infrequently as possible.

To do that, you need to take care when updating and changing website content, and when moving or deleting web pages.

When you change or delete a URL, it’s good practice to create a redirect. This automatically reroutes a web user to:

• a new web page (the replacement for your old URL)
• the most logical alternative (a page where your user is likely to find the information they were looking for)

With redirects in place, a user doesn’t end up on your 404 page.

But keeping up with this type of website maintenance isn’t always easy. And sometimes — particularly on big websites with lots of content — a redirect gets missed. To find and fix these broken links, you need to conduct a regular website health check.

What is a custom 404 page?

Okay. So 404 pages can be annoying for a website user. But — even with the best of intentions and regular site maintenance — they’re a site inevitability.

There is, however, something you can do to make the experience a little less frustrating: create a custom 404 page.

A custom 404 page is a personalised error page. It’s in keeping with the rest of your website design. And it offers the best possible experience for users, at a time when they’re at high risk of bouncing away from your site.

It stands in stark contrast to a generic 404 error page.

What is a generic 404 error page?

A generic 404 page is an error page provided by the user’s browser. This is what users see if you don’t have a custom 404 page in place.

These generic 404 pages aren’t in keeping with the rest of your web design. Across all browsers, they’re typically plain white, with one or two sentences of black text. And they do absolutely nothing to enhance the user experience.

When presented with one of these pages, a user will likely exit the session and use another method to find what they’re looking for. They may head back to the search engine, where they come across one of your competitors.

Your users may also form a negative impression of your brand and business and be wary of visiting your website again.

The importance of custom 404 page design

A custom 404 page beats a generic 404 page on various counts. Creating a personalised page is simple — it doesn’t require much web development. But it can make a big difference to your business. Here’s how.

Reduced bounce rate

A custom 404 page helps keep users on your site. They aren’t shown a confusing, generic page that gives them the impression they’ve already left your website. Instead, your personalised page gives them the reassurance (and links!) they need to return to your home page or another relevant part of the site. This reduces your bounce rate and prevents you from losing interested customers.

Improved UX

With a custom 404 page, you make life easier for your website visitors. You explain what’s gone wrong and give them an easy route back to a working web page. This shows users that you haven’t abandoned them and — while this isn’t the greatest website experience they’ve ever had — you reduce any further friction by showing them where to go next.

Showcasing brand personality

The best custom 404 page design showcases your brand personality. With a branded colour scheme, engaging images and a bit of playful humour, you can turn a negative user experience into a positive one. You can also leave users with a memorable impression of your brand, which means they’re more likely to shop with you in future.

What to include in custom 404 page design

The aim of a custom 404 page is to turn a “whoops” moment into something interesting and memorable. It’s about informing — and even delighting — a website user so they go away with positive feelings about your brand.

When crafting a custom 404 page design, here’s what you should try to include.

An acknowledgement of the problem

First things first: let your user know what’s happened in your brand tone of voice. Some of our favourite 404 error messages include:

• Cadbury: “Oh, crumbs! We’re sorry but we can’t find the page you’re looking for. This might be because of an out of date link or a typo”
• North Face: “Oops! Looks like you’ve wandered off the trail. The page you are looking for does not exist. Let’s get you back to base camp.”
• Surreal Cereal: “Let’s not cry over spilt milk. The page you were looking for does not seem to exist. Try clicking on one of the links in the menu to find your way back.”

You may like to say sorry. And you should always give an explanation of what might have gone wrong. This helps to defuse user frustration.

Simple language

Creative 404 pages are no place for complicated technical jargon. So don’t say things like: “HTTP Error 404: Resource Not Found”.

Instead — as per the examples above — write your error message in simple, conversational language. That way, you tell users what’s gone wrong and what they can do about it in terms they’ll definitely understand.

A solution

Next, you need to provide a quick and easy solution. This is your chance to keep users on the site rather than navigating back to Google. So include a link to a key part of your site. That could be the homepage, popular products or your contact page. Just try not to overwhelm your users with too many options.

Branded design

Your custom 404 page should feel like it belongs to your site. It shouldn’t feel like some default error message from the depths of the internet. So incorporate your website branding. Use your colours, fonts and logo to tie everything together.

When the design feels consistent with the rest of your site, it reassures the user that they’re still in the right place (even if the page they’re looking for isn’t!).

Humour

A little playful humour can take the edge off a user’s frustration at landing on a 404 page. You can incorporate humour in your text, with a clever pun or one-liner. Or you can add a meme, image or GIF that raises a wry smile. This makes the experience more memorable and it’s another way you can show off your brand personality.

Images, animation or interaction

If you really want your brand to stick in the minds of users, consider adding a high-quality image, a bit of movement or something interactive to your custom 404 page design. It could be a fun website animation or even a mini-game to keep users engaged. Little touches like these can transform an error page from a dead end into a brand highlight.

Improve your website experience with a creative 404 page

A custom 404 page can really set your brand apart from the rest. It may feel like a minor detail when you have the rest of your web design and development to consider. But it has a big impact on how users view your website.

Creative 404 pages combine playful text, branded design, and impressive visuals. With an acknowledgement of the problem, a clear solution and a bit of humour, they keep users engaged and leave them with a positive perception of your brand.

That means a lower bounce rate, better UX and improved brand awareness.

Sounds good? If you want to create a custom 404 page for your website — and provide a better experience for your site visitors — give the Radical team a call today.