How To Design an Effective 404 Page for Websites

Just as you might configure a contact form with in-line error messaging, your website should have a custom 404 page ready for users who venture down the wrong path. But what exactly should you include on it? In this post, we’ll look at some effective examples of 404 error pages and tips to help you build your own.


This content originally appeared on Telerik Blogs and was authored by Suzanne Scacca

Just as you might configure a contact form with in-line error messaging, your website should have a custom 404 page ready for users who venture down the wrong path. But what exactly should you include on it? In this post, we’ll look at some effective examples of 404 error pages and tips to help you build your own.

Is it a waste of time to create a custom 404 page for a website? I don’t believe so.

As more and more users flock to the web to get things done, we have to expect that many of them will encounter 404 errors due to broken internal links or misspelled URLs. While we want to do everything we can to minimize those occurrences, sometimes it’s unavoidable.

As such, it’s a good idea to create a custom 404 page so that visitors encounter something interesting and helpful instead of a page that feels cold and mechanical. In this post, we’re going to look at why a custom 404 page is preferable to the system default message along with tips to help you create a 404 page that gets visitors to re-engage instead of bounce.

6 Tips for Designing a Custom 404 Page

A 404 error page appears when a website visitor encounters a non-existent page. This can happen when there’s a broken internal link on the site (because the page was renamed or deleted) or when the user types in the wrong slug.

There are a number of default error pages that may appear if no customization is done to them.

This “server error” message is one of them:

A user encounters a non-existent page on a website and a gray page appears with a header reading “Server Error”. There is a simple message in a white box beneath it: “404 - File or directory not found. The resource you are looking for might have been removed, had its name changes, or is temporarily unavailable.”

While the user is still technically on the website (as evidenced by the address in their browser bar), the only way to escape from this kind of error page is to use the “Back” button. Neither the message nor the reversal approach is user-friendly.

The “not found” message is another generic way to handle the 404 error:

A user encounters a non-existent page on a website and a white page appears with a header reading “Not Found”. There is a simple message below it that reads: “The requested URL was not found on this server. Additionally, a 404 Not Found error was encountered while trying to use an ErrorDocument to handle the request.”

Again, the website effectively disappears and the user is left with this jarring disruption to their experience. All it is is an all-white page with a simple, technical explanation at the top of how they ended up there.

A custom 404 page is going to be much better for the user experience than these two pages. However, you have to do more with it than just place the 404 notice within the context of the site as Tesla does:

The 404 error page on Tesla. The website’s navigation and footer are still visible. However, the content only shows a big “404” followed by the words “Page not found” and a string of hyperlinks beneath it.

This is a step up from the default pages that hide the header and footer of the website. However, there’s nothing really of value here.

If you can design a custom 404 page that reduces user frustration and provides them with a more memorable or entertaining experience, you’re more likely to see them re-engage than exit the site.

As you go about creating your 404 page, here are some things to keep in mind:

1. Clearly State That an Error Occurred

As I explored 404 error pages today, I discovered an annoying trend. Many websites don’t have a 404 page at all. Instead, when someone encounters an error, they immediately move the user to a designated page (usually the homepage).

While it’s nice to keep users on the site, it’s going to confuse a lot of people when they assume they’re about to see a product page, for example, but end up on the homepage instead. In fact, many of those people will probably try to execute the same steps as before, thinking that maybe something went awry before.

This kind of design will only result in users doing unnecessary work and giving them more reason to be frustrated and fed up with the site.

It’s OK when errors occur, so long as they’re rare. And when they do, you should have a 404 page waiting for them—one that explains that an error did occur, but it’s okay because you’re going to help them get back to the good parts of the site.

Here’s how the Laura Mercier website does it:

The 404 error page on the Laura Mercier website. At the top there’s a big, bold, underlined message that says “This page does not exist.” Below it, it asks “Can we help with something else?” and there’s a search bar placed just beneath it.

This 404 page skips the mention of the 404 error code altogether and spells it out in basic terms: “This page does not exist.”

That said, there’s nothing wrong with including a reference to the error code. Most people are familiar with what it means. However, if you’re going to do that, consider adding a personalized message alongside it as NFL.com does:

The 404 error page on the NFL.com website. The background shows a yellow flag laying on the football astroturf. On top of it the message reads “404 - Flat on the Play.”. There’s a blue button that says “Back to NFL.com”.

This error page uses football terminology and an accompanying image to refer to the foul that has occurred. Even though website errors are annoying, the cheeky take on the 404 error page will likely bring a smile to many football fans’ faces who encounter it.

2. Keep the Navigation Visible

The only time it’s really acceptable to remove the navigation from view is for sales landing pages. Even then, that’s somewhat questionable as there should at least be a link pointing back to the homepage in case the user decides they made a wrong choice.

While your 404 error message can provide helpful links within it, the website header and navigation should also be in full view on the 404 page.

