Users can land on your 404 page for any number of reasons — and it can make or break their experience of your website. No matter how rigorously you test your site for broken links, users can still stumble across a 404 page while browsing your website.
404 is an HTTP status code that means the page you’re searching for can’t be found on that website. So a 404 page often comes with user-friendly messages like “Not Found,” or “The requested URL was not found on this server.”
A 404 may be caused by a faulty internet connection, a mistyped URL, or pages that have been moved to a different location on the site.
Browser default 404 pages aren’t pretty. They’re visually jarring when styled differently from the rest of your website — and moreover, they can give the impression of a serious technical issue. This often turns visitors off from continuing to browse your website.
A good 404 page does the following:
- Lessens customer frustration
- Puts them back on track
- Directs them to your navigation or search bar
- Directs them to your call to action
And when done right, you can even score conversions — right from your error page!
Here are some great 404 pages in action:
1. Tumblr’s sarcastic 404
Tumblr’s 404 page gives you a random full-screen animation. The top bar includes the brand, search, and calls to log in or sign up. A link to the background image’s original poster is included at the bottom. The message simply goes, “There’s nothing here,” and slyly congratulates users for “finding” this page.
2. Sorry, here’s a cute dog by Amazon
Amazon’s 404 page is a standard apology with a homepage redirect and a search bar. But they take appeasing users’ wrath one step further: a picture of a smiling Corgi named Muffin, and an invitation to “meet the dogs of Amazon.” Who could get mad at that face?
3. Pixar’s Inside Out (2015) movie reference.
Pixar Animation Studio’s 404 page features Sadness (the animated character) and mentions that “what you’re looking for may have been misplaced in Long Term Memory.” Though these are heavy references, the message is straightforward. Furthermore, the character acts as a visual identifier for the brand.
4. Design Pickle’s lost Pickle
Oh, pickles! Our very own 404 page is certainly on-brand for a pickle-themed design company. We’ve also incorporated some humorous elements (“well, this is awkward…”), which is in-line with our brand persona. The main image makes it clear that the user has reached a dead end, but the “Go Home” button (along with our navigation and footer visible) makes it easy for them to get back on track.
5. Uber’s simple apology
Uber’s 404 page features a simple, text-only message. “We’ve moved a lot of stuff over the years, and it must’ve gotten lost in the mix,” they apologize.
404s don’t need to be too fancy all the time. What’s great about Uber’s 404 is that the simplicity draws attention to all the other page elements that are still there. The navigation is in pride of place at the header, and the first thing you see in the footer is a link to support.
6. Lego’s panicking Minifigures
On Lego’s 404 page, you’ll find some distraight Minifigures (yes, I Googled that term). There seems to be a trend to feature mildly distressed mascots on your 404 page, but why?
Well, put yourself in the shoes of a user who just got lost in a website’s labyrinth. By including images of unhappy characters, companies are effectively saying, “I know, right? What a bummer.” Sometimes, a show of empathy is all a user needs so they don’t exit a website in disgust.
7. Star Wars’ broken Death Star
Ah, the Death Star. Always an ominous sight. On the Star Wars page, it’s used as the zero in a 404 notice that seems to be looming out of the galactic darkness.
While the nav bar is still there for easy access, lost users can still find their way using the search bar.
8. Dribbble’s animated color selector
Dribbble is a a social/professional platform where designers can share their projects. So when you get lost on their website, why not get a chance to land on a random project?
Users find a well-designed “404” made up of clickable cards, each one leading to a project. Below, there’s a color range slider prompting visitors to interact. Want to see red artworks? Blue? Green? Purple?
Or, if you know what you’re looking for, you could simply use the search bar below.
Best practices for creating your custom 404 page
- A little humor is okay. It’s just a little oopsie.
- … but empathize, apologize, and guide: “This must be confusing, and we’re sorry.”
- Include links to the home page or other pages.
- Add a search bar so users can find the content they’re looking for.
- Maintain your brand theme so users know they’re on the right site.
- Maintain header and footer links from the website — again, to help users navigate your site (and even explore more about your business).
You can make it even more interactive by including options like a game, a video, or a special call to action.
If you don’t have a custom 404 yet, get back in your thinking chair: it can make a big difference in your site’s user retention.
Need help designing the perfect 404 page? Let a Design Pickle designer get the job done. In just a few clicks, you can send in a 404 page design request — or the elements needed to build your own. Then send the final design to your developer to make the magic happen (and find your site on this list someday!).
