5 Tips to Make Your 404 Page More Usable

A 404 Message can be disorienting, but it doesn't have to be. These tips will explain what's important about an effective 404 page to get your users going in the right direction.

In this post I will outline 5 ways to make your 404 error page more usable. In some cases, a 404 page may be the first impression a visitor has of your site. Why not make it a good one? These steps can easily lead to a better user experience if implemented and should be a part of every web site you develop.

1. Ditch the Default

Customization of your 404 page is the first step when improving your error page. The default error message is not helpful.

In most cases, landing on a page that results in a standard 404 Error means that your viewers will only have the option to return to the previous loaded page. If your user lands on a 404 page from an outside link, then you have no chance of retaining the visitor unless they visit your domain directly. Do not expect users to put forth this much effort if you have not put forth the effort to make your page more user friendly.

Customization is easy and can make a world of difference. There are guides on creating your own custom 404 page for services such as WordPress and Apache.

2. Keep it familiar


Yahoo! keeps it’s 404 Message short and simple, but it is evident that the page is a part of Yahoo. Sometimes, it just makes the most sense to start back from square one.

When designing your 404 page you want to keep the same basic structure as the rest of your site. When a user lands on a 404 page that looks completely different from the site they may wonder if they have left your site completely.

At the very least, keep a recognizable banner or logo that a viewer can instantly connect with in your 404 Error Message. Simply seeing a familiar graphic will be reassuring enough for most.

3. Keep it Basic

Your 404 page should be kept basic so that you do not intimidate your user; the fact that your user has stumbled onto an error will be overwhelming enough for them. The main goal of your 404 page is to direct your user to the page they were looking for as quickly as possible.


Digital Photography School Blog is quick to connect users that land on a 404 page with the most recent content posted at the site.

This goal needs to be met in a way that will benefit a broad audience, but again, too many options will quickly make the page ineffective. Offering links to the most used pages on a site is one way to ensure you’ll help a wide number of users: For some sites this may simply mean including the primary navigation, while on blogs and larger sites it may mean including links to the most popular posts/child pages.

Since it’s usually impossible to list all of the pages on a site without creating an overbearing collection of links, including a site search is another great way for connecting users with what they are looking for. If the basic choices you as the developer provide don’t match what the user needs, they can search themselves for the right page.

4. Offer some direction

Your 404 page should offer a few key links and directions your user can choose between. One of the most important links to have is a “Home” link—a quick and friendly way to start over. For many this will be the first choice, but there is still good reason to provide a few other options such as global navigation which many of your viewers will already be familiar with.

Again, it is highly recommended to include a search bar in your 404 page. Users who land there may know what they are looking for, and it will be easier for them to simply type in a term than sort through your navigation.

Once more, do not overwhelm your user with choices: offer a link to the index, and two to three other main pages on your website.

5. Be creative but don’t get crazy

Bad 404 Page
A 404 page that looks like the blue screen of death could confuse users.

A little creativity on a website usually doesn’t hurt, but there is a difference between creative and unorthodox. This applies to your 404 pages as well. Get too creative, and you may not be anymore helpful to your user than the standard message (even though you might have more style).

Consider WP Candy’s 404 Page. The usual structure of the site is left intact with primary navigation and search, there is a nice banner that let’s you know where you are, and there is even a reassuring message that let’s you know some pages may have been moved. What’s unusual is that the 404 Message also contains a short video of the site founder himself, encouraging you (the user) to keep on searching for that page (appropriately set to a tune from Indiana Jones). The 404 Page is still effective with the video, and now has a bit of personality.

Now compare to This 404 Page that mimmicks the infamous BSOD. While it does provide a link back to the index, there is no visual confirmation telling you what site you’re on, no search, no real message… nothing.

We’re proud of our 404 page

UX Booth 404
The UX Booth 404 Page showcases aspects detailed in this article.

Feel free to take a look at the UX Booth 404 Page. We are proud of it and feel it is a good example of what one should look like.

Resources

To learn more about 404 pages feel free to follow these links:

So how about you?

