Reaching a 404 page is not a pleasant experience. But there are things you can do to make sure it’s not the final experience a user has with your website.
To design a great 404 page, you need to know which elements are the most useful for the users and can help your page stand out.
Here’s a list of 6 features to help you get the most of your 404 page.
What is a 404 code?
404 is one of the HTTP status codes that appears when a page can’t be found.
404 belongs to the 4xx group, which indicates that it’s a client-side error. More specifically, it means that the client reached your server, but the server didn’t find the requested file.
The 404 code can appear for various reasons, such as:
- The page was deleted,
- The user made a typo while typing the URL,
- The link pointing to the page was incorrect.
No matter the reason for the 404 code, users won’t be able to access the page because it simply can’t be found.
The page that the user will see instead of the missing page is in your control. Your options include:
- A standard 404 page, or
- A custom 404 page.
A standard, uncustomized 404 page might contain a simple piece of text on a white background that just says “Not Found.” Your server automatically generates this page.
On the other hand, you may choose to customize your 404 page – design it to fit the rest of your website and select the elements you want to include.
It’s crucial to distinguish 404 pages from soft 404 pages, which we wrote about in this article.
Why you should build a custom 404 page
A well-designed custom 404 page is beneficial to both the users and your business.
When a user enters a standard 404 page, they only understand that something went wrong, and the page wasn’t found. They don’t know what happened or what they should do next.
As a result, your customer might exit your site without satisfying their needs. This is far from ideal. A user wasn’t satisfied with their search, and you lost their business.
With a custom 404 page, you can change the default, unhelpful page into something useful for both the users and your business.
A custom 404 page allows you to:
- Help users find the information they are looking for,
- Encourage users to explore your page,
- Show your brand’s voice and creativity.
Additionally, creating a custom 404 page is recommended by Google.
If you have access to your server’s configuration files, you can make these error pages useful to users by customizing them. A good custom 404 page helps people find the information they’re looking for, and also provides other helpful content that encourages people to explore your site further.source: Google
The quote clearly states that Google considers a custom 404 page helpful for the user and encourages site owners to customize their 404 pages.
How to build a great custom 404 page
Even if you fully customize your 404 page, ensure that the server still returns a 404 HTTP status code. It’s a bad practice to set up a 200 code, suggesting a successful response when the page actually doesn’t exist.
When deciding what to include on your 404 page, one of the essential elements is a message that clearly states it’s an error page. Inform the users that something went wrong in a friendly and straightforward way.
But that’s just the start. Here are the main features you can add to your custom 404 page to make it more useful:
- A search bar,
- A list of resources available on your website,
- A CTA button,
- Links to your top content,
- Design that’s aligned with your brand.
A key to a good 404 page is its usefulness to users. You don’t need to include all of the elements from the list above – just the ones that will help your users find their way around your website.
Clear error message
A good 404 page should always include a clear message that it’s an error page. No matter the design you choose, you should always let the users know that something went wrong and the page was not found.
Ikea does this very well. They provide a clear message that includes both the 404 code and a short explanation which makes it easily understandable for users.
Search bar
A search bar allows users looking for specific content to give it another shot and search for what they were looking for on your website.
A good example of a 404 page with a search bar is Moz.com:
So if you were looking for something specific on Moz.com but didn’t find it, you can look again right on the 404 page.
List of resources
If a user ended up on a 404 page but didn’t have a specific thing on their mind to type in the search bar, you can provide a list of resources that can be found on your website.
Backcountry has a custom 404 page with a simple design that fits the website and a list of essential pages.
Not only is this page helpful for the users, but it also allows Backcountry to show off its content and encourage people to explore the website.
Another example of a 404 page with a list of resources is Tripadvisor. With a bit of humor and four simple buttons, Tripadvisor provides an easy option to browse through the sections that might interest users the most.
By including a CTA button, you can show users the next step they can take.
The simplest use of a CTA button is to direct the users to your home page. A simple yet effective way of giving users some guidance.
Here’s an example of Netflix’s 404 page with a CTA button leading to their home page.
Another solution is to include a “Contact us” CTA button. For example, if a user came with a specific question and the 404 page made it impossible to get the answer, they might want to contact you to ask for details.
Users might also use the “Contact us” option to report the error to you.
Kinsta includes both a “Main Page“ and a “Contact Us” button. Users can go through the website or get in touch with the company. Thus, it provides a solution for people who want to explore the website or find an answer to a specific question.
The CTA button should help your users but also fit your business goals. For example, you can include an option to leave an email and subscribe to your newsletter.
9gag uses its 404 page to encourage people to download its app. The addition of a background gif fits perfectly with the 9gag style.
Links to top content
Your popular content has the best chances of keeping the users engaged. It gives you the opportunity to grab your users’ attention before they leave your 404 page.
Links to your most popular content can be especially beneficial for eCommerce websites because you can promote your top-selling products on a page that’s otherwise somewhat of a dead end.
An excellent example of a 404 page that presents top content is shown on Urban Outfitters’ website. It has a “Most Popular” section with the possibility to buy the items right away.
Brand identity
By customizing your 404 page and aligning it with the design of your website, you can show that you really care about the entirety of your customer’s journey through your website.
A 404 page can show your brand’s tone and personality. A creative design that fits the website’s style can make people smile and maybe even encourage them to share the page with friends.
Pixar is using one of its well-known characters on the 404 page. Even though the page doesn’t provide extensive navigational features, the graphics and heartwarming message fit perfectly with the brand’s style.
Besides a “Take me home” button, Canva includes a little puzzle for the users to enjoy. Its creativity and uniqueness stand out among other pages. It’s a fun alternative to a standard 404 page.
Wrapping up
Don’t leave your users on their own with a standard 404 page.
Users should never be left with no information about what happened and what they should do next.
Instead, strive to create a good experience throughout your site. That includes error pages.
