Friday, March 28, 2014

7 Examples of 404 Pages That Actually Engage Your Customer

When we discuss ‘impeccable’ or ‘stellar’ web design, we imagine these 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?


old school 404


As a visitor, this page does not help us, rendering it to be valueless.


Just like this one:


bad 404


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 increased. Websites became dynamic and interactive. In other words, websites became hyper 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 t0 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 did 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 (4 min) video, and 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 impact social web design.


Below are 7 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 the neglect optimizing their 404.


1. Klapp


klapp 404


Klapp is a Norwegian website that helps serve up imagery and media 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 we remember, ‘this is the site with their 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


good dog 404


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


A tongue-in-cheek advert for a lost dog is shown to users, and phone tabs can be removed. As a design company, the interactive elements of tabs removing demonstrates their 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 homepage, but also puts the dog back in the circle:


yellow header


 


Upon completing this task, we have a pretty positive first 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


CAT 404


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 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


focus 404


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


Similar to Good Dog Design, as a branding and web design agency Focus uses their 404 opportunity to demonstrate their creativity. Since 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 navbar continuity allows 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


full pickle 404


This is a light text-based game full of witty humor and challenge. 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 provokes 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 social ploy.


6. CJ Pony Parts


cj 404


This 404 is both relevant and user-friendly. Although it’s static, I find it to be social regarding its theme. Since 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


nosh 404


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 late July 2011 the video went viral,  garnering attention attention to their 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, they branded the title, giving curious viewers any easy way to directly search (i.e.; ‘nosh’).


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





7 Examples of 404 Pages That Actually Engage Your Customer

No comments: