404 Error pages
Error pages are kind of like internet trolls….we’ve all encountered them at some point. Whether you tried to find a link that doesn’t exist, or you clicked on a broken web page, these kind of messages can be net negative experience for anyone navigating a web page or app. The wrong error message can send a user scurrying, while the right message can turn lemons into lemonaid.
Here’s what a basic error page might look like
Pretty boring stuff, right?
What do I do now?
Who are you???
Turn a negative into a positive
Every piece of content on your site or app is an opportunity to delight and attract users, turning your brand from an emotionless bot to an actual personality.
Here’s what our error page at MyGift looked like before:
That’s a lot of content to read, and a lot places we’re trying to direct the customer. And while I don’t hate the voice/tone, and I like some of the redirection, it still sounds a bit impersonal-As if it was written by a 3rd party that isn’t affiliated with the company (which is most likely the case).
My first revision
Warm, personable, and a little bit humorous, I wanted to convey the sense that while you might have encountered an error, it’s okay….we got this.
I used the sad gift box to further illustrate the MyGift brand….and the image says “there’s no gifts to be found here”.
CTA-Create some copy that suggests users to go back, while reassuring them that we’re on top of the issue.
2nd and final revision
Orient the user visually, and keep copy concise and to the point. Use icons to direct the eye to what we want them to do.
I believe it was Hemingway that once said “I’m a terrible writer, but I’m a great editor” (or something along those lines). The approach here is to keep the same tone/humor, but to condense it so the user only reads what’s important.
CTA- Flipped it with icons to direct the user in an easy to navigate interface.
Result: Decreased bounce rate and a more pleasant experience for users navigating through the site