How To Design a 404 Page That Keeps Visitors On Your Site

by 28 02/08/2012

You shouldn’t understate its utility.  The 404 page is perhaps the most neglected web design element.

When your website visitors land on your 404 Page Not Found page, it can be everything from a major inconvenience to a pleasant surprise.

While this page has the sole function of telling the user where to go next, the creation of your 404 page should be approached from both a creative and functional point of view.

In this article I’ll present a few techniques to keep in mind when designing 404 pages of your own.

1. Explain the Issue

Ease the worry in the user’s mind by addressing the issue that landed them on this page. Simple errors may be a mistyped URL, slight variations in the URL, or even a recent site re-launch.

Gog’s 404 page alerts users the page doesn’t exist, and then encourages them to check their spelling and try again. If that fails, they also have the option of reporting an error. The simple design also stays true to the design of Gog.com and allows for easy navigation through the menu and search bar at the top.

This 404 page gives the user a few valid reasons why the page doesn’t exist. This actual 404 page is integrated into the design of the site, placing no doubt in the user’s mind where they are. Doing so also allows the user easy access to other content on site and encourages them to stick around.

2. Speak in Plain Language

User’s are never happy to see a 404 page when they have a designated goal in mind – to reach a page as quickly as possible. You can ease this frustration by injecting a little personality and humor into your 404 page. Your page need not be a hodgepodge of technical terms.

This 404 page provides a humorous short animation upon landing on the page.  The text supports the playful feel of the animation, while directing the user to where they should go through a clear call to action. The link to the homepage is commonly used on 404 pages to entice the user to stay longer on the site and get to know the company.

The light-hearted text on this 404 page alludes to the imagery it supports. It also offer the user the option of visiting the homepage and contacting the site to address issues.

3. Provide Tools to Remedy the Situation

A professional graphic with some light-hearted text is sometimes enough to soothe your but your goal is to keep user’s on your site as long as possible.  Give them paths to follow to prevent them from leaving.  Some common tools to remedy the situation include:

  • Search bar: If the page has been moved, give the user the option of searching for where it’s been moved to by including a search bar on the page.
  • Contact Information: If the user has found a faulty link on your site you’re not aware of, you’ll want to know about it. Including contact information, or a form, easily allows them to send you a message. If using a form, you may want to ask them to tell you which page they came from and what link they followed.
  • Menu: Including a menu allows the user to take paths in reaching their designated spot. It’ll also help retain the design of the rest of your pages so it’s not a complete departure from your brand.
  • Link to Homepage: If they’ve arrived at your site from another website, providing a link to your homepage allows them to get familiar with what your site offers.

The 404 page for Mixx explains the issue succinctly while providing links that allow the user to move on, including a link to the homepage as well as a way to get in touch with them for further questions.

This personalized 404 page shows a hint of animation studio’s personality, while making it easy for the user to get back on track by providing a menu of links.

Providing a search bar allows the user to search for where the page has been moved. Providing a link to post archives also aides the user in finding what they’re looking for much faster.

4. Retain the Same Design

Your 404 page shouldn’t be an unfamiliar departure from the rest of your site. This page should retain the same branding as the rest of your pages by including the same fonts, colors, and style.

 

The 404 page for Carsonified retains the style and visual language of the rest of the site, yet is unique enough to stand on it’s own. The page is integrated into the existing design, which establishes a sense of familiarity while encouraging the user to explore.

This 404 page retains the visual style of the rest of the site while being unique in it’s own right. Some characteristics of well-designed 404 pages appear here, such as the use of plain language, explaining the issue, and proving tools to remedy the situation.

5. Fix Broken Links

The best way to prevent a user from landing on your 404 page is to constantly check for broken links within your site. Once a month is ideal for checking for missing articles, videos, pictures and so on so your viewers will come across a 404 page less and less.

Nobody wants to encounter a 404 page. But it happens.

When it does, equip your errant site visitor with a user-friendly page that communicates the issue effectively with your audience. Remember your goal is to retain visitors and give them incentive to stay; the combination of thoughtful design, along with useful resources that get them closer to their destination are key aspects that factor into a successful 404 page.

