When designing a 404 page, if we just say: “Page not found”, visitors can easily be irritated and leave. So we must do better.
As we’ve just discussed the need for a better 404 page, it might be time for an update on what a good one looks like.
A 404 page on our website shows when someone clicks on a link to a page or file that doesn’t exist. One reason could be that the page was once there, but it has been deleted, perhaps because it was out of date. Other reasons include the URL being incorrect, the resource having been moved or some sort of server error.
All of these possibilities need to be kept in mind when designing a 404 page. If we just say: “Page not found”, visitors can easily be irritated and leave. So we must do better, if we’d rather they stayed and looked around our site.
(To see what our 404 page looks like, all we have to do is to make up a non-existent URL on our site, such as https://www.gov.uk/junk.)
Here are some guidelines that we can give to our web designers.
- Tell the visitor that there’s been an error. “Page not found” should be fine, as is “We couldn’t find the page you were looking for”. No need to get technical.
- Include a strong call to action to go to the home page instead, and perhaps others, such as a link to “our full product catalogue”, a site map, or search functionality.
- Give a little explanation which says that ‘these things happen’, such as: “The link might be broken or the page may have moved.” This builds trust. Don’t blame the visitor! They’ll hate being told “oops, you did something wrong” – especially as they probably haven’t done anything wrong.
- Let users report any possible problems! “Found a bad link? Let us know!” This could provide an early warning of problems on the site, tell us about bad internal links, or suggest pages that could be redirected rather than return a 404.
- Ensure the page looks official. Use brand colours, fonts, and tone of voice. Even consider a touch of humour if your tone of voice allows.
- Check that the 404 page really does return an actual 404 HTTP status code behind the scenes. That’s essential for SEO and proper error handling.
A useful exercise is to spend a few minutes looking at examples of good 404 pages. There are many online.
