Designing for 404

<p class="intro">I'll forgive you if you don't know the meaning of 404.</p>

Why should you? Unless your a technical web architect that specific combination of numbers should never of crossed your path.

But you probably do. A lot of people do.

It's the server is throwing it's hands up in the air and saying I'm so sorry! The page you were looking for does not exist, better luck next time. Standard error pages don't give a lot of help to the user, creating a custom 404 pages for your site is deadly important and this is why.

The Importance of Damage Control

A lot of designers tend to focus on the nice side of web navigation, where everything is running smoothly. Visitors drop into your site, find what they want and scuttle off again with not one problem. It's not fun to design for when everything goes wrong but I think that's gotta be more important then the well traveled road.

When a user hits any error, especially 404, this is red alert. They are split seconds away from closing the window and finding another source of information, products, work or what ever the purpose of your site is.

You are literally haemorrhaging sales.

You might not expect users to ever land on a missing page but no does, that's kind of the whole point.
So 404 pages are pretty important right? How do you actually design a decent 404 page?

I was just getting to that...

Lose the 404

Yeah I get it, you're a nerd.

You know what 404 means, I guess you must be one of the many people alive in the nineties . Don't get me wrong, I'm glad you've taken the time to craft a custom page, it's a lot better then browser's default page. Or is it?

No one should know what a 404 error means, as a user browsing your site I literally couldn't care less, all I care about is finding the content I want, thank you.

Keep it simple

Just like every other page, visitors are landing at this page with a purpose. A list of your recent tweet is not going to help me. Neither is a link to the webmaster's email, allowing users to inform you of a missing page, that's your job not theirs. Neither is a picture of a ninja, surprisingly.

And I definitely don't want to see any adverts, you lost to right to make money from my time when you failed to give me anything in return.

Give them smart options

Let's think about why the visitors are on the 404 page and how can we help them on their pursuit of happiness. The primary navigation of the site is a good start, giving the user an outline of the structure of the site.

Let's not stop there.

How about search box? All the user needs to do it throw in what they were looking for and a list of results will be displayed for them in one click.

We could go even further though.

Don't even have one

The user has probably already performed a search to get to your 404 page already right? Why they have to type in the same words again?
You already have a clue about what they are looking for, up there in the url. On this site, if you enter on a missing page, the system grabs the words contained in the url and performs a search based on them.

Give it a try:

Useful stuff right? We can even reduce the time and number of clicks to 0 if there's only one result. This site automatically redirects if there is only one result.


That's the ultimate damage control, not only does the user not have to deal with the extra baggage of '404', they didn't even know there was a problem.

If you're out there running Drupal, you can add this functionality in minutes with the Search 404 module.

Sites that get it right

If you're looking for some more ideas, here are a list of sites that handle 'page not found' errors really well.

Vimeo 404

Mozilla 404

Real Mac 404