Here’s what Monzo’s 404 page looks like:

A GIF of the 404 error page on the Monzo website. There’s a short message on the right. The numbers “404” are in a large grey print, followed by “Sorry, we can’t find the page you’re looking for.” There’s a transparent button below the text that says “Visit the home page”. And to the right of the error message is an animated pink Monzo credit card figure who pulls out his pockets to reveal nothing but a speck of dust.

There are a lot of great choices made by the designer of this page. First, they keep it simple. The 404 error message is brief and to the point. Second, they include only one recommended link so as to reduce the number of decisions the user has to make, given the fact they just realized what they’re looking for isn’t there anymore.

What’s more, the overall design—the ample white space, the cute animation and the visible navigation—will help reduce any feelings of claustrophobia or restriction the visitor might feel when encountering an error.

3. Be Mindful of How You Use the Word “You”

You never want your users to feel like they’re being blamed or shamed for any actions they take on your website. So, to keep them feeling positive and confident about the experience, you (or your copywriter) will need to be mindful of how the 404 error message is written.

Let’s look at the 404 page example from Anthropologie:

The 404 error page on the Anthropologie website. There’s an animated abstract graphic in the middle of the page. Above it, the message reads “we can’t seem to find what you’re looking for… care to keep exploring?” There are two buttons beneath for “Shop New Arrivals” and “Have a Question?”.

Anthropologie’s error message bears the brunt of the responsibility by saying, “we can’t seem to find what you’re looking for…” By turning it around on the brand, the user is less likely to feel like they were the one that made a mistake.

Another option is to take you out of it altogether as Travel & Leisure does:

The 404 error page on the Travel & Leisure website. The background shows an image of a yellow-green hillside with a road running through it and sheep in the middle of the road. The message on top of the graphic reads “404 - We’re all for taking the road less traveled, but this path goes nowhere. Visit the T&L homepage for travel tips, news and inspiration”.

Again, there’s no blaming the user. The message simply states that “this path goes nowhere” and then it directs the visitor to try one of a few different links.

4. Add Some Personality to the Message

It’s disappointing when you encounter an error on a website. You had an expectation of what was to come next and then, ugh, it looks like that’s not going to happen.

But what’s more likely to soften the blow when this happens? A page that mechanically lists out the error code and the technical reasons why it no longer exists? Or a page that adopts the personality of the brand and gets you to smile and maybe even laugh a little?

For example, this is the 404 page for the Skillshare website:

A GIF of the 404 error page on the Skillshare website. The background is all blue and there’s a green orb that moves around the page as the user’s cursor moves. The message reads: “404 - Looks like our team needs to take a class on finding our own pages. Sorry, we couldn’t find the page you’re looking for.” There are two buttons below for “Home” and “Support”.

The design of this page is really cool as the green orb moves along with the user’s cursor movements. If they happen to move into the top-right corner, they’ll see a toggle switch that changes the background from blue to green.

That’s not really what we should be focused on though. It’s the cheeky, self-deprecating error message that enables Skillshare to take the blame for the 404 error away from the visitor.

Another website where we find a fun take on the 404 error page is Progressive:

A GIF of the 404 error page on the Progressive website. The message at the top reads “Looks like this page is missing… On the bright side, we found the lost TV remote, car keys, and some helpful links!” There are three links below for Progressive.com, About Us, and Answers. There’s also an animated graphic that shows a person finding the TV remote and car keys..

Since this brand is known for its wry sense of humor, I was expecting to find this sort of 404 page on the site. And it didn’t disappoint. It’s just as silly as the ads the company runs for its insurance products.

Of course, you want the personality and sense of humor to align with the rest of the copy on the site, so if jokes and self-deprecation aren’t a natural part of the brand identity, go easy on it. A 404 error message doesn’t need to be funny in order to be effective.

5. Use Branded Imagery

If you’re going to the trouble of creating a 404 page for your website, make sure you use brand-specific imagery in your design. Generic images or illustrations are always a dead giveaway that the page was quickly thrown together from a template. While that kind of imagery is an improvement on the default 404 error page, you’re not going to impress any of your users that way.

The example I want to look at for this one is Marvel.com. Here’s one of the few designs that visitors will encounter if they run into a non-existent link:

A 404 error page on the Marvel website. This one features an image of Captain America holding his head in pain on the right side of the screen with the HYDRA symbol in the bottom-center. On the left is the following message: “404 Page Not Found. HYDRA is currently attacking this page! Check that you typed the address correctly, go back to your previous page or try using our site search to find something specific.”

This is a lightly animated 404 error page featuring Captain America and his long-time foe HYDRA. Fans of Marvel will instantly recognize the graphic of the superhero and will be entertained by the HYDRA name-drop.

Another page they might encounter is this one:

