5 404 Error Page Wins and Fails

“Oops! The page you are looking for no longer exists.” We’ve all landed on a website’s 404 error page when trying to find a product or information. Error pages are an important opportunity to motivate browsers to stay on the website and search for a new item, instead of jumping ship and searching for another site.

We’ve rounded up our picks for best and worst 404 error pages. The error page wins are clever, on-brand, and entice us to keep exploring the website. The error page fails need to be overhauled – fast.

Winning 404 Error Pages:

These error pages get an “A” for on-brand design, copy that made us chuckle, and clear calls-to-action (CTAs).

Website:
World Market
What’s working:
World Market extends an uninterrupted user experience with a branded landing page, clear CTA, and product category imagery, making it super easy and compelling to continue shopping.

World Market Error Page

Website: The North Face
What’s Working:
We love The North Face’s clever copy blaming goats for eating the webpage, and the clear CTA guiding browsers back to the homepage. Bonus points for providing a link for reporting errors to the web administrator.

North Face 404 Error Page

Failing 404 Error Pages

We’re giving these error pages an “F,” because they completely miss the mark. Broken images, robotic copy, and even blank pages make these error page failures a wasted opportunity to redirect users’ attention.

Website: Shutterfly
What’s Not Working:
Shutterfly disappoints with a blank error page missing branding, copy, or even a CTA.
Improve It:
Shutterfly’s error page should reflect their fun and creative homepage. We’d add copy like, “Looks like you ran out of film!” with CTAs to the homepage or most popular items.

Shutterfly Error Page

Website: Michaels
What’s not working:
Although we see some effort, the broken logo and lackluster copy tells us this error page hasn’t seen a lot of love lately.
Improve It:
First, we’d create a landing page on the website, so the branding and navigation are seamless. Next, we’d update the copy to be more creative – just like their brand! We suggest something like, “Oops! Looks like you have glue in your hair! While we can’t help with that, we can help you get back to the homepage.”

A hyperlinked button, instead of hyperlinked text, will also improve the user experience. For a company with such fun product offerings, this error page needs a makeover.

Michaels Error Page

Website: Nordstrom
What’s not working:
Nordstrom wastes their error page’s prime real estate by omitting images, compelling copy, and a CTA button.
Improve It:
Although Nordstrom has the right idea by using a custom landing page, the customer experience comes to a halt. Keep the conversation going with bold imagery, clever header text, and CTA buttons.

We’d feature an image of a surprised model with the text “Fashion Snafu? Head back to the homepage or see what’s trending.” The copy doesn’t need to be lengthy to be effective. Additionally, the error page is a great place to include top products or product category sections, like World Market, to keep browsers clicking.

Nordstrom 404 Page

Where Does Your Page Stand?

What happens when a user accidentally types in the wrong URL or clicks a broken link? As you read this post, did your eyes widen with the realization that you never set up an error page or the one you have might not get a passing grade?

Use the best practices shown in the winning error pages: a dedicated landing page with branding and navigation, clever copy, bold imagery, and clear CTAs.

If you don’t want an error page on your website, set up a redirect to the homepage for all invalid URLs – West Elm does this to side-step the error page. Do what makes sense for your company, but make sure you extend a consistent and pleasant user experience everywhere on your site, even if your customer has an “oops” moment.