Market Veep Blog

Drive In More Leads

Picture of Max Kiniklis
By Max Kiniklis in August, 2018 | 6 minute read

Web Design

The Importance of a Well Designed 404 Page

Too often, 404 pages are left untouched. A 404 page is an opportunity for you to display a little bit of creative freedom and apologize to your users at the same time. If designed well, a 404 page can help keep the traffic on your website and assist users in finding what they’re looking for. You can even use a 404 page as a conversion opportunity.


When building a website, everyone gets swept up in the excitement of the new design and features, pages such as the 404 page can get overlooked. Sure, browsers offer default 404 pages, but those do nothing for your website and can hurt the experience of your users

A 404 page is your website’s way of saying sorry for not being able to find the content the user was looking for. If the page is left as the default error page, it can come across as lazy and uncaring. Use this opportunity to instead make a good impression and retain users.

Why are 404 pages important?

It is often said that a company’s website is it’s best salesperson. They have the most customer interactions out of anybody in the company. It only makes sense that the same customer service rules that apply to normal salespeople should apply to the website as well.

Let’s say you walk into a grocery store to buy some food. You walk up and down the aisles until you reach the breakfast aisle only to find your favorite brand of cereal is no longer there on the shelves. Confused and worried that your morning routine of coffee and delicious sugary cereal will be thrown off, you find an employee to help you out.

Hopefully the employee tries their best to remedy this awful situation by finding a replacement cereal so your shopping experience isn’t ruined. Good customer service not only helps fix a bad situation, but lets your customers know that if something unexpected does happen, they can still count on you.  

Now, imagine if instead of receiving good customer service, you found an employee who did the bare minimum. They tell you your cereal is out of stock and then turn their back and walk away. As a customer, this just makes the whole situation much worse. Not only did they not have what you were looking for, but it’s as if they don’t care to begin with.

These experiences aren’t just unique to physical stores. They happen thousands of times everyday online as well. Your 404 page is your chance to apologize and provide a good experience for your user, even if you don’t have the content they are looking for.

Making a good impression with the 404 page and offering helpful tools helps users stay on your website for longer. When users encounter a 404 page, almost 74% of users leave and don’t return. That’s a huge number leaving because of an error. That’s why it’s important to develop a well designed error page and provide them the ability to dive back into your website.

What makes a good 404 page?

The great thing about 404 pages is that they allow for so much creative freedom. It still has to do the job of a 404 page, but how you go about doing that is, for the most part, up to you.

When you look at the basics of 404 pages, they really only have two purposes. First, it should inform the user that an error has occurred. You don’t have to go into detail about the error code or the nitty gritty technical jargon. Instead try to word it in a way that users will understand quickly and easily.

The second goal is to keep your users on your page. The last thing you want is for them to encounter the page and immediately leave. Give them ways to return to your website and make it feel as if they never left your website to begin with.  

Generally, there are a few other guidelines you want to follow when creating a 404 page. Most of these should be common sense, but some are a little less intuitive.

  • No ads - Please keep ads off of your 404 page.
  • Keep the page simple. Just because you have some creative freedom, doesn’t mean you need to go wild. The purpose is to inform your user that an error occurred.
  • Keep the style consistent. You don’t want your users to feel as if they never left your website to begin with. Make sure colors, fonts, style guidelines, and general structure are consistent with the rest of your website.  
  • Include a way back to your website. Whether it be a navigation menu or links, you’ll want to keep your users on your website, so give them a way back to the good stuff.
  • Keep the language simple. Not everyone wants to know exactly what caused the error; they just want to know as quickly as possible that an error has occurred.
  • Never blame the users. Even if it was their fault and they entered the wrong URL or clicked on something they shouldn’t have, never cast the blame to them.
  • Offer additional content. If the blog post they were looking for is no longer available, offer links to some of your other posts. Don’t go crazy with this and try to limit the amount of additional content you offer on the 404 page.
  • Load the page quickly. No one wants to wait for a 404 page to load. Long load times have been shown to drive away traffic. The last thing you want to do is make your user wait only for you to tell them you do not have the content you made them wait for.
  • Have fun. Don’t be scared to have fun with this. It can be as serious or as light hearted as you want it to be. Many websites use a little bit of humor to lighten the situation and make their users chuckle. Not everything has to be serious all the time.

What makes a bad 404 page?

It usually isn’t hard to spot a bad 404 page when they come up. They can stand out like a sore thumb and disrupt the whole experience.

Often, the worst 404 pages are the ones that have been left untouched and a default 404 page appears. These default pages have no style and can display long error codes with complex language. Not only do these disrupt the overall flow of your website, but they can also drive your user away.

Examples of Well Designed 404 pages

HubSpot

HubSpot 404 error page

HubSpot has a great 404 page. It’s clean, simple, and gets the point across. It thanks the user for being patient and offers additional solutions to solve their problems.

WordPress

WordPress 404 error page

WordPress has another great example of a 404 page. In addition to being simple and explaining the situation, they put a search bar on their page so users can search for any content they might have been looking for originally. This is a great way to bring users back into your website. In addition to the search bar, they have a sign up offer to increase the number of users and convert more leads.

GitHub

GitHub 404 error page

GitHub takes a slightly different approach and uses humor and a well known pop-culture reference to explain the situation. On top of that, they also offer a search bar to lead users back into their website.

CloudSigma

CloudSigma 404 error page

CloudSigma keeps it simple and uses humor to explain why an error may have occurred. They also have a big button in the center to lead users back to their homepage. While there is not much more than a background image, a few lines of text, and a button, it all makes for an effective 404 page.

Conclusion

A 404 page, like any other page, is an essential component of your website and can impact its success. They have minimal criteria and content, so design is as important as ever. Take the time to come up with new and creative ideas to give your users a breath of fresh air from the traditional 404 page. Not only will it help with the overall user experience, but also keep users on your website.

An Introduction to Growth-Driven Design

Related Posts