Have you found some unique 404 pages that aren’t listed above? Or tips to make a 404 page the best it can be? Please share with us!

Print Friendly

About 

Stephanie Hamilton is the Owner/Creative Director of Atticus Pet Design Studio and a freelance Web/UI Designer. Holding a BFA in Graphic Design, she has several years experience helping businesses reach their full potential through strategic branding and good design. Follow her on facebook and twitter.

Get our Daily Newsletter

Get conversion optimization, design and copywriting articles delivered to your inbox FREE

28 COMMENTS

Robin Cannon

Really enjoyed this piece.

It’s very easy to assume that everyone knows what “404” means, but that’s probably not the case for a lot of web users, so making a friendly, plain English, and memorable 404 page can have a huge impact on keeping people on the site.

I like 404 pages that, while they retain some consistency of branding with the rest of the site, are still noticeably different. They’re actually single pages where a designer can play around a little, making a frustrating experience into a fun one, while still making it easy to redirect users back to the main content.

Oddly, one of my favorite 404 pages from a purely aesthetic point of view is actually not very helpful from a practical one. It looks great, brings a smile, but offers no assistance in getting back to the site content. A Ninja Stole This Page.

February 8, 2012 Reply

    Russ Henneberry

    @Robin Cannon — That’s awesome Robin! A Ninja Stole This Page!

    February 8, 2012 Reply

    damu

    awesome @robin! +1 for that :)

    January 7, 2014 Reply

Sanj Sahayam

Great Article! I love the “Ninja Stole this page” example. :) We use a simple site map with a summary of what each page provides as a 404 page. We also give the user a chance to email us with what they were looking for, should they not find it.

Another way to see if people are hitting pages that don’t exist is by using Google Analytics. Using analytics you know exactly which page(s) they were looking for by examining the addresses they were entering.

February 10, 2012 Reply

Mat Bennett

An obvious point worth making is to log the 404s and the what page or term referred the user to it. That gives you the opportunity to fix the underlying cause, recover lost pagerank and keep everyone happy…

… although it would mean less people seeing you cool 404 page

February 17, 2012 Reply

Matt

I love funny 404 errors. Here’s mine: http://www.elibs.com/opps

February 22, 2012 Reply

Constantin Druc

An useful plugin to solve no. 5 is Broken Link Checker. It will check your posts, comments and other content for broken links and missing images, and notify you if any are found.

Download link: http://wordpress.org/extend/plugins/broken-link-checker/

February 23, 2012 Reply

Simon Temple

Page sad clowned! http://www.explore.to/malformed-url

March 22, 2012 Reply

Nathan Smoyernatesmoyer

One of my personal favorite 404 pages – logos.com/404

Thanks for writing this. Too many overlook this real estate on their website. It is, as you say, a great place to grab the visitor’s attention.

April 1, 2012 Reply

chase

Lost? This one makes me laugh – http://www.allconnect.com/404

May 30, 2012 Reply

Tim

A nice list! We’ve redone ours as well: http://www.brandlabs.us/404

January 11, 2013 Reply

asadalirano

Its really informative especially identfying the missing links will help your website to get better results…

July 2, 2013 Reply

Tony

Hi Stephanie,

This is a great article on designing a 404 error page. I recently updated mine:

veesolutions.com/error.html

June 2, 2014 Reply

Thai

Woa, i very like the 404 page for Carsonified. So interesting!
Thank for your article!!

June 13, 2014 Reply

Abhijit Bangal

What a beatufiul article. I have never seen such excellent 404 pages before. And I am not saying jus tfor the sake of it. Nice efforts. Great output.

September 28, 2014 Reply

    Neil Patel

    Abhijit, glad you liked it. Thanks for the feedback :)

    September 28, 2014 Reply

Homework Help

Thanks Neil. We were struggling to put up a 404 page and were thinking to redirect it to homepage. This article helped us to select one :)

December 19, 2014 Reply

    Kathryn Aragon

    Glad you found it helpful. Stephanie nailed the issues that matter in a 404 page.

    December 19, 2014 Reply


Leave comment

Some HTML allowed

Get conversion optimization & A/B testing articles FREE >>>