Designing Intuitive and User-Friendly 404 Pages
All of us have interacted with a 404 page at some point.
These pages appear when the link is broken, a page is deleted, or when the user incorrectly typed the page address. But whatever the reason is, it remains an error that needs to be fixed. In addition, broken links hurt your site ranking and that’s not what you need. The SEO aspect of your site is incredibly important so you don’t want to lose the traffic just because you forgot to keep an eye on the 404 notifications.
While it’s clear that 404 pages need to be fixed ASAP, you can never really forecast when the user encounters a broken link. So to be ready and turn the negative experience into a positive one, you need to customize your 404 pages and make them user-friendly and intuitive.
Ready to learn how to turn the bad into good? Let’s find it out.
Customize the 404 page for your site
Imagine that you are browsing an incredibly colorful and appealing website with lots of interactive elements and suddenly stumble upon a blank page with plain “404 Page Not Found” message.
A bit of a wakener, isn’t it?
The 404 page should not appear as an unpleasant surprise, this is why it’s so important to keep its design the same as the overall site layout.
For that, keep the look of the 404 page the same as the look of the other pages, including background, colors, fonts, and other elements (if applicable). As well, many websites take the 404 page as an opportunity to emphasize the brand and remind the users about it one more time.
When designing a 404 page for your site, pay attention to the message. A well-crafted message is a good opportunity to include a clever pun or remind the users about your products/services in an unobtrusive manner.
Explain what happened
If we look at the default 404 page under Apache, we will see the following:
And that’s it. The user has no idea what actually happened and what to do next.
Because you care about your customers and want to dismiss any unpleasant experience, provide an explanation for the error. The main reasons for 404 are usually:
- The user mistyped something,
- The link is broken,
- The page does not exist,
- The connection with the server is broken.
Of course, you do not have to list down all the above mentioned issues. Just make sure your explanation is understandable.
By being honest about the problem, you will win over the users and encourage them to stay on the site and continue browsing it.
Create an engaging message
The 404 page is a perfect chance for the brand to showcase its identity through a well-crafted message.
The best 404-page examples often feature:
- Puns
- Message related to the site’s products or services
- Personal appeal,
- References to pop-culture and recognizable events.
Because 404 page is an error by default, you need to transform it into something completely opposite aka a positive and fun experience.
GitHub did a brilliant job in terms of designing its 404 page. It used the stereotype about the developers and their love of the “Star Wars” saga and used it to their own advantage by making both the visual elements and the page message instantly recognizable even by those people who did not watch any Star Wars movie.
Offer an action to take
A call-to-action is really important and is an absolute must for a 404-page design.
A user should never be left with a blank page and zero choices. So even if something like 404 happened, offer an alternative that would lead to a mutual benefit.
Some of the most popular CTAs for the 404 page are:
- a search bar
- homepage
- top-products/services
- sign up for a product or a newsletter
- an offer of a free trial
Pay attention to the CTA buttons design. They must be easily spotted and should not blend with the background, otherwise, a user will not notice them. As well, think about the CTA button message: instead of cliches like “Click here” go with something more creative (“See what we got”).
A user landed on the 404 page because he searched for something. So offer them an option to try once again by adding a search bar to the page.
You can support it with a message like: “Seems like your query is nowhere to be found…Why not try again?” Well-written CTAs have a high engagement rate and work well in conjunction with images.
As well, add a hint text to the search bar. A bar with a text gets better engagement than an empty one.
A search bar on 404 page is not enough. What if the users are not sure about what they need?
Add “Homepage” or any other relevant buttons to navigate the user from a 404 page to potential conversion. As well, you can add a “Contact Us” button to increase reliability.
Some companies use 404 page as an opportunity to remind about their products and services and place the corresponding links on the page.
If you are an e-commerce store, for example, you can place your best-selling products on the 404 page to give users a chance to discover your best products and (hopefully!) buy them.
As for the other sites, for sure you can offer something valuable to your users. It can be a free trial of a product, an offer to sign up for a course, or a guide to useful areas of the site.
Make it fun
As we already said above, the 404 page is a negative experience because the user did not get the intended result. To solve the issue, make the page interactive or add a fun element to it.
Even if you position yourself as a highly professional brand, a bit of humor won’t hurt. As well, many companies add gamification and videos to their 404 page to engage the user and keep him entertained.
Tracking the 404 error
The 404 error is none of the user’s business. But it’s your task to track it and identify the cause of the error and the user’s journey.
There are a few things to keep in mind when choosing a tool for 404 error tracking.
A 404 error may not necessarily be on your site – a customer can open an old newsletter and follow the link or it may appear in the search results on Google.
So when you choose a tool for error monitoring, double-check that it searches for 404 errors everywhere so you can fix them all.
As a site owner, you probably have a million things to do and fixing 404 errors may not be on top of your list.
This is why you need a tool that will let you know how much your 404 errors cost. And we are not talking about money here – it may be a percentage of lost conversions, increased bounce rate, a number of lost users.
Once you see how 404 errors impact your business, it will be easier to prioritize your tasks and move the 404 errors either up or down the list.
A 404 error is not something that happens on a regular basis. It may happen that you are doing perfectly fine and then, all of a sudden, a user gets a 404.
That’s why your tracking tool should monitor the 404 errors constantly and immediately notify you upon finding one. In this way, you will be able to timely fix it and eliminate the risk of other users stumbling across the 404 page.
Types of tracking tools
There are different types of available tracking tools that will help you pinpoint the 404 error and successfully fix it.
Crawl tools like Screaming Frog are perfect for quickly scanning your website and checking it for the broken links.
These tools analyze the links of your website and let you know which ones are broken and what is the source of the error. In addition, crawl tools are usually easy to manage and install.
The biggest flaw of such tools is that they analyze the links on your website only – and remember what we said about the importance of advanced analysis? As well, crawl tools do not tell you the cost of a 404 error but only help to identify it.
A crawl tool is definitely useful and you should deploy it on a regular basis just to make sure that everything is fine with your store. However, do not forget to perform regular and advanced analysis to ensure there are no other errors that you might have left unnoticed.
Unlike crawl tools, the backlink tools focus on external sources that lead the users to the broken links on your site.
The Link Explorer by Moz is one of the tools that help you find the websites that are taking the users to your site. Such analysis is really helpful for your SEO as you can eliminate the 404 links and improve the ranking of your site.
But again, same as with crawl tools, the backlink tracking tools cover only one aspect of identifying the broken links. If you want to find all 404 error links, including those in the old newsletters or on social media, you’ll need a more comprehensive analysis.
One of the most common and efficient ways to track the 404-page error is with Google Analytics.
For that, you’ll need to copy this code:
<script>
// Create Tracker - Send to GA
// Replace UA-11111111-11 with your own Tracking ID
ga('create', 'UA-11111111-11');
ga('send', {
hitType: 'event',
eventCategory: '404 Response',
eventAction: window.location.href,
eventLabel: document.referrer
});
</script>
and add it to the 404 Error Page/Template. Just remember to paste the ID of your Google account in the code.
After that, you will be able to see which exact URLs cause the 404 error and where people get them.
And finally: fix the issue!
Accidents will happen and that’s a fact. It’s better to have a good-looking 404 page in advance than frantically fix the issue while the annoyed users are waiting.
However, 404 is an error and needs to be fixed. Depending on the error priority, you can redirect the link, restore the page, or correct the source link. As well, do the following:
- Introduce automated and regular 404 reports to keep an eye on 404 pages and timely fix them,
- Set up real-time notifications on 404,
- Perform an audit to identify any broken links.
All in all, a user-friendly 404 page should bring value to the user, be consistent in terms of overall website design, and help navigate the site. By following these rules, you will retain the users and at the same time boost your conversions.
