Creative 404 landing pages.

Making your website as easy to navigate as possible is a vital part of delivering a positive user experience to your audience. So what happens if they come across a broken link or a page fails to load?

Depending on the effectiveness of your 404 page, the user will leave or be seamlessly directed to an alternative page.

If a visitor browsing your website lands on a standard 404 error page, they have the option of clicking the back button to return to the previous page, however this can stem the flow of the visit and cause the user to abandon their search on your site. Additionally, if a user lands on a 404 page from a search engine, there is a very slim chance you’ll be able to retain this visitor without a well thought out 404 page.

In either of these cases, if the default error message isn’t engaging and doesn’t help the user, it’s likely they won’t return to your site.

Customising your website 404 page to be more appealing and informative to the visitor is a great way to make it more appealing and more helpful, thus improving the overall user experience.

Here are a few examples of effective 404 pages:

Starbucks

Representing the brand well, and offering users alternative direction, Starbucks have succeeded in making good use of their 404 error page. The explanation and use of relevant visuals also helps create a positive experience for the user.

English Cheesecake Factory

A clever play-on-words – ‘Oh crumbs’ and effective use of imagery and brand make this 404 simple and engaging. They provide a link encouraging users to click back to the homepage to restart their journey, providing a positive experience.

Graze

Graze’s 404 error page is simple and two the point, providing visitors with two options for moving forward through this site – one says ‘Get in touch’, whilst the other takes users back to the homepage. By keeping the page free of any other distractions, Graze make it simple for users to navigate to the next section.

eHarmony

Subtle humour and interesting visuals make the eHarmony 404 error page light-hearted and in-keeping with the brand. eHarmony have also taken this as an opportunity to encourage visitors to sign up to their service.

LEGO

Using humour and a familiar brand character, the LEGO 404 error page makes great use of the brand whilst providing a clear explanation of the error, and link back to the homepage for the user.

404 page best practices

Here are some of the best practices for creating your own 404 landing page.

Acknowledge it’s an error 404 page

Make it clear to your visitor that they have landed on an error page, and that there has been a fault or the URL no longer exists. This makes the overall user experience much more open and doesn’t create confusion for the visitor.

Maintain website design

Ensure that your 404 page maintains your website design and reinforces your brand. This reassures visitors that they haven’t been redirected elsewhere, and can’t still navigate to other areas of your webite.

Add some humour

Depending on the nature and tone of voice of your brand, injecting some humour into your 404 page can be a great way of maintaining the engagement of your user.

Provide options

To avoid users clicking back or simply leaving your site altogether, provide links to other sections of your website. Include a link back to your homepage, contact page, or any other relevant page that will allow the user to continue their journey through your site.

While you may not think of your 404 page as an important element of your website, when done effectively it can make the difference between losing a visitor and gaining a customer.