Making a Friendly, Useful 404 Page

First let’s quickly examine a default 404 error page:

This page has a few usability issues.

  1. This page is a complete dead end. There are no buttons or links on the page to bring the user back to the site they started on. This forces the user to use the browser’s back button or leave the site completely. This is bad assuming you want to retain your users!
  2. The text is unhelpful. A layperson won’t know what this message means, and they shouldn’t have to. Your users should be able to tell easily what happened and whether or not the issue is on their end. Don’t force your users to waste time reading useless text.
  3. What a waste visually! Hopefully, users aren’t often seeing 404 errors on your site, but when they do, why shouldn’t they be visually appealing? Why shouldn’t they fit with your company’s branding?

Here’s the page I designed to address those issues:

I used fun visuals on this page so the page feels thought out and not just a system error or afterthought. I used real english to explain that the page is gone, but it’s a problem on the website’s end not the user’s to help assuage any concerns. Lastly, I offer two options to users that will keep them on the site and not force them to engage with browser navigation. The primary CTA lets them resume what they were doing right before they hit this page to allow for as little interruption as possible, and the secondary CTA brings them to the site’s homepage so they can choose to start a new process on the site.

I also added some animation to liven it up:

--

--

--

Product Manager with a background in computer engineering, design, business consulting, and agile methodology

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Role of ux researcher

Designing the Sound of Reality: Lessons From Designing Spatial Workstation

Top 20 Astounding Elementor Backgrounds By Unlimited Elements

Top 20 Astounding Elementor Backgrounds By Unlimited Elements

Figuring out

WAAMI (A fictional E-commerce application) — UI/UX case study

ESSAY SCHOLARSHIPS FOR HIGH SCHOOL SOPHOMORES

Meme analysis but this time I made it myself

Storytelling for designers

Small children sit in a circle on the floor and listen to the kindergarten teacher reading from a book.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Julia Deutsch

Julia Deutsch

Product Manager with a background in computer engineering, design, business consulting, and agile methodology

More from Medium

Best blogs for a UI, UX and creative Frontend people 2022.

UX/UI Case Study: Andiamo - The elderly companion

UX/UI Inspired Collection #001

What to Expect in the Web Design Process