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 say

Pretty boring stuff, right?

What do I do now?

What happened?

Who are you???


The problem with error pages

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:

  • Our error page had a bounce rate of 55%. More than half of users would leave the site, and never come back.

  • 55% bounce rate means lost opportunities, user apathy, and lower SEO rankings.


Creating a better error page

First version

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.

Result

10% decrease in average bounce rate.


2nd and final revision

approach

People love unicorns for some reason, and I like the fact they instantly add a bit of humor and levity to any content.

It’s a bit risky, unicorns didn’t have much to do with the MyGift brand, but I wanted to showcase more humor and create something new and different.

Result

Decreased bounce rate by 23%, for an overall bounce rate of 32%.

Knomad error page

404_error.jpg

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.