23 July 2014

usability, web design Creating friendly and useful 404 pages

Here’s a couple of short and simple tips for creating better “not found” pages. I’ll also teach you how to use Twitter’s intents and mailto: links to help visitors alert you of dead links without them having to type a single word.

General tips

Dead links are inevitable; make amends on that page and provide ways for the visitor to find the original destination or at least other potentially interesting content.

Show and prepopulate a search field

Added on 12 August 2014: On Smashing Magazine, Donovan Hutchinson shows a great way for automatically guessing where the visitor wanted to go.

Often the visitor is looking for a certain piece of content. In this case a search field will definitely be useful.

Try prepopulating the search field with relevant keywords. If the page URL is e.g. /articles/friendly-useful-404-pages , filling the box with “friendly useful 404 pages” will let the visitor search for the missing article without typing a single word.

Google doesn’t help much. The robot drawing might help reduce the disappointment of encountering a dead link, but the page doesn’t even help search for the page the visitor was looking for.

Provide an opportunity to get back on track

Showing a list of links to commonly used “hub” pages will help the visitor find other relevant content.

At least provide a link to the index page. If your site is a blog, consider adding links to an archive page and to most commonly used categories or tags.

I’ve seen some 404 pages show a tongue-in-cheek heading: “Oh no! You broke the site!”

Don’t do that. The visitor has done nothing wrong if they’ve clicked a link that you’ve placed on the page. It’s your fault if the URL is wrong. Don’t blame the visitor for your mistake, not even jokingly.

A kind-hearted visitor might want to notify you of a dead link to prevent others from ending up in the same situation. You should make this as easy as possible.

On my 404 page I show two contact links that allow sending an automatically generated message.

I’m using Twitter’s web intents and a mailto: link to add the following information into the messages:

my contact information

a short message

the URL of the page.

This is how the Twitter version looks.

The link formats are below. The GET variables need to be URL encoded; Eric A. Meyer’s page is handy for that.

Sorry, looks like the code here is taking a while to load.

View link-formats on GitHub instead.

If you’re dynamically generating the 404 page, you can just encode and insert the URL into the links that way.

Since my pages are static, I’m using a little bit of JavaScript to do that. Here are the important parts of my code:

Sorry, looks like the code here is taking a while to load.

View 404.html on GitHub instead.

If you’re not using any other Twitter features on the page, you can add the async attribute on that Twitter’s script tag to load it asynchronously. You can leave the tag out if you don’t want the link to open a popup.

That’s it, now your visitors can easily notify you of dead links without having to type a single word.

Do you have more tips for improving error pages? Leave a comment below!

Related posts