A UX Guide For Designing Error Pages.
404’s & maintenance pages. Use this checklist before you get started.
Theres more to a 404 page than you’d think. A cute illustration might raise a smile but we need to make sure we’re actually helping the user with the pain points they’re experiencing in that moment.
Design isn’t only about pushing pixels and creating UI. How a sentence is constructed, what information it’s conveying and the choice of words can make a huge difference in the success of a task.
Each design situation should address the basic who, what, when, why and how’s + a few others.
- Who caused the issue?
- What happened & why did this happen?
- When will this be solved? (Is it temporary or permanent?)
- How can I solve this problem? (Actionable items or getting help)
- Tie in the page with your company’s brand
- Add unexpected delight
1. Who caused the issue?
Be mindful of the pronouns you use. Who’s actions are you referring to? Was it the user’s fault? The company’s fault? This will also help you determine whether you should say things like ‘sorry’ or ‘Uh oh!’ as your header. Let’s say it’s a maintenance page, use ‘we’ as it’s caused by the company, not the user.
2. What happened & why did it happen?
What is a 404? Why can’t it be found? An error code isn’t enough. We tend to freak out over things we don’t understand. So inform the user about what could be causing the issue. Keep it simple and authentic.
3. When will this problem be solved?
404 pages are a permanent state, while a maintenance page is temporary. So the information we’ll offer will be different. Inform the user about: when will it be back up? Was it scheduled or unexpected? How can I be updated when it comes back online? Sometimes there’s too many unknowns to be able to include this information in the hard copy. The best way keep people informed is by linking them to your active social media accounts.
“We’ll be back up shortly. Check ...com or follow… for updates”
4. How can I solve this problem?
So now they know what’s happened and why, but what can they do about it? Give the user actionable things to do through the copy and active links. Point them to a way out or to something else to keep them in.
“Make sure you’ve got the right link, or you could try searching for something else”
- Suggest new content
- Open search bar
- Primary navigation available
- Other popular page links.
- Home page link
“We couldn’t find the page you were looking for. Maybe our FAQ or Community can help?”
If your users rely on your site to get critical and highly consequential information, mitigate for emergency situations. For example, travel agents, government sites & healthcare. Include upfront information on how to get in touch via a different way.
“If you need help with an ongoing reservation or for urgent issues, tweet us at… or call us on… ”
Lastly, you can also ask the customer for feedback.
“If you got here from another site, we’d appreciate it if you told us from where so we can fix it and save others from ending up here”.
5. Tie it into the company’s brand or product.
This is a great opportunity to engage with your users. Utilising symbols of the company to reinforce brand. Facebook has used the like symbol as a broken thumb, and Etsy is craft based, so she messed up knitting her sweater, aw.
Sure, these are cute, but they’re also communicating what the website is about if you’ve entered it with little to no context. ie a broken link from a different site.
6. Add Unexpected Delight
Injecting an element of fun can transform a negative experience into a delightful one. If you want to go an extra mile, treat it as an easter egg. An Easter egg is an intentional inside joke, a hidden message, or a secret feature. Digital agency Kickpush uses confused Travolta- Amazing.
TLDR? Summary
Who caused the issue?
- Was it the user’s fault? The company’s fault?
What happened & Why did this happen?
- What is a 404? Why can’t it be found?
- Keep it simple and authentic
When will this be solved?
- Keep people informed
How can I solve this problem?
- Point them to a way out or to something else to keep them in.
- Mitigate for emergency situations
Tie in the page with your company’s brand.
- Reinforce brand
- Communicate what the website is about
- Engage with your users.
Add unexpected delight
- Transform a negative experience into a delightful one.
