SALES / SUPPORT : 844-261-1206 (Mon-Fri, 09:00-17:00 EST)

Designing 404 Pages- Making Error Pages Fab, Not Drab!

By Eva Barnes , Jun 27 2016

Featured Image: iStock/sumkinn

For years, 404 error pages have had a bad reputation with the online community. Not only do they irritate people seeking pages filled with information they need, but they also tend to ruin site rankings due to increased bounce rates. While 404 pages may be the result of webmasters’ inability to properly link pages, they can be caused by search engines reacting slowly to the request to de-index a page or even a typo from your end.

404 pages may have a nuisance been deemed not a long while ago, but they’ve now become the ‘IN’ thing in web design these days. In fact, a well-designed error page with exciting content can actually make your site’s visitors give the rest of your site a second shot and navigate through it. As a result, your site’s bounce rates will decrease, page views and session duration will increase, and your site’s ranking will improve. 

With so much relying on one teeny tiny page, you can’t afford not designing one for yourself. However, there’s so much you should know to create a friendly 404 page that won’t repel your visitors. And that’s exactly what the following lines have in store for you.

The following 10 tips were inspired from real-life 404 pages that have proven to be a massive hit with site visitors. Use these to fuel up your own creativity and come up with a page that will get your site listed among the friendliest online.   

1. Help Visitors To Navigate Through Error Page

When you design your 404 error page, make sure that it encompasses relevant information. It should explain your users that though there is an error, yet they can easily navigate out to other available options. Your ultimate goal is to keep your site visitors hooked!

Add links to homepage or sitemap and other navigations in the header and footer, similar to other pages of your website.

Make sure that you do not provide too many options on the error page. It might confuse your user, so just make sure that there is an obvious call to action.

Lego 404 Page
Image Courtesy: Lego

Lego uses its famous characters on the error page. Seems like someone has pulled the plug out and therefore, you have encountered Error!

However, they have added a visible call to action button ‘Back to Lego.com Home’ and other important links in the header and footer. They made sure that the users can conveniently navigate through any of the available links.

2. Explain The Situation To Users Like A Human

Ease your users by explaining them in a layman context that what could have went wrong due to which they have landed on an error page. Treat the error page of your website as an information portal. Just assure users that they are on the right website.

Simple errors may be a mistyped URL, slight variations in the URL, the site does not have that page any more or may be a recent website re-launch!

Also remember, not to include too many technical jargons that are difficult for the users to grasp and swallow. Hopefully, you don’t want to scare your users and drive them away! 

Mutacao 404 Page
Image Courtesy: Mutacao

Mutacao’s 404 error page provides enough valid reasons to users that why they have encountered an error page. Mutacao has integrated this page in the site’s design, giving its users not a single complex doubt that why they are here. This definitely encourage users to hook around the website.

3. Include A Search Bar

In the context of the above tip, include a search bar to assist your users in browsing through your website without much disruption. A search bar on error page will help your users to look for their desired pages or content, conveniently.

MailChimp 404 Page
Image Courtesy: Mail Chimp

The MailChimp’s 404 error page features a relative of original chimp, giving users a hint that they have landed in the wrong place. There is a search bar as well to help visitors find their way out.

4. Follow The Same Design Pattern

Your 404 error page should not be an unacquainted departure from the rest of your website’s pages. Use the same branding on error page, as you have done for the rest that includes the fonts, colors and style. If you don’t follow this tip, then the error page will reflect users that they have landed on an incorrect website and they will drive away!

HubSpot 404 Page
Image Courtesy: HubSpot

The HubSpot 404 error page has the same visual style, which found on the site’s rest of the pages. Though the error page is yet exclusive. Its error page establishes acquaintance, which on the other hand encourages user to explore further. It is one of the well-designed error pages that uses simple language and links to navigate through the site.

5. Entertain Users With Notable Visuals

It does becomes very frustrating when you are looking for something really important and instead you land on an error page. Moreover, today’s users are impatient and they don’t like encountering bugging apps and 404 error page messages.

You can effectively utilize your graphical skills here and design a super cool 404 error page with alternative illustrations and backgrounds to retain your users. Using soft images and vector characters give a feeling of making a boo-boo to the user.

