The "404" page: how to make it good / WAYUP

A 404 error page is such a thing that any site with multiple pages is bound to have. And the most important thing is that it should be nicely designed, so that a person, having received an error, would not leave the site, but return to the section where he wanted to be, and continue his business. Here are some tips on how this can be done.

Let's start by explaining why we sometimes get this error in front of us. This will help you get the explanation right for the user. There are several possibilities:

A typo in the URL. Well, it happens, we're all human, we make mistakes sometimes. And if a person typed the wrong page address or followed the wrong link, a 404 error is sure to await them.
The page was moved to another section and as a result, it has changed the URL. Here, in fact, everything is clear - if the site administrator something dragged from one place to another, the page address changes, and the old link it is no longer available.
If sections are renamed, then, of course, the URL changes too, and the old links become useless.
Sometimes the platform server is unavailable or simply does not respond. In this case, too, pops up a 404 page.
And finally, the page on the link has already been removed. This often happens with special offers, sales and seasonal products - they appear, please us for a while, and then disappear without a trace, and the old links, we have nothing to find.

So, this is what is worth explaining to the visitor when he sees 404. Explain to the user what happened and why he got to 404. It is not bad to add a note of consolation, so the user is not upset. After all, when you see this is the inscription "404 Page Not Found" without any explanation, you can feel discomfort and begin to fidget.

In principle, the error happens at any site, so the creation of a 404 page - it is mandatory. Only one-page sites can be considered an exception. After all, they don't have any other pages, which means no other links. But if you have multiple pages and a more complex site structure, there will be transition errors.

An example of a page from the Adidas site - there's a search bar, an offer of popular products, a link to the home page. All clear.

Why do you need a separate page

As a good designer, you need to implement this page normally, not "just so it would be”.

We need a page that is thoughtfully designed and looks stylish. Why?

When a user encounters an error, his first, even unconscious, thought is to close the site. Our task is to prevent this. And if done right, a 404 page can be very useful:

Retaining and even increasing traffic. Frequent site abandonment is bad for the site's ranking in the search engine. And if the error is thrown up frequently, it will happen. That's why it's important to create a design so that the visitor doesn't run away, but stays on the platform. With the right approach, you'll keep your traffic and can even increase it.
Increase brand awareness and audience loyalty. Friendliness, easy navigation and thoughtful steps for the customer create a positive impression of the firm.
Finally, it will increase conversion rates. We have to give the visitor what they're looking for if they came to the site but didn't see the right page. So don't just report an error, but offer a solution.

This is how Airbnb solves the problem

Content options

For starters, always communicate what the user sees and why. In simple words. And be sure to place clickable elements. At least a button with a transition to the home page. Or a menu. The page must have CTA, otherwise we risk losing the visitor.

Look for ways to engage. In addition to the standard transition to the Main Page can do this:

menus, sections, products - with active links and previews;
useful materials - guide, master-class, custom instruction, how-to, catalog;
advertising - but not directly to the forehead, but as an apology for the inconvenience. Couldn't find that exact product on sale? Here's a link to other hot deals. Or even a promo code.
Playbill/announcement - let there be information about events that are expected in the near future. Again, with the option to sign up or buy in.
Search bar - especially effective for large sites. If it takes a long time to search by category, let the visitor enter relevant keywords and immediately find what they're looking for.
Frequently asked questions - if something went wrong, perhaps the visitor needs help. Put a FAQ section on the 404 page, if appropriate.
Animation or video - we've already talked about how a video instead of static works well on the Success page. It's appropriate on the 404 as well. Live content is engaging. But it also needs to be useful. Let the right information be there.
Interactive is more difficult to implement, but very engaging. Tests, online games, questionnaires and similar things make not only do not miss the visitor, but also keep him on the page.
Feedback - post a form to report a problem or a standard form with feedback. Maybe a call order button. This can help if the visitor is confused. It's also a demonstration of caring, so that will work to increase brand loyalty.
Promote other products/services - appropriate if the visitor entered a URL that has a category/subcategory address, but the product itself is no longer there. Then it's worth saying that this page doesn't exist, but there are similar ones from the same section. Maybe there will be something appropriate. Or maybe the visitor will just see the right path and go to another link.

A good idea - leave the 404 page header and footer. In this case, you'll already have all the sections and contacts, maybe a form of communication. This frees up your hands for other solutions and creativity.

Nice animation from the 404 page https://weemss.com/

A couple of tips and conditions

A big plus is that there are no clear criteria for the design of the error page. So you can let your imagination run wild. And it's even welcome - the funnier the page, the better it will be remembered. There are no rules, but here are some smart tips:

The overall concept for the entire site - withstand a single style, your 404 should not differ from other pages or design, or filing. This is important first of all for perception - the visitor should see that he is still on the same site. Secondly, it's just convenient if you use ready-made elements. For example, make a 404 based on the first screen of the home page.
Humor - the competition for the wittiest error page is declared open. Defusing the situation and playing up failure in a fun way is really important. Especially if you do it using the theme of the site. Illustrations, funny captions and animations will be appropriate. Of course, if it doesn't contradict the Tone of voice of the brand itself.
Individual approach - play up the specifics of the direction. If this is a construction site - let 404 will show a broken crane and perplexed worker in the helmet. The site is a pet store sad cat. You get the concept.
Cling. Besides usefulness, aesthetics are important. The page has a function - not only to inform, but also to make the visitor perform the action we want. Therefore, it is important to catch his attention with an interesting presentation. The user should not close the window as soon as he sees the inscription "Error 404". So creativity is welcome.

The legendary Pixar uses a character from his own cartoon.

What you don't want to do

The main thing is not to refuse to create a page. It has to be. There are options technically to avoid the appearance of 404, this is called linking 301. In this case, instead of issuing an error, the visitor is simply thrown on the main or other pages. This infuriates the user and eventually we can lose him.

Second: try not to do it in a template way. Bad page 404 is better than no page. But in this case you do not use the full potential of the site and lose leads. Properly designed error page can be a useful marketing tool, do not miss this chance.

One more thing. Do it in an original way. An out-of-the-box approach pays off. It can become a brand calling card, a small but cool passport. You don't have to do it just like that or copy someone else's, but devote time to developing an interesting idea. This is not only for the site, but also for you - the reputation of the designer is important, if you do cool, you will receive appropriate offers.

An example of 404 page of Ukrainian gamedev company https://www.playtika.com - offer to play immediately or choose the desired section in the footer

Find out how to make it cool

You can always find interesting solutions if you remember the main goals: to help the user, not to let him get frustrated, to keep him and give him what he wants.

Page 404 usually becomes a springboard for the boldest ideas, so do not miss the chance for self-realization in terms of creativity. Although you should understand that without basic UX/UI skills nothing good will come of it. So sharpen your skills, study the theory and train your eyesight. And learn from the professionals. Come to the online course "UX/UI legend" there will be all the tricks and secrets.