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.

7a301326b19cee0450d12269c2f35e75d695eab3.jpg

Here’s what a basic error page might look like

Pretty boring stuff, right?

What do I do now?

What happened?

Who are you???


Turn a negative into a positive

Before

error pagebefore.JPG

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

APPROACH

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

approach

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).

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

Error page.jpg

Knomad error page

For my General Assembly app project, I created an error page for any missing or broken content. Because it’s my own app and I get to choose my own voice/tone, here’s what I created.

Strategy

I want users to enjoy the experience of using the app, using lighthearted, playful language to communicate information. This makes it simple to understand that there’s an error, while giving them direction as to where to go next.

Because it’s an app related to traveling, I used imagery of a hiking trail to illustrate the point.