What do you think makes a good 404 page? How does your 404 look? What are some of the best and worst 404 pages you’ve seen? Let us know in the comments below!

About the Author

Matthew Kammerer

Matthew sells advertising by day and keeps frogs by night. He was introduced to the world of user experience through his UX Booth cofounders and knew there needed to be a publication to learn through sharing.

Related Articles

33 Comments

  • David Reply

    I was thinking about this a few days ago and I must say it is something that people don’t consider enough. On bigger sites that have been around for years, you may receive a large number of 404 for incorrect links/old links.

    Nice one guys!

  • Patternhead Reply

    Nice article.

    PatternTap.com has lots of useful examples of 404s

  • Amanda O’Brien Reply

    Great article thanks for sharing. We always try to make useful 404s.
    Another aspect people forget about a lot is form returns. Why ditch people after they contact you? Why not try to keep them on the site and offer them more information and suggestions.
    Thanks again.

  • Mike Reply

    Neat! I just subscribed to this site yesterday and the very first thing I see is a yahoo page I did in 2002. Nice targeting!

    For pages like this, I try to keep these things in mind…
    – The error message should be the first read.
    – The error is not the user’s fault.
    – Give users a way to recover. Maybe there’s another way to find what they might have been looking for?
    – At least give them something else to do. Ideally, that something is on your site.

    Cool site!

  • Matthew Kammerer Reply

    Thanks guys!

    @Amanda O’Brien: Oh, interesting topic that I may be able to cover. :)

    @Mike: Oh yea? That’s very neat :). Great additional points. Explaining errors clearly is a big part of UX. Welcome to our site, I hope you enjoy,

  • Ryan Reply

    All very valid points nothing frustrates me more than a website that hasn’t thought about crafting a useful 404 error page. Heres my 404 page http://www.thecssninja.com/404

  • JV Reply

    I haven’t thought of that. Really! LOL. But anyway, thanks for sharing these tips and tricks you have. It’s a good one though!

  • jaronbarends Reply

    On my 404 page (http://jaron.nl/404, in dutch), I also tell the visitors that an email has been sent to me automatically to inform me of the missing link. That way I (try to) show them that I care about what happened.
    Also, I’m always intrigued by the fact that almost everyone who designs a 404 page still mentions the term “error 404″ somewhere. My opinion is that that’s information no user (except geeks like ourselves) needs.
    Something I considered lately: when you’re using pretty urls, would it be an idea to prepopulate your searchbox with the words from the url? (so when you typed http://www.somesite.com/some-blog-post-about-something the search field would be prepopulated with “some blog post about something”)

  • Steen Seo Öhman Reply

    Great post

    A very overlooked topic.

    The 404 page should ideally be a integrated part of your page, with links to the most popular content, and the content you want the user to see.

  • Adrian Reply

    Hi All,

    There is also a little script you can get from Google Analytics (or maybe it was Google Webmaster Tools) that searches your site and gives a few possible options based on the data in the broken link. It may also fill in the search field with data from the broken link so people just have to press ‘Search’.

    http://www.adrianbruce.com/readinggames

    cheers

    Adrian

  • Farid Hadi Reply

    I really need to work on my 404 pages :)
    Nice article. Thanks.

  • Art Reply

    superb im very very thank ful :)

  • Rahul Reply

    Kudos to the 404 page. Which also good for your search engine rating as well.

  • Micheline Reply

    I really like your UX Booth 404 page. What a great idea to include a list of your categories in a simple bulleted format.

  • Module23 Reply

    Thanks for that list. The UX Booth is a good example of good practice!

  • Shay Reply

    Great post!

    I think good 404 are important yet often over looked. Hopefully no one will see your 404 page but in the chance that they do this is your opportunity to capture their interest, help them out, and keep them on the site rather than quickly leaving.

    I have put together what I feel is a pretty good 404 page on my website. Check it out at http://www.shayhowe.com/404/ and let me know what you guys think.

    Thanks!

  • Rellek Reply

    For those reading this that use wordpress for the CMS there is a great plugin called “404 SEO Plugin” that automatically provides relevant links based on the visitors search term that lead them to your site.

Leave a Comment on This Article