In this article, we will tell you why it is worth making a unique 404 page for the site and how to design it in a right way. Also, you will see some good and bad examples of such pages.
At the end of the article, you will find a free checklist and a design template for a 404 page.
WHY DESIGN A 404 NOT FOUND PAGE?
If a 404 error appears, there can be 2 main reasons for that:
- the incorrect link address;
- the page was deleted.
When users try to access a non-existent page, they see a 404 Not Found error. The standard 404 page has nothing to do with your site. That is why most users try to close it as soon as possible.
The page shouldn’t look like this:
A properly designed page will help keep visitors on the site and improve your metrics.
In the example below you will see the 404 error page traffic on our clients’ sites.
Website 1:
- 1,143,477 site views per year;
- 42,114 views of the 404 page per year (or 3.85%).
Let’s compare: the most popular section of the catalog has 218,011 views per year (19%), which is only 5 times more than the 404 page has. And the section that is in 6th place has only 14,935 views (or 1.3%). So, the 404 page’s traffic is 3 times more.
Website 2:
- 64,625 site views per year;
- 547 views of the 404 page per year (or 0.84%).
There are 11 sections on the site, and 4 of them have fewer views than the 404 page.
Just imagine how many visitors go through the 404 error page; and it’s in your best interest to keep them on the site.
If you wish, you can check how many users visit your 404 error page with the help of Yandex.Metrika. Follow the link to read the detailed instructions from Yandex.
HOW TO DESIGN THE ERROR PAGE
Here you have 5 options:
1. Use the browser’s standard error page. But don’t make this world even more cruel…
2. Make the page creative and interesting:
On this page the user sees a countdown to the collision. Fortunately, the collision does not occur, but the user may stay on the page a little bit longer to see how it all ends. This improves behavioral factors, namely, increases time on site and reduces bounce rate.
3. Make the page useful for the visitor, help them find the information they need:
This is a non-existent page on the site of a plastic surgeon. The visitor sees the main services provided by the doctor.
4. Combine the previous 2 options:
A great example of combining creativity and useful information on the Coca-Cola website.
We recommend using this option when designing a 404 error page.
5. Use promo code for discount:
A good example of combining a creative and promo code for a discount in a sports online store. This is a kind of apology for the non-existent page. As a result, instead of annoyance, the user will have an additional incentive to make a purchase.
WHAT’S ABOUT HEADER AND FOOTER?
If the user is familiar with your site, getting to a 404 error page (if it looks different from the whole site) makes them think, “Am I still on this site?”. Also, when going to the home page, a sharp difference in color and design will give them unpleasant emotions. Both options aren’t good at all.
So, we recommend using the usual header and footer when designing a 404 error page. By the way, Google thinks the same:
Make sure your 404 page has the same look and feel (including navigation) as the rest of your site. — Google.
CREATING A BLOCK WITH 404 ERROR
This is a creative step. So, the design should be interesting. Think about something connected to your business: what services you provide, what you sell.
This car dealership website uses the original phrase “Dead end” and immediately offers to look at ads. But the dark background is a disadvantage (the rest of the site is designed in light colors).
If you can’t come up with an interesting design based on your business area, then we recommend using a minimalist solution (may the designers forgive us), as in the examples below.
If you are creative enough to find a good idea, do not forget that your 404 error page should correspond to the general site design.
And don’t make this block too large (not more than the first screen). Most users will not scroll this page down.
TEXT FOR YOUR 404 PAGE
It should be clear to the user that the requested page is not available. Our task is to help them make the next action. Compose a message that will not cause rejection.
For example:
- Sorry, we don’t have such a page. We will help you find the information you need.
- Sorry, we don’t have such a page. But there is a lot of other useful information.
NAVIGATION
Google recommends placing links to the most popular articles or blog posts, as well as to the home page.
If your site provides services or sells products, then add a link to the catalog and the main services/products.
If your site has a blog, then add a link to the blog itself and to the most popular articles.
For example, The New York Times added the most popular articles shared by their readers.
OPTION TO REPORT BROKEN LINKS
Give your visitors the opportunity to report a broken link. You don’t have to reply to these messages, but it’s better to provide this feature.
Describe in the technical requirements for programmers how this button should work. Add a link to the site that has the feature you want to replicate.
If it is a pop-up application form, then describe to the designer how it should look.
MAIN RECOMMENDATIONS
We summarize the main recommendations from this article:
- The 404 page should have the same design as the rest of the site. This includes navigation, font, color.
- Prepare a clear and short text that will not cause rejection from the user. It should be clear to them that the requested page is not available.
- Your design should be creative to keep the visitor on the site.
- Add links to your home page, main categories and services, and your most popular articles or blog posts.
- All information should be placed on the first screen. Do not add extra content; most users will not scroll this page down.
- Give your visitors the opportunity to report broken links, even if you don’t intend to check these messages.
FLOWCHART
As soon as you decide on the design, you need to draw a flowchart.
In the technical requirement, do not forget to give a detailed description on how each element should look like.
If you have never made flowcharts or want to get more information about how to make them, then we recommend you to read our article “How to make technical specifications for website design: free detailed instructions”.
CONCLUSION AND BONUSES
The 404 page should perform 2 functions: keep the visitor on the site and give them the most popular and useful information. This is a good way to boost your traffic.
To facilitate the process of creating a 404 error page, we suggest using our checklist and template for technical requirements, which describe each step in detail (read the red text):
And to make it even clearer, you can use the examples of template for technical requirements and flowchart:
This is the actual technical requirements for our 404 page.
Author: Kirill Agafonov (traffic-hunters.com)
References:
- https://developers.google.com/search/docs/advanced/crawling/soft-404-errors?hl=ru&visit_id=637885645086554669-667034082&rd=1#93641
- https://yandex.ru/support/metrica/stand-out/informative-page-404.html#informative-page-404
