By Claire Remmert
Jul 2, 2018
On the web, errors happen all the time. One of the most common is the 404 error, when the page the user is trying to visit cannot be found. This can happen for all kinds of reasons: the page might have been renamed, moved to a new directory or removed altogether.
This can also create one of the worst user experiences on a website. Hyperlinks are foundational to the web — you click a link, you go to that page. And when, instead of the familiar or expected page, you see “404: Page Not Found” and … nothing else. It’s frustrating to say the least.
The 404 page is too often overlooked as an integral part of web design. It’s really an amazing opportunity to create a meaningful moment with your brand. A thoughtful 404 page shows that you’ve anticipated the user’s needs and prepared a way for them to find what they were looking for. It also shows that you own up to the error; most likely, that broken link was within your own site. You moved the page or changed its name, updated your main navigation, but that old blog post still has a link in it that’s just waiting to cause someone frustration. It’s hard to avoid, so when it happens, own it. It’s not the user’s fault.
It’s also an opportunity highlight the core of your brand. Some of the best 404 pages really embody the personality of the company or site, whether it’s playful, cheeky, artful or even formal and serious.
Including a thoughtfully designed 404 page can take your site to the next level, avoid potential user frustration and perhaps even create a bit of delight.
We recently redesigned our 404 page here at Jungle Disk. We really value the sense of safety that our products provides to customers, and want our site experience to never make a user feel lost or confused.
Here are the core principles we used in our redesign:
When a user lands on this page, it will be disorienting. It won’t be what they expected. It’s important to provide an explanation for what happened so they understand why their expectation wasn’t met. We chose to include the error code as well as some common reasons why 404s happen to help the user understand how they ended up there.
Make sure your user has a clear next step: links to your most popular pages, site sections or even a site search if possible. Even if your user doesn’t end up finding the page they were looking for, they will feel like they can keep moving forward through your site, rather than facing a 404 brick wall.
Make sure your error copy is written in your brand’s tone and voice, and that any visuals you include are consistent with the rest of your site. We love the pages that have custom graphics that play on the idea of getting lost or frustrated, because it creates a sense of discovery. Even though they’re lost, they may feel leave feeling pleasantly surprised rather than frustrated.
We also decided to include a bit of animation as an easter egg, hopefully to add a bit of surprise and delight. Can you find it?