Creating the perfect 404 page

When users visit your site and stumble upon a link that does not work they will be served with a 404 error page. The 404 error page is the default page users will see when the link they visited does not exist.

Turn user error into UX opportunity

A standard, out-of-the-box 404 page gives users only one option — go back to where they came from. What a downer. According to the principles of gamification, users want to feel like they’re making progress. So design 404 pages that allow users to progress to other parts of your site, commonly the home or features pages. This way you’ve got a lot more chance of keeping them on sight and nudging them in the right direction.

For example, if a user goes to domain.com/pricing you can customize your 404 page with parameters and offer a resource by having the page say “Did you want to view our plans” and link them to your plans page. This gives you the ability to guide the customer in the right direction without losing the visitor altogether.

Make Humor Come Alive:

If someone wants to visit a page and instead they get a 404-page error make the interaction funny. Here is an example of that:

Provide an alternative

When customers cannot find the page they are looking for it can be frustrating. Instead of serving a generic 404 page include a contact form with the tagline, “our site couldn’t help you but our team can”. Include a contact form on the 404 page letting the visitor know you will find the resource for them. This is a great way to gather information about the visitor and also offer them the solution they need.

404 Page Best Practices

Now that we’ve covered the basics, let’s dive into some 404 page best practices that you should be using on your own site.

Explain What’s Happening

Have you ever landed on an error page full of technical jargon like “Internal server error” or “File or directory not found”?

It’s frustrating, isn’t it?

Don’t make the same mistake on your 404 page. While a lot of error pages come with standard 404 messaging like “page not found” or “there’s been an error”, take the extra step to make sure the copy on the page is rid of technical website jargon and explains what went wrong in an understandable way.

REI

Ex: REI

Remember that a lot of searchers aren’t even aware of what a 404 error is, which means it’s on you to break down what’s happening when they hit the error page.

Be Consistent with Your Brand

Out of the box, 404 pages are rarely a thing of beauty. And while your page doesn’t need to be masterfully designed, it should fit in with your overall website design and brand voice.

To make sure it does, put some sort of branding on the page (or at least make sure your site navigation and logo appear at the top). You’ll also want to be sure that any additional elements on the page (like photos, colors, and fonts) fit with your site’s color palette.

Reddit

Ex: Reddit

When it comes to the actual copy on the page, keep it warm and welcoming. A 404 error shouldn’t be a disaster, and your copy should make that clear. You’ll also want the copy to match with your overall vibe (i.e. if you’re cheeky on the rest of your site, be cheeky here).

Give Them Somewhere to Go

The last thing you want someone to do when they land on your 404 page is hit the back button. Unfortunately, this happens all the time.

Why? Because there’s nowhere to go! Take this error from Bank of America. There’s no action to take but to reload the page or head back to wherever you were before this page.

Bank of America

Don’t fall into this trap. Make sure your 404 page invites people to go somewhere else on your site. A standard practice is to leave a link to the homepage at the very least, so users can navigate to the start of your site. It can also be good to include a search bar so users can search for exactly what they were looking for when they initially landed here.

MailChimp

Ex: MailChimp

But Don’t Overwhelm

You want to give users an option of where to go from your 404 page — but this doesn’t mean dump every link you have on them and make them choose without any context.

To ensure your 404 page provides a good user experience, limit the links on the page to a few key ones, like your homepage and contact page. No matter which links you choose, make sure you include the homepage for those users who aren’t totally sure what they’re looking for yet.

Litmus

Ex: Litmus

Leave a Reply

Your email address will not be published. Required fields are marked *