Nothing says lack of thoroughness to a savvy prospect than a default 404 error page, or worse, a 404 that redirects to your hosting company’s default ad page. Usability concerns should be part of any designer’s standard practice, and 404 pages are just as important to user experience as navigation and call to action. Thinking about what happens when things go wrong demonstrates your attention to detail, and gives you the opportunity to flex some creative muscle.
An effective error page lets the user know what happened, retains your brand and keeps the visitor browsing your site. Once you understand the benefits that designing a custom 404 page can provide, you will be able to brainstorm your own unique concept and implement it in a few short steps.
When designing a 404 page, keep the following best practices in mind:
Send a Clear Message
404 pages are confusing and scary for visitors who aren’t used to seeing them. Users may misinterpret the page to mean your site is down or something is wrong with their browser, so communicate the problem clearly without placing blame. Large “page not found” type is usually enough, but using humor and illustration is far more effective.
If your site targets less-savvy internet users, include some content to let them know what is going on. Acro Media uses this method perfectly to inform users about the problem and walk them through the solution while instilling a little humor.
This design firm gets to the point a little more quickly, but provides a clear identity to let users know they are still in the right place, and navigation links to move on.
Use your layout and style
Getting a 404 error should not be the end of the world, so use it to keep visitors engaged. Your logo should be clearly visible, and if you use a CMS, include the page along with the rest of your site pages so it retains the user interface. If you are not using a system that dynamically updates the interface and navigation, keep your 404 page as simple as possible. Include a link to the home page, some suggested links and a search widget to help visitors get to where they wanted to go. Make sure any links you include won’t be changing anytime soon…you don’t want a double-404!
Design your error pages to match the layout of your site when possible. Consistent design promotes your creative skills but also reduces your visitor’s confusion. Battle.net uses a fluid layout to make sure their 404 design looks great on any screen size.
This 404 page appears within the site’s CMS layout, making it easy for visitors to move on.
The below example by http://huwshimi.com is creative, funny and informative, but there is nothing to identify this as a huwshimi page besides the URL, and no way for users to browse the site or do anything about the problem.
Track Errors
Most of the time, a 404 error is caused by a mistyped URL, bad search results, or a cached page you have since moved or deleted. Use logging or a tracking script to help figure out the cause and try to eliminate it, even if you have a brilliantly designed 404 error page. Trackers help identify where a visitor was coming from, what URL they were trying to reach and, in some cases, what search terms were used. If you use a CMS such as WordPress, plugins may exist to help you locate and fix broken links automatically.
If tracking is not possible, include a contact link to encourage visitors to report broken links to you.
Make it entertaining
You have already captured your visitor’s attention with the 404 error, so why not make it memorable? Clever use of illustration, photography or content can turn your 404 page into an opportunity to entertain your visitors and convey a lighter side to your personality or brand.
Give your visitors something to do. Using this example, you could offer a riddle, some brain teasers, a game that gets users to click a graphic to visit one of your site pages, and so on. Here is some inspiration to get you going:
This page uses humor perfectly. Visitors understand the mishap and are invited to browse the portfolio
.
Agens uses illustration to communicate the issue in a humorous way. Visitors can continue by using the main site navigation.
45royale keeps their information light-hearted while providing visitors a list of popular posts.
This 404 page makes use of funny photo elements and thoroughly explains the problem.
GitHub uses parallax effects and pop references to keep us entertained.
This designer uses humor, strong call to action and bold illustration that fits her site style to handle her 404 errors.
Mozilla demonstrates great 404 design by explaining why the problem might have occurred, inviting visitors to report the problem and retaining navigation so visitors can move on.
Creating Your Page
To implement a custom 404 page on a site that is not using a CMS, you need to modify your .htaccess file to include this line:
ErrorDocument 404 /404.html
If you use WordPress, check out their quick rundown of how to create a 404 page template.
Step 1
Create your 404.html file as you would any other webpage, including the elements we have covered so far. Ensure any links to images or pages use the full, qualified URL and not internal paths. Creative Commons is a great place to search for offbeat images, or you can use your own illustrations or even video.
Step 2
Make sure the finished file is larger than 512kb to get around the Chrome and Internet Explorer “friendly” messages that try to kick in.
Step 3
Implement your tracking solution. Here are a few tips to get you started:
- Using Google Analytics to track 404
- Twatch
- AListApart: JavaScript solution
- Broken Link Checker for WordPress
- Drupal CustomError Module
Step 4
Upload the page to your site root.
What Not to Do
Avoid using tricks like URL redirection, which funnel 404 errors to a specific page on your site such as your portfolio or homepage. This tactic works if you need to redirect an old URL to a new one due to a site move, but should be used with care. Imagine how frustrating and confusing it might be if someone attempted to go to your contact page and was redirected to your home page, never realizing they were typing the URL incorrectly. For this reason, informative 404 pages are always a safer bet.
Vail from DesignArticleWriters.com is a designer and tech blogger who enjoys writing everything and anything about design and tech. She love to recommend people who provide awesome stock photos to design community around the globe.