A 404 error page on the Marvel website. This one features an image of Thor’s hammer Mjölnir on the right side of the screen. On the left is the following message: “404 Page Not Found. You are not worthy… Check that you typed the address correctly, go back to your previous page or try using our site search to find something specific.”

This 404 page features Thor’s hammer, Mjölnir. Just as one must be worthy in order to wield it, apparently one must also be worthy to find the page they want on the Marvel site.

Another 404 alternative is this one featuring Black Widow:

A 404 error page on the Marvel website. This one features an image of Black Widow covering one of her eyes while looking at the Eye of Uatu. On the left is the following message: “404 Page Not Found. Not even the eye of Uatu sees your request… Check that you typed the address correctly, go back to your previous page or try using our site search to find something specific.”

We see Black Widow holding her hand over one eye while looking down at the Eye of Uatu.

The beautifully illustrated (and, in some cases, animated) graphics are perfect for the Marvel website. If the designer had used anything but characters from the pages of the comic books or movies, visitors definitely would’ve felt disappointment on top of their confusion and frustration at encountering a 404 error.

You obviously don’t have to go to the extremes that Marvel does to create this many 404 alternative designs. The point is to show you how relevant, branded imagery can make the page more effective.

Imagine you’re at a restaurant and the server asks you what you want to order. But everything you ask for is sold out. Instead of offering comparable alternatives you’d like, the server just stares at you all glassy-eyed, waiting for you to request something else. That’s what it can feel like for some visitors when they run into a 404 page without anything but an error code and “page does not exist” message.

The people who take the time to read through the error message aren’t doing so in order to get a summary of what a 404 error means. By now, most people realize that the 404 error means that the one they wanted doesn’t exist—at least not at the URL they tried to access it through.

What they want is help. While the visible navigation and footer can be of some assistance, the 404 message should be more specific about what they should do next.

The best thing to do is as the Nielsen Norman Group does and provide suggestions based on popularity and usefulness:

The 404 error page on the Nielsen Norman Group website. The error message is on a plain white background. The page title reads “Page Not Found on nngroup.com (404 error message).” Below, the page recommends a number of steps — to visit the Most Popular Pages, to Try the Homepage, and to do a Search.

The page is simply designed with well-structured copy and plentiful white space. There are three steps suggested to lost visitors:

  • Check out the most popular pages on the site.
  • Try the homepage.
  • Do a search (they’ll find a search bar if they scroll just a bit more).

Don’t focus too much on the design of the page itself. That’s yours to make of what you want. However, the structure of the recommendations with the clear headings, short sentences and colorful hyperlinks is worth emulating if you’re going to provide steps and tips on where to go next.

Wrap-up

Ideally, your website will be set up to limit how many 404 errors occur. That means frequently monitoring for and repairing broken links. Setting up 301 redirects whenever you change a page’s slug. And also monitoring your Google Analytics and the traffic flow that commonly takes visitors to the 404 page.

Even doing this can’t prevent all 404 errors. And like I said in the beginning, that’s A-OK. So long as you have a custom 404 page waiting for your visitors—one that’s relevant, helpful and on-brand—you’ll encourage most of them to re-engage with the site.


This content originally appeared on Telerik Blogs and was authored by Suzanne Scacca


Print Share Comment Cite Upload Translate Updates
APA

Suzanne Scacca | Sciencx (2022-12-28T16:11:03+00:00) How To Design an Effective 404 Page for Websites. Retrieved from https://www.scien.cx/2022/12/28/how-to-design-an-effective-404-page-for-websites/

MLA
" » How To Design an Effective 404 Page for Websites." Suzanne Scacca | Sciencx - Wednesday December 28, 2022, https://www.scien.cx/2022/12/28/how-to-design-an-effective-404-page-for-websites/
HARVARD
Suzanne Scacca | Sciencx Wednesday December 28, 2022 » How To Design an Effective 404 Page for Websites., viewed ,<https://www.scien.cx/2022/12/28/how-to-design-an-effective-404-page-for-websites/>
VANCOUVER
Suzanne Scacca | Sciencx - » How To Design an Effective 404 Page for Websites. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2022/12/28/how-to-design-an-effective-404-page-for-websites/
CHICAGO
" » How To Design an Effective 404 Page for Websites." Suzanne Scacca | Sciencx - Accessed . https://www.scien.cx/2022/12/28/how-to-design-an-effective-404-page-for-websites/
IEEE
" » How To Design an Effective 404 Page for Websites." Suzanne Scacca | Sciencx [Online]. Available: https://www.scien.cx/2022/12/28/how-to-design-an-effective-404-page-for-websites/. [Accessed: ]
rf:citation
» How To Design an Effective 404 Page for Websites | Suzanne Scacca | Sciencx | https://www.scien.cx/2022/12/28/how-to-design-an-effective-404-page-for-websites/ |

Please log in to upload a file.




There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.