How to Improve Your 404 Page Design
As UX designers we work hard to understand where users tend to go wrong and why in order to prevent errors. But no one’s perfect. Eventually, someone’s going to make a typo, forget to input something, or hit the wrong button. It’s just human to get an error message once in a while. Errors are part of the experience so UX design shouldn’t ignore them. A bad error experience and all the work you’ve done up to that point may not matter. Your users get annoyed, confused, or frustrated and they’re gone.
404 pages are one of the more common culprits for this. So often, they pop up, dumping users at an unexplainable dead end with some technological sounding lingo and that’s it. It’s up to the users to figure what went wrong and get back on track. But 404 pages can and should be so much more than an afterthought. Like every other page, they should have a design and content strategy that positively supports a good user experience.
Here are a few tips for creating better 404 pages.
Use a friendly error message
Giant red text saying “404 Error” isn’t helpful nor pleasant for users. First of all, no one knows what a 404 error is unless they have some knowledge of servers. It can look intimidating or even cause fears that the user has broken something or done something unrecoverable. Think about how you’d tell someone that they’d made a mistake. Would you just shout at them “No!” or “Wrong!”? Probably not. So why do it on your site?
Instead of the dreaded 404 language, include a short message like “It seems you’ve taken a wrong turn.” Let the user know it’s not a big deal. You can still include 404 on the page somewhere but tone it down visually if you do. Don’t have it giant or in an aggressive color like red.
Match the site design and include friendly visuals
404 pages don’t have to be bare-bones boring. Including an image or graphic on them like you do on other page designs can make landing on them less shocking and unfriendly for users. Going from a beautifully designed site with robust page content to a stark white page with text can make the error experience worse. You can even use visuals to add lightheartedness or humor to the experience. If someone’s chuckling about the cleverness of the image you chose for your 404 page, then they’re probably less annoyed at your site and themselves.
Include navigation options and escape routes
If your 404 page doesn’t include navigation, then you’re leaving your users at a confusing dead end. They’re used to using things like your global navigation to orient themselves on the page and get around your site. Not ensuring that this is offered on error pages leaves them without even the failsafe of heading home and starting over. They’re forced to abandon or use the back button in their browsers, which isn’t always a reliable way to return to where they were.
If users can hit a 404 page and continue on directly from this page to achieve their goals it’s a better experience. Offering a search field on 404 pages can be a helpful way to show users how to get out of the error page and on with their task.
Offer suggestions to help users get back on track
404 pages can sometimes help users find exactly what they are looking for instead of just telling them there was a problem and to try again. Learn what the top 5-10 goals your users have for visiting your site and offer a little menu on your 404 page. Add a heading that says something like, “Were you looking for this?” and offer hyperlinked shortcuts to popular information. The analytics on what users are selecting on your 404 page can even help you adjust design and content in specific areas to solve problems that lead users to the 404.
Final Thoughts
While it’s a page you hope your users never reach, 404 pages deserve strategic design and content decisions like everything else. Because if users do find themselves facing a 404, you want them to stay calm, stay motivated, and feel supported. When you start approaching these pages as tools rather than just announcements of mistakes, that’s when you can improve the error experience and 404 pages will just be a short pitstop on a user’s journey.
