The following is a guest post by Adrienne Erin from Design Roast.
Sometimes mistakes happen and links break, which is usually a bad thing. But more and more businesses are adding value to the visitor experience by customizing their 404 “page not found” error pages with a fun message.
Re-establishing this connection is vital if the user is to feel inclined to keep searching for what they are looking for instead of bouncing back to the previous page. There are many ways to make that connection, but a little humor and creativity go a long way in delighting your visitors and keeping them on-site. Even better is if you can somehow relate your message to your core service or products, as you’ll see in many of the examples below.
I’ve rounded up 25 of my favorite examples to show what can be done, and ultimately, what should be done to keep the user experience strong. Let’s begin!
1. Oubly
Everything about this particular error message mirrors Oubly’s brand identity. Oubly designs and prints stationery for business and personal use, and their aesthetic is fun, classy, and delicate. The intentional misspelling of the word “oops” and subtle use of animation only adds to its overall charm. This is a design guaranteed to brighten anyone’s day!
2. Code42
Sadly, everyone knows that unicorns don’t exist and this example from Code42 is perfectly suited to the task of prodding our emotional distress in light of this fact. The end result is a 404 page that is both devilishly unexpected and quite beautiful.
3. Worrydream
As the saying goes, “If you can’t be funny, find someone who is and quote them.” This approach from Worrydream is particularly arresting because of its simplicity and familiarity. That’s all it needs.
4. Empire CAT
This error message from Empire CAT isn’t shy about its own existence, which is refreshing to see. Regardless of where a user is coming from, the intent is clear and the range of navigation options should help them to reorient themselves in case they were looking for something specific.
5. Delaware State Government
Who says the government doesn’t have a sense of humor? This clever play on words from the state government website of Delaware injects a fair amount of flair and reassures the user that the information they’re looking for can still be found. Ultimately, its effectiveness lies in its ability to instill some sense of pride.
6. CSS-Tricks
This silly 404 page from CSS-Tricks puts the blame on the visitor in a light-hearted way, joking in the title tag that “you’ve ripped a hole in the fabric of the internet.” Geez, I’m sorry!
7. The New Yorker
The New Yorker’s cartoons are well-loved by their readership, so why not extend them to the 404 page? The publication has a history of creative 404 pages stretching back several years.
8. Flipping Book
The simple shapes contrast the complexity of this 404 page in way that tells a story. As it happens, that’s Flipping Book’s area of expertise. It’s also a way for the company to showcase its ability without resorting to bald-face advertising initiatives — and that’s what we like most about the whole thing.
9. MailChimp
Everybody’s favorite newsletter service just got a lot more awesome. The theme fits with the lightheartedness that MailChimp routinely displays and this is an important part of the overall design. In effect, it strengthens people’s affinity for the service and might even entice a few newcomers to make the switch.
10. Dropbox
This is an interesting approach from Dropbox, a company whose logo is always immediately recognizable. And good thing too, otherwise this wouldn’t be nearly as effective. The design is reminiscent of M. C. Escher’s “Impossible Staircase” and as a result communicates the idea well.
11. Blizzard Entertainment
While this concept is nothing new, Blizzard has been able to make it their own and that’s what’s important. In a strange way it gives the user a sense of satisfaction and even accomplishment, which is what the game developer is all about.
12. Spry
Out of all the emotionally charged 404 page examples we’ve seen, this streaming video from Spry takes the biscuit. The dog looks up at you while you’re reading and the placement of the text keeps his eyes in your periphery. No doubt this will have melted a few hearts.
13. Blue Fountain Media
Interactivity has come to the forefront in this example from Blue Fountain Media which actually lets you load and play Pac-Man right in the browser. It’s a nice reprieve from the fast-paced nature of internet browsing and we’re sure most users relished the chance to relive a few of their childhood memories.
14. Incore
Something about the symbolism of vultures juxtaposed against the caption is unsettling and makes you pause. We get that’s probably the point of the message but we’re not sure why it’s as effective as it is. A rather odd choice from Incore, but if it gets results it definitely deserves a mention.
15. Jackrabbit Design
This 404 error page from Jackrabbit Design, while not fully interactive, does use a simple form of motion tracking to map itself to the user’s mouse. Whenever it moves, the different elements shift to create a surprising amount of depth.
16. Emailcenter
Somebody’s really done it this time. Emailcenter’s humorous 404 page gives you a chance to decide the fate of one of four developers. Choose one, and on the next screen the other three will cheer as the chosen one sobs in the corner. Feeling charitable? They also provide a link straight back to the homepage so you can spare them for one more day.
17. Finest Doll
Well this is embarrassing … This interesting error message from Finest Doll points to people’s fascination with My Little Pony and cleverly references the Brony subculture that has grown around the franchise. Once again, it’s the juxtaposition that makes it.
18. Tobi
Ever had a close friend take a photo of you when you weren’t ready? Well, we’d like to think that’s what happened here with Tobi’s photoshoot and I’m so glad they decided to run with it — even if it would look more at home on a social networking site.
19. This By Them
Falling through space in slow motion is a little like the experience of landing on a 404 page, making this one of the best examples out there. This By Them has taken everybody’s worst nightmare and somehow turned it on its head and created something truly unique.
20. Panda
If you love pandas, you’ll never leave this simple but endearing error page from Panda, and not just because there are no navigational options available — it seems the panda ate those too. Despite what could be fixed, it’s hard not to laugh at the designer’s playful attitude.
21. Juicy Graphics
Simplicity certainly has its place online and Juicy Graphics has used this to explain their services to a broad audience.
22. Star Wars
The unfinished Death Star from Star Wars is a symbol of what the Empire could be so it’s no surprise that this image was chosen for this particular 404 page.
23. Trüf
I like this simple but clever design from Truf Creative, which matches their brand identity and gets the message across fast.
24. Mozilla
The only thing missing from Mozilla’s playful and entertaining 404 page is, well, nothing actually. A link redirects to a download of the most recent version, the entire sitemap is displayed below and the text attempts to enlighten the user on what may have happened. There aren’t many designs like this around but it goes to show that less isn’t always more.
25. Tableau
And finally, to round out the list is this error message from Tableau, which employs a dot-matrix aesthetic to show off the quality of Tableau’s reporting with a collection of “actual” sasquatch sightings.
So there you have it: Twenty-five of the most creative and clever 404 pages from around the Internet, each designed with the goal of delighting the user — and that’s the key to unlocking their potential as effective tools for communication.
What are your favorite 404 pages? Share them in the comments below!
