Sorry, You Just Encountered Our 404 Error

One of the most frustrating things in the world is to look for something and not find it for some reason. If we add to that frustration the fact that nowadays we hardly use the time to do anything for ourselves, investing it in doing something and not achieving, generates anxiety and discomfort. If we apply all this to the online environment, the irritation becomes more intense.

We need higher and higher bandwidths to get faster responses. We need the website to load as fast as possible so that we don’t have to wait a millisecond and, if we can’t find something when we search for it, we swiftly log out of the session. That is why bounce rates are so important in web metrics and why it is so necessary to have well-optimized pages. We need the Internet user to quickly find what they are looking for and, if not, we give them options to stay on our website, to give us another chance.

What do the codes or errors we encounter when navigating mean?

We have all encountered on many occasions that, when trying to navigate, the web has thrown a code or an error. These codes are generated for multiple reasons and are grouped according to their typology. Thus, we have:

• The codes starting with 100 and 200 are status codes and we will never see them because they are requests made from the browser to the server. They indicate that everything is still in progress and that the request has been made and returned correctly.
• Codes beginning with 300 are related to redirects and indicate to the browser that the page or resource you have requested has been moved.
• The 400 codes are client errors, i.e. our own computer.
• And finally, the codes 500 are errors of the server to which we make the request.

Out of all of them, the most famous codes are the 404 errors that indicate that the address is not available on the server. It may be that the address was operational at the time but has been moved, or deleted, or you simply made a mistake when entering the address in the browser bar.

As these types of errors generate frustration for the Internet user, it is good practice to put a pleasant face to the bad weather and find creative solutions for it. In addition, it can help us to redirect the person to any part of our website or at least make them smile while you speak well of the brand and minimize the user’s frustration.

Once a user has landed on our 404 error, you have captured their attention for a few milliseconds, but you must explain why they got there and what their options are. From offering a discount code to apologize or showing related products, in case you have an eCommerce, to showing graphic jokes. The possibilities are endless and here are some wonderful ideas that at least for us have brought a smile to our faces during our browsing and research.

Within the types of 404 errors that companies use we can see different strategies:

Animated illustrations

Some companies choose to display animated illustrations on their 404 errors. We believe that an attractive design minimizes frustration and increases the sympathy the user feels for the page. Also, as in the case of Freepik, it maintains the aesthetics of the brand and the movement keeps our attention on the company itself. The illustration should not distract from the real message, so it is important to explain to the user what has happened and the options they have to move forward. In the case of Flaticon, we give them the option to return to the home page and to write to technical support. We can find hundreds of icons with which to build our 404 error in Flaticon or use the illustrations created especially for this type of page in Storiset.

Another website that opts for this strategy is Mailchimp, where, through a simple illustration of an animal looking for the requested page in a parallel universe, it explains that it has not been able to find the website.

Interactive games

One way to advance to another level is to involve your programmers and create 404 pages with small and addictive games that make us stay a few seconds on the web, thus creating engagement. Something similar to what Google does with its dinosaur mini-game (copying ‘chrome://dino/+enter’ in the browser) when it can’t find a connection.

We have been hooked by several mini-games, including the one that web programmer Romain Brasier has created in his 404 error, with which we will remain on the 404 page until 404 lemmings die; the one from Wendy’s hamburger restaurant where we have to avoid the tiny, evil hot dogs that try to sabotage your ingredients from the menu. And let’s not forget the one from the Feldman Marketing studio that makes us spend a pleasant and nostalgic moment with the well-known snake game from the old Nokia of the 90s.

Social Service

Although the vast majority of 404 pages that we have found are a relaxed and fun way to inform the user, there is a project that we want to highlight, precisely because of its social work.

This is the NotFound.org project, in which we propose to make social use of our 404 pages and give visibility to missing children to try to find them anywhere in the world, using the universality of web pages. This project has the subscription of more than 6000 websites and has a WordPress plugin to install it in this cms simply and intuitively.

Graphic jokes

One of the most common solutions applied to 404 pages are graphic design jokes. Such a page is used with a sense of humor, with a witty and often self-critical approach. They are usually short texts accompanied by images, animations, and even videos that entertain users.

Among those we highlight is the Digital Marketing agency Ueno, which resorts to surrealism and presents us with a hot dog running away while flying over random objects. At the same time, it invites us to return to reality when we go to its homepage.

Or The New Yorker magazine that chooses an illustration of a mouse lost in a maze while the GPS it carries recalculates the route.

Products

It is wise to take advantage of a weakness to turn it into a strength. This is what happens when companies use their 404 errors to talk about their own product in a funny, self-critical way, intending to approach and humanize the company. In addition, it is used to show the product or service itself.

We were inspired by the Lego cases, a simple page with a lot of personality. An image of one of their dolls with a panic face contrasts with one of the songs from the brand’s movie: “Everything is fabulous”.

Ikea, likewise, builds its error by showing its own products and these change every time we reload the page. HBO, shows scenes of series masked inside the 404 error and phrases of the same or Pantone that uses its 404C color to fill its page with color.

Interactive pages

Some websites also make interactive games, intending to entertain you for a while, with the difference that in these cases you do not have any specific objective beyond relaxing and testing its features. We confess that we have lost a few minutes on the Hot Dot error page, where with one click of the mouse we can see an explosion of hundreds of fluorescent dots.

The website of web developer and web designer Benjamin Reid creates a very amusing movie reference. When we get to its 404 error, we enter fully into the security interface of Jurassic Park. We have to type different combinations to get out of it. If we type the wrong answer 3 times something surprising will happen. Do you dare type “Trex” into the interface?

Finally, the agency digital MAD proposes to simply activate or deactivate checks and form different drawings.

Videos

The most used resources on the Internet are videos, so it seems logical to us that many companies use them in their 404 errors. This is the case of the beverage brand Red Bull, which uses spectacular videos to link its brand. Or the Hook Agency, which uses a video of a job gone wrong as an audiovisual joke.

Memes

Companies must follow social trends, and therefore, it is normal for many companies to turn to memes. But what is a meme? They are resources used to communicate on social networks. Its format can be a phrase, an image, or a video, among others, with a humorous theme that borders on the absurd. What characterizes memes is that they become an international phenomenon that spreads the same images or jokes all over the world. The agency Hello Big Idea or the meme website 9 Gag use these resources to communicate their 404 error.

Personalization of the company

Finally, we cannot fail to mention Amazon, which in its 404 error presents pets of its employees. This action serves to humanize the company and boasts of being one of the most respectful companies with dogs in the United States.

Every time we reload the 404 error page we can find one of the more than 8000 pets that ‘work’ at amazon.

No company wants their traffic to end up on a 404 Error page, but they are aware that this is impossible. Therefore, a well-designed 404 page can be the difference between a frustrating user experience and an engaging one.