The 404 error page

You know them, you have seen them, and I bet you are familiar with the feeling of reaching a dead end. That is a 404 page. In technical terms, a 404 error is an HTTP status code that means that the page you were trying to reach on a website could not be found on the server. The server is reachable, but the specific page is not—maybe you mistyped, or the page does not have the correct redirects. These pages are frequently customized, especially since it became a worldwide contest, and the data has shown why not to create your 404 error page from a template. It is an opportunity to build your brand and turn the user's frustration into a laugh.

 

You have probably stumbled upon something like this in the past:

 

404 Error

 

404 Not Found

 

Error 404

 

The requested URL [URL] was not found on this server

 

HTTP 404

 

Error 404 Not Found

 

404 File or Directory Not Found

 

HTTP 404 Not Found

 

404 Page Not Found

 

Error 404. The page you're looking for can't be found.

 

 

These are the classical messages that the browser presents to you when one of these reasons comes up:

 

The server is down.

 

A page moved and was not redirected.

 

The page never existed.

 

You typed the URL wrong.

 

The URL is broken.

 

 

That is why Error 404 is actually a client-side error: either the user has typed the URL wrong, or the page has been moved or removed. 404 is a human error, be it from the side of the user or the developer.

 

Be careful, as HTTP 404 errors can damage a site’s ranking and reputation. Crawlers such as Google and Bing can assume that the site is not well maintained, leading to a drop in the site’s ranking position and traffic.

History 101: 404

As Renny Gleeson states in his talk, 404, the history of a page not found: “The 404 error is one of the most recognizable errors users can find on the web.” It is the default site when you ask for something that can’t be found. Renny puts forward how this comes through as the feeling of a broken relationship. A 404 page is like a slap in the face.

 

According to Renny, 404 customizations started when Athletepath put a video on his 404 error page: Joey’s OK (he probably wasn’t). That video of a man jumping through the air after hitting an obstacle represented the feeling of hitting a 404. This first experiment turned into a 24-hour contest. Some went for funny sites, others blamed the user, and many saw a chance to build their brand. Those well-designed moments showed that “Little things, done right, matter.”

 

This change of paradigm converted the usual 404 dead-ends into an opportunity. Taking Renny’s words: “A simple mistake can tell me what you are not. Or remind me why I love you.”

 

Today many well-known sites present a funny, cute or witty 404 page. Among my favorites: Blizzard, Pixar, GitHub, Disney, Lego, Slack, Magnt, Marvel, Star Wars, and Steve Lambert’s awkward experience. What do all of these have in common? They build on their brand and extend the user experience of their site.

UX and the 404 error page

A good 404 page considers every aspect of the user experience (UX) and wants to keep users on your website. It helps them forgive you for the error (even if it is theirs) and keeps them on the site.

 

When a page is missing, a complete site is missing, or users typed an URL wrong, the last thing they want is a greyscale, times-new-roman dead end. In today's fast-paced internet landscape, a generic 404 page is an eyesore and a potential turnoff. If a person wants to enter your site and mistypes, they will face this page. You never get a second chance to make a first impression. The 404 pages are part of the user experience, even if you do everything to avoid them from getting there.

 

With a change of framing, you can see this mistake as an opportunity to brand your site, boost your charm, and show creativity. It can even foster trust in some users as you take every opportunity to put your message out. Be sure that the page fits your brand and message. Also, you don’t want to leave the user hanging: offer a solution, seize the opportunity. Keep these alternatives in mind to reduce bounce rate and make users continue browsing your site to give them what they were looking for.

 

Even when it is their mistake, do not blame your users or come up with something funny, as Magnt did. Be sure to have a link to the homepage or other pages. Remember that this does not have to be a dead-end, but an opportunity, so keep these in mind:

 

Help visitors find their way around—important links can help

 

Make the error page user-friendly

 

Make it similar to other pages

 

Keep it light-hearted

 

You may include a search box

 

Do not make your visitor feel stupid

Figma 404 page

What is Figma? You might be wondering. It is a design software we use at Awkbit. It allows quick editing, collaboration, and version control. This comprehensive design tool serves you with web design from wireframes to prototypes and can even stretch to your final product.

 

Figma 404 page might not look like much at first glance but hides a level of complexity: the 404 numbers are editable like scalable vector graphics, another topic we have previously discussed. This minimal feature not only expands on Figma’s brand but also transforms the user's frustration into a fun little game. That is a 404 page done right for you.

Emotional design

Emotional design is a term and a book by designer Don Norman, one of the founders of Nielsen Norman Group: a website for designers and web developers. In his book, Don investigates why an appealing design works better and feels better, stating the importance of emotions.

 

I believe that the connection is immediate: a 404-page design can make the difference between a good or bad mood. Think of your own experience: would you rather face a mistake with a chuckle or senseless frustration? An appealing 404 can produce a lasting connection between the user and the page, as is the case for me with Blizzard’s genius Murloc page. You want to be sure that people associate your site with positive emotions; there is nothing good about a generic dead end.

 

At Awkbit, we have dedicated time to design our own 404 page. One that builds upon our brand and displays the exact situation in which the users find themselves when hitting it. With human-first design and conveying a message through an image, we aim to evoke a specific emotion in the user while staying away from templates and boring design. You can check our page here. Do you need assistance to build up your brand with a 404 page?