Principles of Designing a Killer 404 Error Page

A 404 error page is the page that loads when an invalid URL is entered in the address bar.
I’m sorry but I had to define what a 404 error page is, now let’s move on.

By default, such 404 pages contain a message that goes something like this:

“Sorry, we cannot find the information you are looking for.”

But the user takes it as:

“This is a stupid website, I’m out of here”

We need to do something here. We have to understand that an error page is bad news for the user. It tells the user that he/she has made a mistake and his time has been wasted.
This affects user behavior so we, as web designers have to convert this bad experience into an opportunity.

How can we do that? By following these simple principles of designing 404 error pages.

1. Explain: Take the User in Confidence

We geeks often forget the fact that common internet users are not as advanced as we are. We have to explain them things which are obvious to us. One of them is explaining the 404 error.

Our 404 page should contain description of what went wrong and how to move forward now. We have to make sure that there is no confusion on their part.

Blame

While we explain, we must also be careful not to blame them for anything. But it is also important not to take blame on you. If you blame them, you are accusing them, and if you take the blame you are just showing your weakness. So a sentence such as this one: “you have entered a wrong address” is horribly wrong, but it can be tackled down to: “maybe someone gave you the wrong link”.

Writing the Copy

Communication rule number one is that if the situation is negative, you must never use negative words. These negative words are: no, don’t, cannot, sorry… and so on. So you must craft your copy intelligently. A message such as: “Sorry, we cannot find your page” shows your weakness.

Examples

Starbucks coffee uses a simple but effective way of telling their users that what went wrong, and what they can do now.

Under Consideration uses an incredibly simple design, but the text really funnels all 404 page visitors to the homepage.

Hootsuite doesn’t just tell you what went wrong, they also use a little bit of humor. Check out the bottom two reasons.

2. Humor: A 404 Error Page’s Best Friend

When make someone smile, you win them over; this is no secret, right. That is the reason most of the 404 error pages focus so much on funny error pages.

You bring them an error, but you cheer them up. How can they be mad at you now?

There are countless ways of being funny. You can be punch-in-the-guts funny that uses slang and maybe some curses, or you can be sentimental, you can be humorous and you can also add some satire. It depends on the kind of website you are dealing with. If you are making a blog about marital advice for women, you would add some romantics, but if you are designing a 404 page for metal band, perhaps you should go a little over-the-top.

Examples

Lark News 404 page contains a list of explanations. But none of them is the technical one.

Cuban Council takes a rather naughty approach to their 404 page.

Unlike the example above, Zivity uses a very cute design. It doesn’t make you laugh but sometimes, a smile works better than a laugh.

If your website is called Retard Zone, you can write almost anything and use almost any image to portray the problem.

A List Apart is a famous website for web programmers. Their 404 page contains a reaction gif.

Even though the tone is very offensive, actually that’s the humor. This website sells comics and cartoons.

If you don’t get it, don’t worry. This one is only meant for geeks.

3. Creativity: Inspire the User

Sometimes, humor is not the option. Or maybe you want add something to humor portion for further enriching your design. This is where artistic creativity comes in.

You can draw something, use an artistic or conceptual photo, you can do anything. But all you have to remember is that the design of your 404 error page must blend smoothly with the rest of your website. It must not hurt consistency or theme of the design.

Examples

Designer of Jack Rabbit shows off his design and digital art skills.

Being creative is not just about designing, the copy can also do wonders.

This is a minimal design but it works only for techies, who know what 404 means.

Image hosting site Imgur also has a thematic 404 page. This website is mostly used to share photos of cute cats and other animals.

4. Usefulness: Give the User a Way Forward

It doesn’t matter how tasty ketchup is, it doesn’t satisfy hunger. And that’s the point here. Humor and creative art you that put in the design are like ketchup, they make it tasty but they are not much useful.

Humor and creative arts have just made the user’s mood a little better, now he/she is willing to give you a second chance. So now you can direct them to wherever you want to lead them.

Most websites try to lead their 404 page visitors to their homepage, but that’s not really a good idea. You should give your visitors multiple options and let them choose according to their desire. Here are the critical error page elements that must be placed in any 404 page.

Search Bar

In my opinion, this is the most important element if yours is a blog or any website which consists more than 20 pages. However, if you have a single page website, or course search bar will be excluded from the page.

Email form

This is very important element if yours is a business website. That’s because every visitor is a potential customer, and you can never let them leave unattended. If they are having trouble, you must provide your email form so they can contact you and the business keeps on growing.

Categories/Tags List

Mind you, while this is a good idea to put categories of tags on the error page, you must not overdo it. Only the most important categories or tags can be placed here. Anything more than very essential amount will create clutter, and clutter is confusion, and confusion is bad user experience.

Featured Posts

Just categories, adding featured posts can also be a good idea, but again, just like categories, you must not add too many posts on the error page.

Examples

Popscreen presents a clearly visible search bar so the user can search for the content which they are looking for.

Average Joes shows off their featured content and Facebook fan page link.

WP Beginner uses a category cloud.

5. Limits: Never Cross Them

Staying within limits is another very very important aspect. Every website has a target audience. Your message, design, layout, language, and all other tools of communication must comply with the norms and values of that typical target audience.

Usually, we cross the limit trying to create humor. So you have to be extra careful when it comes to creating humor.
If the website permits using PG rated language then okay, otherwise be careful in language especially.

I won’t go into much detail about this aspect because we only cross these limits in ignorance. If you are constantly aware of and looking for them, then nothing bad happens.

6. Structuring: 404 Vs. 301

Doctors say that prevention is better than cure. 301 is the prevention and 404 is cure. Now let’s check them both out. We’ll have to start with 404:

Why 404 Errors Occur?

Let’s take example from this very article. Let’s say you like it and you share it on your blog or social media profile. But six months from now I decide to write another article, a much bigger one on the same topic. I write a new article and delete this old one. Now what will happen?

What happens now is that the visitors who click the link of this article on your blog/social media profile will face a 404 error page.

This was just one example, but there can be many scenarios when a website can decide to remove a page or change its URL. Either case, the old link is now invalid, hence users coming into that link will be greeted with a 404 error page.

301 to the Rescue!

301 is a type of redirect that tells the search engine that this particular page has been moved to another location. For human visitors, 301 automatically redirects them to the new location.

If the website is structured properly then no 404 errors take place, hence the user never has a bad experience.

301 is the technique recommended by all techies and that’s why all good websites have effectively applied it. We at Designzzz have also applied the same technique and our 404 errors are very very low.

SEO Perspective

404 errors hurt your search engine rankings, so you should try to avoid them as much as you can. Once a link is made, either don’t change/remove it or use 301 redirects if you do.