Best Practices For Brilliant 404 Pages
To help marketers understand both the value and pitfalls in 404 error page design, here is an analysis of 404 pages, as well as best practices for creating your own optimized pages.
While creativity is key in a 404 error page, the visual design of the page is only one facet. Exhibiting functional options to easily navigate away from the error page to other areas of the website are also essential to producing a useful 404 ‘not found’ page that drives engagement from site visitors.
As disappointing and admittedly frustrating it is to hit a broken link, some sites have done a better job than others at creating a visually appealing or functional option for users.
To help marketers and webmasters understand both the value and pitfalls in 404 error page design, here is an analysis of 4 varied 404 error pages where the good, bad and ugly are all showcased.
Why is this important?
A 404 error page implies that a website was unable to find the page you requested. There are a few reasons for error messages to exist on a website. Research tells us that typos, and old links in emails and bookmarks lead the charge at 45.87% for the source of 404 errors. Broken links on a website are less prevalent as a cause of 404 errors, at just 17.58%, which essentially means that the vast majority of 404s generated on your site are out of your control.
This is important because statistically, only 23% of website visitors that encounter a broken link make a second attempt to find the missing page- 70%+ of people who reach a 404 error page will leave your website and not return.
No matter the reason for a 404, certain websites have taken the initiative to create funny, clever and visually masterful error pages to engage their visitors. However, while creativity is key in a 404 error page, the visual design of the page is only one facet. Exhibiting functional options to easily navigate away from the error page to other areas of the website are also essential to producing a useful 404 ‘not found’ page that drives engagement from site visitors.
Now that we understand why this is an important topic, let’s jump into our 4 examples!
1. The Standard 404 (What not to do)
Let’s begin with a major no-no. This is the standard 404 page that is of absolutely no help to the end-user. It holds no intrinsic value as it offers no useful information. Its design is merely utilitarian, with little to look at or appreciate. Webmasters and marketers should take note- this isn’t how you should treat your customers. Plus, beyond the back button, navigation from this page is nonexistent without any additional links to direct visitors to another page. This example was included to stand apart from the rest, as it is clearly the standard bearer of poor design and inadequate customer engagement. Too bad most of the sites out there are still going with this one…
2. Airbnb’s 404 page
In a turn-around from the last example, Airbnb presents users with a clean and straightforward 404 error page. Their approach checkmarks several best practices. Its gently apologetic tone checks the first box, as it sets a mood for the end user who found a 404 error. It also receives major props for including additional links to popular webpages on their site. If those pages don’t cut it, then a link to their sitemap is also offered to access the precise page visitors desire. Plus, the GIF of a distraught little girl dropping her ice cream cone on the ground sets the tone nicely. Airbnb presents a decent 404 page that provides alternative options for visitors to navigate to a relevant page.
Airbnb doesn’t falter in its presentation or practical approach- it offers helpful links and a full sitemap. They’re on the right track to achieving a highly useful page that is aesthetically pleasing and is easily navigable. One factor that would establish Airbnb’s page as exceptional would be a site search input box. Adding search isn’t overkill despite having a link to the website’s sitemap. If the site had a responsive site search solution that displayed relevant search results directly from the 404 page, it would save visitors time looking for their desired page. A smart solution would exhibit results based on a user’s query and would essentially eliminate the need of a sitemap link altogether. That being said, all in all we say “bravo” to Airbnb for a well-designed 404 error page!
3. Wistia’s 404 page
The 404 page from Wistia is extremely cute. The image features a dog tearing apart an old VHS tape, which is both a visual metaphor for a broken link that is old or nonexistent, as well as playing well with their digital video hosting product offerings. Beyond the delightful image, Wistia offers an explanation as to why a user found a 404. The description is thoughtful, helping non web-savvy users who are confused by their arrival at a 404 page.
A solid effort by Wistia, but there’s room for improvement. Their single option to navigate away from the error page is through the “See More Lenny” button which transfers users to their product page. This is a smart move as first time visitors will undeniably want to learn more about Wisita’s offerings, but it lacks additional options to move away from the page. The assumption that users just want to go directly to the product page creates extra steps for those who don’t, and the messaging gives the user no clear indication of where they are headed. Links to their homepage, a help center and other popular pages should also be listed. Ideally, site search integration with intelligent results should also be available.
4. The New York Times’ 404 page
The New York Times doesn’t have the most attractive 404 error page, but it does serve up a few practical avenues. For one, it offers its visitors a full list of stories that they may wish to see, but unfortunately are not necessarily stories that are relevant to where the user was hoping to land on the site. On the other hand, they happen to be stories that are the most emailed, which means they’re probably quite popular on the site. It also incorporates an option that few sites have- the ability to report a broken link to a site’s webmaster. This option informs webmasters of 404s on their site and hopefully will result in addressing the issue. Another win for the site is a link that directs users to their home page. This is useful if visitors decide to try a different search for the information they were looking for. Plus, if all else fails, a link to the home page to read the latest headlines may be what a visitor was looking for in the first place.
The New York Times 404 error page does a lot of things right, but it’s not perfect. Quite simply, the looks of the page aren’t the prettiest we’ve seen. Despite its practical approach, the aesthetics of the page could be improved, while still following the overall website design. We’ve made a big deal about having a site search input on your 404 error page and the NYT does have this. However, the search functionality is a bit limited. It lacks an autocomplete search function and doesn’t correct your misspellings of even their most frequent writer’s names.
The NYT also has the right approach in offering their most emailed stories to readers, but this feature could be further optimized with an intelligent solution that displays stories that are related to the end user’s initial path. Even with these faults though, the New York Times presents a useful page that gives visitors multiple options to find what they desire.
Keeping customers on-track: Best practices for a 404 error page
You now have a better understanding of what makes a quality 404 error page based on the examples we’ve showcased. In order to help you optimize your own 404 page, we’ve assembled some advice you’ll want to follow when designing a 404 page.
Basic
Engaging Design: At a minimum, create an engaging 404 page that captivates the user and reinforces your brand presence. The visitor might have ended up at the wrong place on your site, but that doesn’t mean their customer journey is over. They goal here is to keep them on-site and moving forward.
Offer A Sitemap: A sitemap is useful for the end-user in case suggested results and popular webpages aren’t available. A sitemap simply offers the entire website in one place. It’s probably best to avoid this if you’re a larger website, since you’ll have plenty of webpages to display. If you’re a smaller website, then your users will find this an easy way to find the missing content.
Get Feedback: Consider including a link to submit broken links to the webmaster as well. A link to report broken links isn’t an admission of failure, but rather a solution to address the problem of 404s on your site. You’ll have a simpler time identifying 404s if visitors are cooperative in utilizing the feature.
Intermediate
Integrated Site Search: When hitting a 404, a properly integrated site search input would be highly useful for visitors. However, this does require a well thought out search implementation, as irrelevant results won’t bode well for the longevity of your customer lifecycle.
In this instance, a great time-saving feature is autocomplete, which finishes a search query for a user even before they finish typing. Another helpful feature to include would be a misspelling tool that automatically corrects a search query if it is misspelled. These tools help avoid further 404 error messages and lead visitors to the pages they need to find.
Quicklinks: Taking site search functionality to the next level, the incorporation of quicklinks will increase the seamlessness of the experience. A quicklink is a direct link that transmits a user to their requested page without even having to submit a search query or browse a search results page. The autocomplete simply suggests relevant pages as the user types, and they can opt to go directly to their desired page. The idea here is to save time and keep the customer on their way to the information they desire.
Advanced
Intelligent 404 Pages: The most seamless way to get a visitor to where they want to go, is to eliminate the basic 404 page altogether. Instead, the page can be reimagined as a useful conduit that predicts where the visitor wishes to go, rather than a destination itself. This is a significant improvement in a visitor’s content journey because they’re automatically receiving suggested content even when the broken link they’re looking for is nonexistent.
To make this happen, you’ll need a machine learning powered predictive engine, that will be able to detect where visitors intended to go and then present them with links to content that is pertinent to that specific visitor. The relevance of the content will increase over time as user behavioral data is analyzed in aggregate over time.
Utilizing 404 Analytics: A well implemented 404 solution should be paired with analytics that inform the user of how many 404s live on a website. This is information that many organizations are unaware of, but it’s essential to maintaining the long-term health of a site. 404 analytics should also tell you what content is well received on your site, as well as potential content gaps that need to be filled to increase engagement.
Wrapping it all up
Designing a good 404 page requires creativity in its design and approach, but the truly great ones give visitors the ability to easily navigate away from the error and find their desired page instead. By blending great design, a touch of creativity, and a well thought out and implemented technology platform, you can increase the stickiness of your website, even when your visitors hit a snag.
Our advice? Let your designer’s imaginations run wild.