Why 404 Error Pages Really Matter – And How You Create Them

Oops, something went wrong!

‍As soon as you land on 404 error pages, you know: something went wrong! Maybe because the page doesn’t exist anymore, the URL you’ve entered is not correct, or the link you clicked on leads to a dead end… whatever reason it is, a 404 error page marks a significant breaking point in your, and therefore in your users’ experience when they land on your 404 page: It interrupts their flow, creates a feeling of frustration, and requires them to find their way back – definitely a lot to ask from people that you want to excite for your product and brand. This is exactly why you should pay attention to the design and copy of your 404 page, otherwise you risk that users lose interest in your website at this point and simply drop out. And a drop out in most cases is a clear sign that your user experience is bad.

404 pages and their importance for SEO

However, having users dropping out of your website is not only a problem for the user experience, it’s also bad for your website’s SEO. But why is that so? Quite easy: Everybody wants to be seen and found on the first page(s) of search engines. For our example we’ll use Google. So if you are not running with a “Paid Search” you have to take care of being ranked organically, which is affected by the algorithm of Google. The algorithm depends among other things on the tracking of users’ behaviour, which means in conclusion, that good or bad user experience has an impact on your organic ranking, as long as it’s trackable. This leads us back to the importance of good UX/UI design for websites and 404 error pages. As long as you keep your users interested and guide them through your website (including error pages) the way they expect, your Google ranking should be fine. However, if you break these simple rules, your favourite search engine will make you pay for it.

How to 404

Now that you’ve got an idea of how a great 404 error page can positively impact both your visitors’ user experience and your website’s SEO ranking, it’s time to create the perfect 404 error page. Let’s turn this potentially negative experience into a positive one by showing your users the way back to the beautiful experience that is your website, and the relevant content they were looking for! Here are some simple steps to get it right:

1. Be transparent…. and helpful‍

Part of a good user experience is to acknowledge and clearly mark an error. Therefore, in most cases, it’s better not to include automated linking instead of 404 pages that lead the user back to your landing page (for example). As we all know: Nobody’s perfect! We’ve all got our (website-)flaws, so let’s show the world how to handle them: with a beautiful and functional design, with a copy explaining what happened, and indicate what users can do to get back on track.

2. Include features

Being transparent and helpful is already great, however, there’s even more you can do! Besides the visual and textual elements, your 404 error page should also include potential features that can be embedded on your error page, such as a search bar, a way for users to report a broken link, a contact page or a contact form.

3. Include links 

Next to special features, links can do a great job for the user experience, too: They allow users to be picked up, find their way around, and see the next step clearly in front of them. A few useful links for your 404 error page are your home page, your most popular blog articles, your most popular or valuable product/category pages, so-called “lead magnets” (whitepaper downloads, demo sign-ups etc.), and incentives (voucher codes etc.).

4. Let your brand shine

Do not see your 404 page as a necessary evil in your website’s dusty hidden closet. It has the potential to set the stage for your visitors to have a remarkable brand experience as well. So get creative here, show the face of your brand, and represent yourself via a beautifully designed error page. 

Best Practices

Last but not least, some examples and real best practices of well designed 404 error pages. Get inspired and enjoy!

In addition to the copy and graphics that match the brand, Tripadvisor shows how to properly design a 404 error page:

1. The website menu combined with a search box is still visible
2. Quick access to useful and most used categories

Everybody wants to feel safe while booking a flight for their next travel adventure. While giving quick access to most needed categories, and the menu as well, Emirate communicates calmness and security in their headlines, while offering to get in touch with the service and handing off to the site map for a greater page overview – a good way to help users navigate away from the 404 error page.

By creating incentives (here: special member offers and top trending products) to keep your users on the page while promoting/selling some products, you kill two birds with one stone.

If you need a quick solution for your 404 error page, keep it (at least) classic and simple:

1. Classic: always show your website menu
2. Simple: navigate your user back to the homepage or maybe, like in this example, to the support (or another useful) page as well

And if you still have some time left, because the first two steps are implemented as fast as promised:

3. Add some of your brand love to the copy writing and graphics

...and voilà! Your 404 page is ready, neat and helpful.

‍
COBE doesn’t offer any SEO (Search Engine Optimization) services. To answer the question of why we still talk about SEO in our blog and consider it in our design process: Google’s goal is to “organize the world’s information and make it universally accessible and useful.” A good user experience is crucial to achieve that goal, and that’s why Google is getting better every day at tracking user’s behaviour, which automatically affects the ranking factor of every single website worldwide – and that leads us to the necessity of good UX, which again….is our passion. So stay tuned about our knowledge we want to share with you.