We’ve all been there — the frustration and disappointment of hitting a “404 Page Not Found” error.
In the early days of the web, there was a need for succinct error codes that categorised error types (due to limited memory at the time). Errors in the 400s are client errors, and 404 became the designation for “not found.” Common reasons that users see a 404 error include following a broken link to content that has been removed or moved, or mistyping a URL. Internet lore suggests that the 404 was named after a server room at CERN, but this myth has been debunked by Robert Cailliau, an internet pioneer.
Of course, the optimal user experience is error prevention — ideally users should never encounter the 404. Human involvement in design and engineering of websites means that while we can strive for this perfection, we also need a backup plan for making our 404s as awesome as possible. Here’s what you need to know.
Do look for inspiration across the web
The 404 page has become a cultural phenomenon, with parodies of default browser 404s exploring the concept of ‘the last page of the internet’, websites dedicated to 404 pages, and lots of listicles like ‘30 brilliantly designed 404 pages’. All to say that you should never feel short of inspiration when designing a 404 page. Keep a folder of screenshots of 404s that inspire you as you come across them.
Don’t let your 404 page feel like an afterthought
While hopefully the 404 page of your website will be one of the least visited, it’s important that users don’t feel abandoned when they do encounter it. The 404 page needs to feel cohesive with the rest of the site and well thought-out. This means putting effort into designing and testing the 404 page, as you would any other page.
For example: Instagram’s 404 page feels like a missed opportunity — for such a visual platform, there are no images or content on the page, nothing to draw the user in.
In contrast to the Instagram 404 page, it’s easy to see the effort that went into Mailchimp’s 404, with a custom illustration of their mascot, Freddie.
Do use the 404 page as a brand building opportunity
As Renny Gleeson says in his TED talk, the 404 page offers a chance to “remind me why I love you.” A sophisticated brand will use this page as a continuation of their brand story. You can do this by staying consistent in design and branding, and by considering the appropriate tone for the page. The brand voice should extend to the copywriting and content on the 404 page.
For example: NPR uses their 404 page as an opportunity to highlight compelling stories of “people, places, and things that still haven’t turned up.” This emphasizes the serendipitous thrill of discovery and interesting content that many public radio users are likely to love.
Do consider copywriting and microcopy
Microcopy is the short, contextual copy that supports a user experience. For example, error messages, call-to-actions or button text, and yes, the 404 page messaging. The 404 page is an ideal place to leverage a brand’s personality to add some delight to what is essentially the admission that something’s gone wrong.
For example: Comedy Central’s 404 page leverages one of their most beloved and watched shows, South Park. The copywriting is on brand and in character, with Butters’ worried expression saying it all.
Don’t give the user a dead end
When they encounter a 404 page, the risk is that users will simply leave the site entirely as they cannot find what they are looking for. This drives up bounce rates. Instead, the 404 page should support people in finding what they are looking for, or at the very least, continue browsing. Some simple ways to do this involve including the site’s navigation on the 404 page, or by showing the user a search bar. Offering the user a set of links or popular content can also help.
However, more advanced UX approaches try to suggest relevant pages based on how the user got to the 404 in the first place. For example, if someone got to a 404 page using a particular search term, the page could serve up other results matching that term.
For example: Freshbooks’ 404 page includes a list of links to “relevant pages based on this URL” (as well as some comic relief courtesy of a Lionel Ritchie illustration).
Do allow users to turn their frustration into action
Error reporting can be a positive addition to your 404 page. Giving users a path to let someone know that something is wrong can give them a proactive outlet for the frustration they may be feeling. This is especially prevalent in sites with a lot of archival content — for example, news or media sites. The error reporting mechanism can be as simple as providing a link to your ‘Contact Us’ page, or it can be a custom form.
For example: The New York Times’ 404 page dispenses with the 404 terminology and simply says “Page Not Found.” In a lovely piece of copywriting, the next line is “We’re sorry, we seem to have lost this page, but we don’t want to lose you.” The page includes instructions for reporting a broken link.
Don’t forget about accessibility
Making sure that all users who encounter a 404 can easily understand what’s happened and get moving towards completing their task is crucial. The same level of consideration for an accessible experience should go into the 404 page as any other page on the site. This means making sure fonts are legible, color contrast is adequate, and that the structure and hierarchy works well for keyboard users and people using screen readers.
Making 404 lemonade
Great 404 pages are all about making lemonade with the lemon that is a ‘page not found.’ With some creativity, there is huge opportunity to turn a moment of frustration and failure into a small bright spot in someone’s day. Clarity, humor, and thoughtfulness go a long way in designing compelling 404 pages. So now that you’re set up to create an optimal 404 experience, here’s one last tip.
Do continuously monitor the traffic to your 404 page
The goal is for the 404 page to be one of the least visited pages on the site. If that’s not the case, there is likely a deeper problem at play, one that is severely hurting the UX of your website (or maybe you designed such an excellent 404 page that people go there on purpose!). Set up Google Analytics to alert you when there is a 404 page visit and use this data to diagnose the issue. The 404 page should be a well-kept secret, one that users might have the misfortune, or fortune, of stumbling across one day.
For example: Amazon’s 404 page randomly introduces one of their many office dogs — an unexpected surprise and delight tactic that also shows off the company’s culture. Users can click through to meet the rest of the dogs. The dogs act as a cute distraction from the frustration a user might feel when faced with a 404 page.