Designing a 404 page

I recently came across dribbble’s 404 page and found it amazing how much delight it brought to my browsing experience, despite the “page not found” hiccup. It also brings dribbble’s value proposition to the spotlight, spot-on.

dribbble’s interactive 404 was a delight to encounter.

I was curious to know what other 404 pages were up to. I found so many great examples, it would be a pity if I didn’t compile them into a post!

What is a 404 page and why is it important?

Often referred to as a “404 error page” or “Page Not Found” page, the 404 is displayed when a user attempts to access a broken link or a page that doesn’t exist within a website.

Designing an effective 404 page is important in ensuring a good user experience. If you’ve been browsing the web for as long as me, you might remember those completely unhelpful 404s in the past:

Do you remember these old 404s? (Source)

Like the dribbble example, a good 404 can maintain a cohesive website design and even provide an opportunity for engagement or redirection to other parts of the website.

404 page best practices

Here are five best practices I found while exploring different websites’ 404 pages.

1 | Let users search

Including a search bar on the 404 page encourages users to stay on the site and search for the content they were originally looking for.

Giphy’s 404 provides a prominent search bar along with their trending feed.

The Wordpress 404 page contains a lot of actionable elements, most prominently a search bar.

2 | Provide helpful links and tips

Include contact information or links to support resources so that users can reach out for assistance if they can’t find what they need.

Apart from sounding genuinely apologetic, CSS-Tricks also provides actionable options, like an email link for users to report errors.

It also helps if to identify and help users remedy the source of the error. For example, bitly offers advice to users who usually type their shortlinks:

bitly provides a tip: links are case sensitive.

3 | Keep it light-hearted

Many websites opt for a humorous, light-hearted approach to soften the blow of a broken link. This can make the user’s experience more enjoyable and memorable.

Medium directs the users to articles about getting lost. These articles were actually pretty good reads!

Marvel’s 404 includes an amusing line about one of their characters that’s bound to make fans chuckle.

4 | Showcase the company’s mission

It may seem like bad news if users who see the 404 are seeing the website for the first time. If designed well, though, the 404 page can succintly communicate the company’s values and mission, as seen in graphics and copy. This provides a cohesive experience and reifies brand identity.

Headspace’s 404 directs users to do a breathing exercise, consistent with their values and offerings.

Ervin & Smith uses the 404 page to pitch their product offering, even providing a link to a page about their branding philosophy.

5 | Add a game! Because, well, why not.

I wasn’t sure whether to include this in the list, but I had so much fun with these 404 pages that it seemed cruel not to. Reminiscent of the offline Chrome dino, these 404 pages bring back old-school games that leave you feeling happy and (almost) forgetting about the broken link.

Wendy’s lets you play a burger-themed game that’s as enjoyable and stressful as Pac-Man.

If you can find it, the 404 of Discord lets you play an all-time classic!

Well-designed 404 pages are like easter eggs — delightful to find (and hopefully rare). With a helpful 404, the user experience is restored.

Final thoughts about dribbble’s 404

Although I found really great practice, I do hope 404s could be more helpful in a customised way. With the dribbble example, I encountered it while trying to unsubscribe from an email newsletter. A smarter design would have recognised “unsubscribe” as one of the keywords in the broken link, and redirected me to the relevant page so I could complete my original task.