April 22, 2015

404 Page Design Best Practices

404 Best Practices

404 Pages: We’ve all been there, and if you keep a close eye on your own website, then you’ve seen your 404 page in action. But, have you actually considered how your 404 page is serving your web audience? We’ve pulled together some user experience and design best practices to consider for your 404 page.

The 411 on the 404s

More and more companies are giving this critical (but rarely considered) page more thought, and this trend is expected to rise in 2015, as demonstrated by the likes of some of the 2016 presidential campaigns. And while we applaud their sense of humor, it’s important not to sacrifice the design, user experience and a highly functional 404 page for a few laughs. So with that, we’ve created a helpful list of some 404 page design best practices.

  • Stay on brand. There is typically very little content on a 404 page, so what you say here carries more weight than ever. Be short and to the point, but also stay within your brand personality and tone. Lego does this perfectly. Lego also keeps its website header and footer present, which helps with brand consistency and usability of the page.
  • Be helpful. A 404 page is served because the content or page being requested could not be found. It may have been intentionally removed by the site’s content manager, or the URL entered may have a typo in it. Provide the visitor with relevant or helpful links to other places on your site so you don’t lose their interest. It’s also nice to include a search field on this page so the user doesn’t lose momentum in their quest to find content. This can also benefit your analytics, as the webmaster can see what people typically search for from the 404 page, and can identify content/page gaps or navigation issues on their site. A couple great examples are MailChimp or DropBox.
  • Use a hint of humor. No one enjoys getting lost or doing something wrong. Make light of the situation by adding some humor while helping people get back in the right direction. Check out Bluegg’s 404 error page for a good laugh.
  • Keep connected. Make sure to include links to your contact information or about page like RedTag does, so people can connect with you after taking a wrong turn. Sometimes all they need is a little assistance in getting back on track.
  • Allow error reporting. Provide a way to report the error, whether it’s through a contact form or email address. This gives you first-hand information direct from your users, which demonstrates that you care about their experience on your website.

Find Your 404

Not sure what your 404 page looks like or how to access it? Type in your site url, then add: “/unicorn” to view your 404.

Check out more 404 best practices here, get inspired by checking out some of the most unique 404 error pages here, or contact us if you’d like to raise your 404 page bar.


Stay Connected

Sign up for our eNewsletter to stay on top of all things strategy, design and WordPress