11 Best Practices for Designing 404 Pages

Believe it or not, no digital product can be 100% error-free. Among the innumerable things that can go wrong, "404 page not found" errors are inevitable. However, rest assured that you can turn this setback into an opportunity if you put your mind to it. Learn the best practices for guiding and engaging users when they get stuck in a 404 deadlock, and you'll be doing them and your product a great favor.

Explain what happened

The worst way to present a 404 page is to offer no explanation. Brands can certainly do better than a dismissable banner. In fact, one of Jacob Nielsen's heuristics says that the right product should help users recognize, diagnose, and recover from errors. When a 404 error happens, don't miss a chance to turn it into a win.

Provide a short, clear explanation of why users see this empty page and guide them towards something helpful, like a home page. Avoid using technical jargon unless you're confident that your target audience specializes in that particular field. But in most cases, plain language benefits everybody, from experts to international users, especially those who use English as a second language (ESL).

🧠 Pro tip: Explore more heuristics in our10 Usability Heuristics by Jakob Nielsen lesson.

Make users crack a smile

Laughter is the best medicine, so learn how to use a healthy dose of it. Errors inevitably bring frustration and disappointment — view it as your chance to diffuse any irritation with a joke, bring delight, and shape the overall experience simultaneously.

However, there's always a "but" — know your audience. Let your product or brand personality dictate how much humor is fine. A good pun can put your users at ease, make them smile, and help them move on. However, a poorly executed pun can drive people away — especially if they came to your product for support and respect.

Avoid using jokes or comments that might offend or insult users based on their race, gender, ethnicity, sexual orientation, or any other characteristic. Humor that might seem funny to you may not be funny to everyone and could actually turn users off.

Put some effort into the copy

You don't necessarily need intricate illustrations to provide a fantastic user experience on a 404 page — impressive writing and helpful links can work perfectly well. Your copy should reflect your brand personality and the language should suit your target audience.

What's certain is that most users will appreciate short sentences, a reasonable line length of 45-75 characters, common vocabulary, and an active voice that doesn't sound too formal or detached. Passive voice is okay to explain system actions, but overusing it makes your message sound mechanical and less human.

Add on-point visuals

Even if it's the first interaction with a product's website, people are less likely to feel disappointed upon encountering a well-designed and helpful error page. A large, on-point illustration and creative copy are a great introduction to the brand, and they also offer a solution to the problem.

Sometimes, you might not be sure what visuals will match the brand's voice, or you may not want the error page to look quirky and out of place. In this case, a safe bet would be a simple design, some solid copy, and helpful links.

Guide users to your best content

While some designers consider a 404 error as the end of the world, you can turn it into an acquaintance with your product. For example, provide a handful of helpful links to your best content that might interest users and encourage them to explore your website instead of leaving it. Without links, your page will not incite users' desire to go deeper and explore more of your website.

Not sure what links to include? Perform a spelling check on the requested URL and list any close matches for users to click and find.

Make the CTA stand out

An error page is a possibility to boost usability and open new opportunities for conversion and branding. You can do so effortlessly with a delightful illustration, straightforward error description, and a clear and apparent get-out button for users who have lost their way and aren't sure what they're looking for.

Of course, the error page's aesthetics matter — but users are likely to abandon your website if it doesn't offer a solution. Prioritize functionality and provide a clear CTA that takes users back home if you're unsure of what other links to provide.

Provide a search input

Good UX is about foreseeing users' needs and removing unnecessary steps from their journey. When users encounter a 404 page on your product, provide a search input and prompt them to give it another shot. At the very least, users will get involved with your company and might explore places they didn't plan to.

Represent your brand

A 404 page might be a black sheep to some extent, but it should still match the look and feel of your website. In the long run, if it's done right, it can increase conversions and improve usability. Ensure all illustrations fit the brand, the microcopy mirrors your brand tone, and the font and colors are consistent with the rest of the website.

Even if your 404 page is functionally correct, it will look out of place if it doesn't reflect your brand like the rest of your website does, making it a lost opportunity to drive more traffic back to your product.

Avoid clutter

Simplicity is hard, but it can help your users avoid a lot of effort and frustration. If you're unsure of what belongs on your 404 error page, concise, apologetic copy and a search input are more than enough to help users move forward.

It's certainly not a good practice to leave users without an "exit" from a 404 page, but it's just as bad to overwhelm them with a handful of links. As Nielsen's heuristic about minimalistic aesthetics points out, irrelevant information impedes visibility and can confuse users. Remember, less is more.

Integrate interactivity

Each one of us has an inner child who likes to come out and play when we are bored. So why not create a 404 page to amuse users and keep them busy? One of the best examples is the Dribbble error page. It randomly picks a color and shows Dribbble artworks that might interest viewers and inspire them to explore the website. A search input that turns it into an interactive experience is the icing on the cake!

At the end of the day, a good 404 page should turn a small hiccup into a chance to make users smile. With a clear message, some fun visuals, and maybe a bit of interactivity, you can keep them exploring your site instead of leaving. It’s a simple way to turn an error into something positive!