However, on the other hand, if you use simple plain text on the error page, it seems like users have made a technological disaster from their end. We definitely don’t want them to get confused and leave our website immediately.

Huwshimi 404 Page
Image Courtesy: Huwshimi

Ninjas are considered as a ‘crowd-pleaser’ and may be therefore, Huwshimi has effectively integrated this concept in its 404 error page design. The art on this page speaks itself due to its perfect use of colors, framing and technique.

6. Design Interactive 404 Error Page With Humor!

Another way to make this unpleasing situation in your favor is to use good humored and up-beat language, characters and concept.

Talk to your users in lively context, use colorful headlines (if relevant). This will undermine the exhausted mood of users, which is often held to such errors. Don’t let your users feel that it was their fault!

Add a little humor on your 404 error page or make it interactive. Such error pages (if implemented properly) literally please users and they don’t take error pages seriously.

Here is one of the most amazing interactive concepts:

Emailcenter 404 Page
Image Courtesy: Emailcenter

Emailcenter’s interactive 404 error page is effective and creative. They have highlighted that it was their fault and have pointed the developers, who were responsible for this inconvenience.

Emailcenter 404 Page 2

The concept is really interesting and is essential for retaining visitors, establish personality and market a memorable content experience. Users while dwindling on this page will forget what they were actually looking for.

Emailcenter 404 Page 3

7. Make Your Users Laugh

Though it’s an awkward situation that your website failed to deliver the desired outcome, but coming up with a funny message on your 404 error page will definitely cheer up your visitors. A gag sometimes proves essential to strengthen the emotional bond with the website users.

StarwarsWikia 404 Page
Image Courtesy: Starwars Wikia

You need to do whatever it takes to make your users laugh and hook them up with the site. Make sure you divert their mind from the inconvenience caused unintentionally. Utilize your creative skills effectively not only in terms of designing, but also come up with a funny concept that actually makes your users laugh and drives them to proceed with other options available on your website.

Like Starwars Wikia error page. It first introduces users to Dave and then recommends that ‘if you are more interested in personal continuity, rather than Dave, browse through the given links.’

8. Do Indirect Branding On Your 404 Error Page!

When you have the open option to customize your 404 error page, then why not take advantage of this opportunity and do subtle branding? Just make sure that it covers one or more than one of the other components and your brand assets match the functionality and outlook of the interface.

eHarmony 404 Page
Image Courtesy: eHarmony

9. Make Your Error Pages Usable

Give your users the option to report about the dead link or send in their suggestions to you on how you can enhance the website further. This will strengthen their emotional bond with you, as they know that there is someone here to hear their voices and that their suggestions matter!

Also, don’t forget to utilize the tool ‘Change of Address’ to inform Google about your website’s shift. Further, be assured that an original 404 HTTP status code is returned by your web server, whenever an unavailable page is requested. In this way it will not be displayed in the search results.

Heinz 404 Page
Image Courtesy: Heinz

Designing a creative 404 error page is just half of the battle!

Heinz , considering the fact that their user might not know what to do next, so they have given links of site’s popular content on the error page and a search bar as well.

10. Be More Conscious. Do Extra Research

Focus on your 404 error page design as you do on other pages of your website, may be a little bit more. If you comprehensively execute a creative idea, then you might earn some new visitors and popularity over the Internet and across the social media, for having a unique and attractive error page!

Centresource 404 Page
Image Courtesy: Centresource

Before starting over it, you should first browse through various 404 error pages to grasp the idea and core concept behind it. You have to broaden up your search and look for unique, appealing and attractive not found error pages that different websites have!

It might be difficult to come with a design solution for an error page, which is interesting or a place to show off some creativity at the same time, but frankly speaking it is THE PLACE! You can design an effective 404 error page by blending in some part of design flair, simplicity and usability.

Did we missed something? Please do share the best practices that you are using in creating custom 404 error pages in the below comments section. Let’s just spread worthy knowledge together!

About The Author

Eva is a marketing major with a keen interest in web design. She is also an explorer and loves to dig into web trends from mobile apps to visual communication and everything in between. Feel free to send her your web design queries or blog related feedback in the comments below.

Leave a Reply