Oops! Sorry, that page doesn’t exist! 404 errors can be annoying for users — they mistyped or got lost — but they are equally annoying for us web design and UX design folks — often, a 404 tells us we broke something.
Still, many businesses have caught on to the idea that a 404 page doesn’t have to be a loss, for either businesses or their customers. A great 404 error page can be an opportunity — to improve your customer affinity, please Google, and even up your conversion rate.
Here are some of our favorite 404 examples from around the web.
Code hosting repository GitHub knows its tech-savvy users are geek culture fans. That’s why they created a custom Star Wars parody graphic, complete with parallax effect for good measure, for their site’s 404 page. This page is also highly functional. A search box, support links, and user sign-in are all available right from the error page. This is very helpful for users and for your SEO metrics.
Daniel Karcher works in film, films you’ve probably seen like The Blair Witch Project and Ice Age. Karcher’s 404 page is a detailed subway scene rendering, complete with flickering lights, train and people animations, and sound. Clicking on subway marquee takes users back to the main page. It’s a great example of using a 404 page to delight your target user, demonstrate your expertise, and spark a conversation.
Homestar Runner, the internet cartoon series created by brothers Mike Chapman and Matt Chapman more than a decade ago, is another error page that delights fans. In addition to a comic 404 gag, a site menu below the main image offers 10 destinations for users. This is something that’s really going to please Google because it reduces your bounce rate — those users who are just going to close out of your 404 error page. Homestar Runner offers plenty of options for fans to find what they were looking for when they 404’d.
Spry, a full-service ad agency in Orlando, doesn’t want to lose a prospective client to a 404 error. And while their 404 page features a video of an adorable (yet confused) puppy, more importantly, the error page features a large call-to-action that directs users back to the homepage. Bright menu and footer options are also present, such that a visitor could visit any area of the site, find the firm’s phone number, or visit the company’s social media pages without any additional clicks.
Let’s face it — if a state government web page can have a playful and useful 404 error page, you can, too. Delaware’s Dela-where error page offers a number of site links, social links, and displays its main menu, but it also features a sitewide search box. This is especially helpful for users, who will be all the more likely to find what they need. Remember: happy users, happy Google, happy SEO.
Figma, a real-time collaboration interface design tool, needs visitors to be won over and to convert to users. The site and product look impressive, as it stands, but every little bit helps. The more time a user spends on a site, the better for Google analytics purposes and the better for conversion purposes. In addition to a number of menu options for visitors to find their way to their desired site destination, Figma’s error page features a vector rendering of “404” with anchor points that can be pushed and pulled, reshaping the numerals and entertaining users.
It’s entirely possible that someone watching Comedy Central’s Drunk History show and playing along at home could end up lost on the site with tipsy typing. Comedy Central’s 404 error pages cycle through a number of fun visuals geared to different shows on the cable network. With online television, a conversion is consuming more content, so the site smartly directs 404 page visitors to choose another video and keep watching. A menu with links to shows, skits, and stand-up beckons from the top of the screen.