Every page, design asset, and every word on your website is your chance to tell your brand's story. Error communications are no exception.
A 404 page is an error communication that happens when the web page can't be found, often due to the web page being moved or removed, or when the wrong URL was typed in.
In either case, you have a great opportunity to not only be helpful and guide the user to a helpful page, but also to showcase your company's tone of voice, or even what your company does.
Don't miss out on this chance to instill a feeling of goodwill with your user and perhaps even entertain them with a clever animation or humorous copy.
In this post, we're going to dissect some memorable 404 pages to see what makes them so effective and show which elements you should be using on your own error pages.
The 404 Pages
The 404 page: Dropbox
Why it's good:
The Dropbox 404 page has a brief message and is compact. Dropbox removes the header and footer navigation, which would be rather redundant, and gives the user a few key options for where to go after finding this error. With no scrolling required, the user only has to decide between a few links rather than being bombarded by a wall of information.
Ways to improve:
The six helpful links on this 404 page could easily be reduced to four links. The "Get a free account," "Dropbox Plus," and "Dropbox Business" links all have similar intentions, to get the user an account, but are for different people's needs. Make this page even easier for the user that's trying to find more information by having one link to a page for all of the different types of accounts.
The 404 page: Redfin
Why it's good:
Visual puns are great for a giggle, but this 404 page also allows you to contact Redfin's support team. Rather than having a home buyer or real estate agent leave the page frustrated, the link to give immediate feedback for the missing page's content is sure to keep their website users happy.
Ways to improve it:
The link called "Let's get you home" directs to Redfin's homepage. This link is another place to be clever. It could direct to their search in order to help the user find a home to buy instead of redirecting to Redfin's home page.
The 404 page: Amazon
Why it's good:
Amazon doesn't typically have trouble keeping users engaged with the sheer amount of goods and services that they offer. The 404 page helps to keep the brand friendly and relatable by linking to the dogs of Amazon, which is a page filled of Amazon employees dogs' name, breed, and favorite toy. See it here.
Ways to improve it:
On the 404 page, Amazon could show related or recommended items based on pages that were previously viewed by the viewer. Why not personalize every page for the user, including the error pages?
The 404 page: IMPACT
Why it's good:
The 404 page for IMPACT Branding and Design makes great use of a background video. Simple gestures to direct the user to go find what they're looking for makes this error page highly effective. The 404 page also uses a conversational tone in the copy with a text box to further drive the idea of connecting with the user.
Ways to improve:
The 404 page could be a great place to start a conversation with a lost prospective client. By pointing the user to specific pages, offering a way to chat, or promoting your video or design services would help the user connect and further educate the user on the brand's service offerings.
The 404 page: Atlassian
Why it's good:
A 404 page doesn't have to have images or animations to get the user's attention. Depending on the user's needs and persona, your company may want to get straight to the point. This simple and succinct page with many navigational options and robust search helps the user move along.
Ways to improve:
There are so many options on the 404 page that the user may not know where to go first. Should I search in the top right search bar or the search bar on the page? At a quick look there are at least three ways to contact the company from this page, are they all the same method? Decision fatigue can set in quickly, especially when a user can't find a page they'd hope to land on. Simplifying the choices on a page can help a user stay engaged.
The 404 page: Time
Why it's good:
When you have a lot of content, the 404 page is your place to direct the user where you want them to go. Adding a list of recent or trending articles like Time's 404 page is a great way to keep a user engaged with the website content. The user might forget about that missing page when they find another piece of content to read!
Ways to improve:
Having the search bar well below the fold of the page means that many users will not scroll to see it. Rather than having a user navigate back to the homepage and try their search again, try to get the user to search first by making the search bar higher on the page than the link back to the homepage.
Conclusion
A 404 page should be as effective as any of your other website content. The error message will guide the user back to where content exists and maintain your company's tone of voice.
If you're hosted on HubSpot, a default 404 page is created for you automatically using a system template, and you can design custom system page templates in the Design Manager. Check out the user guide to see how to set up your own customized system templates.
If you don't want to design a 404 page yourself, take a look through the system page templates in the HubSpot Marketplace. You're bound to find a good starting template to create a memorable 404 page that showcases your brand.
Inspired to get lost? Try purposefully typing a bad URL "http://company.com/nopagehere" on your own website, and take a look at the 404 page. Let us know in the comments what makes your error page great or if you need some suggestions to improve your 404!