While a 404 error may be discouraging for users and could lead them to leave the site, it could, however, be turned into a good marketing opportunity. We all appreciate good humour. Combine that with a strong message that goes with the company’s image and add your personal flavour and you get a winning error message. This helps in better connecting with the visitor and provoking an emotional response. It is also an important element of the design of any website. Both the aesthetics and the functionality are equally important to make navigation easier for a lost user.
It is for this reason that brands prefer not to neglect the opportunity of converting a lost user. Some of these 404 pages are being widely appreciated in social media for the clever use of creativity in redirecting users to relevant pages rather than making them leave the website.
Have a look at 15 of such clever 404 pages from different brands across the web:
This 404 page from HUGO FRANÇA combines simplicity with relatable imagery to create impact, as expected from a UX designer. A clean dish after a meal is used to show that the page is no longer there. The image clearly helps in emotionally connecting the user with the brand.
Another great example of an effective 404 page is this one from Pixar, the animation company. It makes use of one of its characters from the movie ‘Inside Out’, Sadness. It’s cute, relatable and provokes sympathy. The error message itself draws from the movie’s plot.
20th Century Fox
The error page for Fox Movies uses clips and relevant texts from few of their popular movies at random, a simple yet smart one from the “Revenge of the Nerds” for example pokes fun with the 404 page. Clicking on “Seek Revenge Here” further lets you purchase the movie at a discounted price.
Dogstudio’s 404 page is one that gives us a cuteness overload with some dog GIFs. If a dog tells you you’re lost, you probably are.
Emailcenter UK Limited
The email marketing platform from Emailcenter UK Limited is utilized by some of the UK’s major brands. Their innovative 404 page actually asks you who to fire for the error. The parlous page uses wittiness to humanize the company. The page motivates you to stay on the site.
404 Page by Zach Daley
This is one of the more creative ones and subtly lets you know you’re lost. Simple, subtle and elegant, the 404 page shows an astronaut who’s lost and floating in space with a message “make sure to watch your oxygen levels” and a call to action to get back to the relevant page on the site.
Hakim El Hattab
You have to be a front-end developer to come up with this gnarly piece. It makes perfect use of dark humour. The eyeballs in the 404 page by Hakim El Hattab, a Swedish developer follows your cursor, forcing you to click back on the homepage.
Big Bad 404 Page by Ben Jordan
Another example from outer space. The space at the bottom is used to bring out the “space” effect. It has a clear message for the user to connect back to the relevant page on the website. The “take my hand and we will make our way back to the website”, actually engages you with the page and intrigues to click back.
“This is not the page you’re looking for.” The star wars parody with a parallax effect when moving mouse is sure to put a smile on any geek’s face. Github, the popular portal for all the geeks knows how to please its users. The site has also got a cool 500 page that’s displayed when a server breaks down.
You probably weren’t looking for Lionel Richie but that’s alright. The pop icon seems polite when drunk, and the page brilliantly utilizes this concept with one of his famous song lyrics to guide the users to the homepage.
Lego always has its own charm and nothing can be better than using a Lego piece to inform a user about the broken link.
The 404 page from Airbnb cleverly reminds you about being a responsible host by showing that if you drop an ice cream on the floor, you should also clean it up. While on the other side of the animation there are useful links to get back to the site.
Hot Dot Production
This one from Hot Dot Production seriously lives up to the company’s tagline “where design meets technology”. The 404 numbers are made up of tiny red dots that keep changing directions in response to mouse hover and clicks. The page is indeed addictive and won’t let you leave the site so easily.
If you’re really fond of playing around with the vectors, this 404 page from Figma is just the thing. The 404 numbers displayed on the error page is rendered in vectors and you can play all day long to reshape them in ways that you can imagine.
The 404 page from 9gag reflects the brand’s mood and voice. But the page not only just makes you watch the always stylish John Travolta, but also cleverly gives you an option to download their app.