Making friends with the 404 page
Wouldn’t it be great if everything online went right all the time? You click a link and it takes you exactly where you wanted to go. You find that recipe in a timely manner. You renew your driver’s license (or sign up for a class, or order shoes for your niece) lickety-split, no problems.
It’s a nice thought.
In fact, our real life online too often deviates from our utopian ideal of the digital experience. Servers go down. Cryptographic protocols get hacked. Files move and can’t be found.
As a content strategist, at least you can improve one of those scenarios.
The venerable HTTP code 404 error page (some usability experts have gone so far as calling it the “dreaded” 404 error page — but we won’t go that far) has its roots in the beginnings of the web. And while we won’t provide a full history lesson here (you can find that on Wikipedia), let’s just say we’ve all run into it.
If you’re in charge of content for a website, befriending your 404 page is important. It can turn an otherwise unsatisfactory user experience into an okay — or even delightful — one. I know this may be tough for some of us to accept — me included. But a 404 is not the end of the world.
I’ve searched around for the best tips on creating 404 pages, and compiled them here, along with a couple of my own.
An ounce of prevention
First, take precautions. Do everything you can to prevent the visitor from seeing a 404 in the first place. Maybe it’s my background in ecommerce, where every bounce represents cold, hard cash, but the idea of showing an interested visitor a 404 page gives me chills.
Specifically, when you remove pages from your site (and we know you do, because you’re big on maintaining that content!), set up a 301 redirect to send traffic where you want it to go. Is there a new version of the page? Did you retire a product and want to show your visitors the newer, shinier version? Don’t make them hunt for it. HTTP code 301 lets you send them there. If you want to learn more, The Moz Blog offers a good explanation of 301 rewrites and redirects.
If there is no replacement file — it hasn’t been moved, it’s gone for good — don’t redirect your 404 page itself. For example, don’t send the visitor to the homepage instead of a 404 page. That will just confuse them. (“Does the homepage have the widget I was searching for?” they may think. “Or did I just get redirected?”) Send the requesting server, which will include search engine spiders, a 404 error code, so they know the old page is gone and stop sending traffic to it.
Also, be sure to style the 404 page like the rest of your site. You might as well, right? As Dummies.com notes, it keeps the visitor from getting confused about where they are.
Copy “do’s” and “do not do’s”
You’ve set up your redirects. Now that your visitor won’t get the 404 page unless she has an honest-to-goodness missing file on her hands, several sources can provide us some useful instruction on how to break the news.
A good 404 page says, “Yep, something’s wrong. You figured it out. Our bad.” And then it gives the visitor a way to find something of use. The principles here (courtesy of Jakob Nielsen) are:
- Be polite — don’t blame the visitor. An apology is a nice touch. (“We’re sorry.”)
- Explain what happened in simple language. (“The page you’re looking for doesn’t exist anymore.”)
- Tell them what to do next. (“Check out our homepage or browse our selection of widgets.”)
Next steps
Speaking of links, I found lots of recommendations for which ones to include on your 404 page.
You may not need all of these, but in the interests of giving you a comprehensive view, here are the links and page elements recommended by Nielsen and others:
- Homepage link
- Site search box
- List of the most popular categories or pages, with links
- Sitemap link
- Contact Us page link
One really helpful set of links that I like to see on 404 pages is a list of suggested resources. You can see this in action on the website for Rackspace Hosting — try to navigate to rackspace.com/reindeer and note the friendly suggestions it returns.
You can achieve this effect on your site either by embedding a Google site search in the page, or using the (hilariously named) mod_speling Apache web server module for Linux servers. If you’re clever with programming, I’m sure there are other ways to accomplish this feat as well.
As an aside: I personally prefer to err on the side of fewer links. I don’t see any point in having a homepage link on your 404 page, if your logo at the top left of your site links to home (as it should). Same with the search box, assuming it’s taken up residence on the top right of the screen. But feel free to test these elements, and adopt what works best for your visitors.
The nice-to-haves
One good piece of advice from Google is to provide your visitor a way to report the broken link. This could manifest itself as a link to a form the visitor can fill out. That way, the visitor has a way to communicate the problem to you, which might reduce his frustration. And you become aware of, and fix, the problem. Win-win.
We talked about styling the 404 page to fit your site design, but what about more creative visual design touches? Several web publications have curated lists of fun, cute, and clever 404 pages. Here are a few, if you’re looking for inspiration:
- Hongkiat.com: 60 Really Cool And Creative Error 404 Pages
- Creative Market: The Best 404 Pages on the Internet
- Mashable: 33 More Entertaining 404 Error Pages
You can also find dozens more inspiring examples, free for the Googling.
Just remember that, although cute and clever may score you bonus points with your peers in the digital industry, your first responsibility is to your visitor. So make sure you give her all the information she needs before you unleash your creativity. Otherwise you run the risk of frustrating her, turning your adorable design into an irritant.
How do you like to customize your 404 pages? Are there any important pieces of content I left out? Comment and let me know!
Originally published at scattergather.razorfish.com on May 2, 2014.
