7 examples of website error pages that engage visitors

Broken links can be dead ends, unless you employ some ingenuity and create a favorable impression—and help your visitors navigate back to your operative pages.

When we discuss “impeccable” or “stellar” Web design, we imagine modernized layouts with rich and interactive media.

Ease of navigation and the overall user experience falls into our general disposition as well. But what happens when we land on a page that doesn’t exist, such as a broken link?

Remember this?

This page does not help visitors, rendering it valueless.

Just like this one:

All this does is cause frustration.

The 404 page, which users are directed to when a URL points to a page that no longer exists on the server, have long plagued the Internet. They’ve never been helpful, and in the vast majority of cases, they’re just ugly.

As HTML, CSS, and Javascript progressed, design standards were raised. Websites became dynamic and interactive—and eventually social.

Flash game portals were shared (and still are) indefinitely across social networks. Websites became extremely educational in every niche imaginable, making them highly shared properties. Traditional news manifested online, expanding the type of content they delivered. For example, The Washington Post hosting this gif on the evolution of the U.S.

But let’s get back to 404s.

An error page is a break in site flow. We’re just cruising along, maybe looking for a product, and then the ship stops. This is an opportunity to be more human and engage your website visitors, for example you can:

  • Increase customer retention
  • Market a memorable content experience
  • Establish a personality

When you land on this 404, how long did you stay?

Media and marketing strategist Renny Gleeson conducted a TED talk on 404s and concluded with the following statement:

“A simple mistake can tell me what you aren’t. Or remind me why I love you.”

It’s a short (four-minute) video, and it shows how a bunch of startups shifted the way they thought about 404s by incorporating how visitors feel when they hit a 404. This is why 404s are opportunistic and affect social Web design.

Below are seven examples of websites that have gotten the 404 page right, increasing customer retention and/or creating a share-worthy experience. At the core, they demonstrate ingenuity, especially from websites that neglect optimizing their 404.

1. Klapp


Klapp is a Norwegian website that helps serve up content to those looking to create a marketing campaign or just need help with telling a story.

The company’s 404 page is brilliant: It’s a full-fledged video game. Klapp’s 404 page is a small rendition of the classic Space Invaders. This is one 404 page that impresses, and it also encourages users to simply navigate home and carry on after getting their gaming fix.

As a game, and as a 404, this page is extremely sticky. Visitors might even lose track of time as they try to top their own scores. After playing, we realize the site we’re on and remember, “This is the site with its own Space Invaders.” The 404 is no longer a subtle segue, it’s a retention point and a branding mechanism. It’s completely share-worthy, enabling traffic generation from social media referrals.

2. Good Dog Design

A company that specializes in designing good-looking websites, no matter the screen size, Good Dog Design decided to use its 404 as a sort of advertisement.

A tongue-in-cheek advertisement for a lost dog is shown to users, and phone tabs can be removed. The interactive element of removing tabs demonstrates its skills and expertise. If potential customers are landing on this page, it maintains the flow and boosts first impressions. There’s a bit of cleverness going on, as well.

It instructs us to click the yellow circle in the header. This simply navigates us to the home page, but also puts the dog back in the circle:

Upon completing this task, we have a pretty positive impression.

From a social perspective, the meta elements of this design are strongly suited for design communities (which seem like a beneficial referral market for them).

3. Empire CAT


The popular construction company we all know by the “CAT” in yellow, black, and white, offers an efficient theme in the mix of 404s here. They have a high-resolution background image of an employee looking through a box, similar to a visitor looking for a specific page. They include seven “core links”—the most popular/important pages. This helps visitors navigate quickly instead of just focusing on a funny way of saying the page is lost.

Whenever I drive past one of their trucks I’m always reminded of development, progress, and gritty work. This 404 carries forth that diligent ethic. It gives off the sense, “We can fix it.”

The social elements at play are trust, authority, and efficiency. The ease of navigating to a relevant page along with the search box makes the 404 beneficial to customer retention. Following the mantra of Gleeson, this may influence visitors to recommend CAT or have a positive disposition when writing about them.

4. Focus Lab

This is an example of something we’d share in a flash. Its absurdity and humor are so farfetched that it’s perfect for Facebook, Twitter, even social aggregation like StumbleUpon, Delicious, reddit, and Tumblr.

As a branding and Web design agency, Focus uses its 404 opportunity to demonstrate its creativity. Because 404s make us feel like we’re off the beaten path, an office room full of workers with horse heads truly makes us feel like we took a wrong turn. A contact form call to action, along with top navigation bar continuity enables us to bounce to relevant pages.

At the core, this 404 is a brilliant form of content marketing. Not only does it apply to design communities, but any broad/general appreciation of humor and memes.

5. Full Pickle

This is a light text-based game full of witty humor and challenges. Tactfully, this was created to be shared in confusion, which is the very nature of 404s.

The commands for the game are very simple but very difficult to guess after the first “go south” command. This uncertainty prompts us to share the page in pursuit of a solution.

Collectively, the whole process of sharing and discovering fragments of the game make it a very effective tactic.

6. CJ Pony Parts

This 404 is both relevant and user-friendly. Although it’s static, I find it to be social regarding its theme. Given that the website is for auto parts, the dead end sign on the road is thematic. From a usability perspective, we have a big yellow CTA that returns us to the homepage. Alternatively, the Web copy mentions a search bar above.

This is a great 404 from a user perspective, because we get both the recognition of a website that is giving an error message some personality and the ability to quickly return to searching, this increasing customer retention. When 404s fit into a theme, whether static or dynamic, they still communicate values to us.

7. Nosh

Arguably one of the most creative 404s in current existence, the social foodie app Nosh produced a hilarious and professional-quality video. In it, two soldiers recover a missing (and hostile) “404” page. The video itself has over 139,000 views exemplifying a social success. When it came out in July 2011, the video went viral, drawing attention to its app. The page itself has a sidebar on the left that upholds continuity. Had the page just been a video, we might forget what site we’re on and navigate away.

The sidebar funnels in referral traffic from everyone who shares a link to the 404. On social media the video might be shared as a separate entity; fortunately, the designers branded the title, giving curious viewers any easy way to directly search (i.e., “nosh”).

These 404 pages offer a variety of formats for those looking to enhance the visitor experience, communicate values, side with visitors’ feelings, and flat-out impress.

Jesse Aaron is a community manager at WebpageFX. A version of this article first appeared on SocialFresh.

COMMENT

Ragan.com Daily Headlines

Sign up to receive the latest articles from Ragan.com directly in your inbox.