The 3 steps to creating a good 404 page

The 404 page has become an object of popular culture, and has gone beyond its original purpose, that of indicating that the requested page does not exist.

It is above all an important element of a website, often too neglected and sometimes even completely forgotten, yet this page is essential for a visitor's good user experience, and some sites have understood this very well and turned it to their advantage.

Today we find all kinds of them, ranging from black text on a white background to real mini-games, but how important is this page really, and what should a good 404 page contain?

That's exactly what we're going to answer in this article!

Why customize it?

You shouldn't think of the 404 error as something that can be avoided as a developer. Anyone wanting to share a specific page of your site can make a mistake in the URL, generating frustration for the visitor.

Indeed, if you don't set up a custom page, your host will take care of it for you and most often the user will simply land on a message like "404 Not Found" out of nowhere, without even having time to discover your visual identity.

Even if you know what this page means, that's not the case for everyone, and if it's a default page, trust in your site will greatly decrease for the visitor.

What makes a good 404 page?

There are three simple rules to work around all these problems, here they are:

1 - Explain, reassure

There's no need to explain for three hours why the page cannot be found, but you absolutely must not limit the message to: "Error 404".

Simplify, de-dramatize, be pedagogical!

Favor a simple and positive sentence that the visitor will inevitably read as: "Oops, the page you're trying to access doesn't exist, but we have plenty of others that are much more interesting!"

2 - Capture attention

Even if the visitor understands what's happening and has read your text, there's a good chance they'll close the tab the next second.

That's why you need an element that grabs attention in order to keep them, an element that sets your site apart from others, to give them the time (and desire) to look at your entire page, your menu, etc...

A funny image, a nice animation, a mini-game, anything is good to avoid losing the reader and to be able to redirect them properly, but be careful, the content must remain consistent with the site's editorial line AND its visual identity!

3 - Redirect

This is the crux of the matter: once your visitor has understood where they are, has not lost trust in your site, and you've managed to keep them, you need to encourage them to get back on the right track.

To do this, all you need is a clearly visible button leading to your site's homepage, for example, and if you have an e-commerce site, this could be the moment to redirect them to your best-selling product. (And why not throw in a little discount too?)

A few examples

Let's start with what you shouldn't do (leaving your web server's default page):

Now here are some examples of effective 404 pages that follow all the rules I've just outlined:

One of my favorite 404 pages is Slack's app one: the visitor lands in a soothing environment (which builds trust and eases any guilt) in which they can move horizontally and interact with the environment. This page is somewhere between a beautiful animation and a mini-game!

Also a very simplistic page but also very effective, everything is there, even a well-known reference from the Lego movie universe, and the typical call-to-action found on e-commerce sites. Clear, clean, precise!

And finally, I'll share the one I put online for my personal website!

The bomb is animated with a vibration that makes it more lively than in the image.