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
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
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:
- Smashing Magazine: 404 Error Pages: Reloaded: A great gallery of inspiring 404 pages.
- A List Apart: The Perfect 404: Learn more about making that perfect 404 page.
- Google: Make your 404 pages more useful: What Google suggests your 404 page includes.
- Plinko: Do-it-yourself 404: A do-it-yourself guide to a custom 404 page.
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!