How should the Page Not Found (404 Page) be? (With example)

"Ah! Where did this page go? "The problem of the world that secretly destroys your website.

Have you ever? Surfing the web and enjoying Click to the interesting link ... return to see the empty face. Which has a dry message "404 Not Found" or "I can't find this page." At that time, it would be like walking into the mall and found a door that was dead, both confused. "Did I come wrong?" Or "This website is ruined?"

This is the direct experience that the internet users encounter every day. The page 404 is not laid. It's not just the "tons" of the user, but it is the "black hole" that sucks the brand's reliability, and your good SEO score is unfortunately. Unfortunately, if the page 404 of your website is still like that ... I can say that you are losing a golden opportunity to change the crisis into an opportunity.

-Prompt for illustrations-

The image of the user is confused and frustrated in front of the computer screen that shows the old 404 pages without design. With a broken map icon Or the tons of the surrounding Conveys a lost feeling

Why do we meet "404 pages" and why do most of them look "not worth looking at"

Before reaching the solution We come to understand each other first that this "404 demon" appears from. The users will find this page from 3 main reasons:

• Wrong URL (Mistyped URL): It's normal that users may spell two wrong links.
• Broken link: may be a link from another website Or even a link within your own website that has been used But now that destination doesn't exist
• The page has been deleted (Deleted Page): You may have had the page or article. But has deleted or moved it by forgetting to update the old link

And why is the 404 page most abandoned? The simple answer is that it is often seen as a "slightly" or a technical matter that web people or marketers tend to overlook. They devote all the time to the creation of the main page, the product page, or the service page to forget that the "dead end" that is not designed. Is part of an important user experience (UX) as well This ignition is like a beautiful shop design. But there is a dirty bathroom and does not work

-Prompt for illustrations-

Simple infoic images showing 3 main reasons of the page 404 (icon keyboard with wrong letters, icons, trash icons), pointing to the 404 web icon.

Leave the page 404 without design ... affecting more than you think!

Having a 404 page that is not used Not just causing the user to lose feelings But it directly affects your business and SEO in the long run.

• Break the user experience (Bad UX): This is the most clear effect. It causes irritability and makes the user feel that your website is not professional.
• Increasing the return rate What he does is "press out" immediately. This signal when delivered to Google is definitely not good.
• Damages Brand Perception: Page 404 that is not designed. The media shows that you do not pay attention to the small details, which may reduce the reliability of the brand in the eyes of users.
• Lost business optunities: that user may be buying or using your service. But encountering a dead end causes him to change his mind and turn to competitors instead You may lose customers forever from this story!
• It may affect SEO: Although having a single page of 404 pages will not be ranked, but having a lot of "links" that points to the page 404 throughout the site is a sign that your website lacks maintenance. Which may affect the rankings. The creation of good data architecture (IA) is important. To reduce this problem from the beginning

-Prompt for illustrations-

The image of the downstick has the topic "the impact of the page 404" by each graph of each bar instead "User Experience", "Brand Trust", and "Conversion Rate" that has decreased.

Turning the crisis into opportunities: How to design the best 404 page (and where to start)

The good news is ... We can change the boring 404 page into a tool to treat users and easily impress! Page 404 is not necessary to use world -cutting technology. But it is a combination of "Help" and "creativity" perfectly. This is an element that every page 404 should have.

• 1. Communicate clearly and friendly: tell the user honestly what happened. (Cannot find this page) but use a friendly language and reflect the identity of the brand. Avoid technical vocabulary like "404 Error" but use a simple phrase such as "Ah! It seems like this page will be lost. "
• 2. The design and navigation of the web: Do not make the page 404 look strange from other parts of the website, should always probably keep the header and footer of the website so the user still feels on your website and can press to go to another menu.
• 3. Propose a useful way: This is the most important heart! Do not let the user find a dead end. You have to reach out to help by putting these things:
  • The link back to the main page: is something that "must have" and should make the most prominent.
  • Search Bar: Give users the opportunity to find what they want again.
  • Links to important or popular duties: such as the bestsellers, latest articles, or contact us.
• 4. Enter creativity. (If matching the brand): Use this opportunity to show the identity of the brand. May be a cute illustration, funny Gif, or a little Micro Interaction that makes users smile. Doing this can change the irritability into an impression.
• 5. Technical inspection correctly: Google Search Central 's advice, your page 404 must actually send the http status code to 404 (not found). Not 200 (OK) and "Do not" to remove every page 404 on the first page.

The beginning is very easy. Just try to go to your own website and print URL. Late at the end.

-Prompt for illustrations-

MOCKUP images, screen screens that show 404 pages that are excellent designed. There are friendly messages, search channels, have a background link, main page and recommended articles, and there are clear illustrations that are in line with the brand.

Sample 404 pages created from world -class brands.

The theory may not be obvious. Let's see the real example from the website that is famous for creativity. They changed the 404 pages to be amazing.

• Pixar: World -class animation studio uses characters. "Sadness" from the Inside Out to express my condolences for the webpage. Is the use of the brand character to create a wise mood
• Github: Platform for software developers Use the Star Wars style graphics with a great sentence "This is not the web page. You are looking for" as a target group (Geeks) at the point.
• LEOGO: Use the Lego to be confused. With the message "Don't worry about everything (Everything is a still awesome)" which is from their own soundtracks.
• Tripadvisor: Show a picture of a life jacket with a spatula in the luggage. With a message stuck. "We apologize, but we can't find your duty. Maybe this picture can help you smile. "

It can be seen that each brand is not just saying "can't find" but they use this opportunity to reinforce the identity of the brand and create a little relationship with users if you want to find more inspiration. Websites like Awwwwards have a collection of many cool 404 samples for you to study.

-Prompt for illustrations-

Collage images that combine the Screenshot of the 404 pages from famous brands mentioned (such as Pixar, Lego, Github) to show a variety of creativity.

Checklist checklist page 404 (Implementation immediately)

Ready to upgrade your page 404 yet? Try using this easy checklist to check and improve your website. Just answer these questions, "There is" or "none".

• [] Friendly text: Your 404 page clearly communicates and is friendly that you can't find it, right?
• [] Reflect the brand identity: design, color, and language used Are you still your brand?
• [] There is a search bar: Do you give users the opportunity to find what they want again?
• [] There is a link to the main page: Is there a clear button or link to return to Homepage?
• [] There are other options to continue: Do you put a link to the popular page, recommended articles, or contact us?
• [] Design, not messy: clean webpage Not packed with unnecessary information, right?
• [] Perfect mobile phone: Your 404 page shows results and works well on portable devices?
• [] Server Status Code: Is it really checking that the webpage is 404? (May need the development team to help see)

If you can tick "have" all of the congratulations! But if still lacking It is considered a good opportunity to improve the web to be more perfect. Paying attention to these little details is something that separates normal websites. With a website that provides a truly great experience good UX Structure design

-Prompt for illustrations-

Large checklist image on a light color background There is a correct/wrong icon (✓/✗) next to each item, with a hand holding a pen to prepare to tick the program. Conveys the action and inspection

Questions that people tend to wonder (FAQ) about page 404

I have compiled a common question about the 404 page to answer. I wondered here.

Q1: Is there a lot of 404 pages directly to SEO?
A: Not directly losing. Google clearly says that the existence of the page 404 is normal for the website. But the disadvantage is the "cause" that causes 404 separate, such as Broken Links from the web or from other websites. It is a sign that your website lacks a good 404 page care, so it acts like a "cushion" that helps reduce bad experiences. Of users when they click to encounter this problem And continue to keep them on your website

Q2: We should do Redirect 301, all 404 pages. Go to the first page?
A: You shouldn't do it! Doing that is called "Soft 404", which tells Google that this page has content (Status 200), but actually the content does not match the user expecting. (Because of being bounced to the first page) This is a bad experience and confusing Google. I don't like this and recommend to show the real 404 pages, ready to make the user options better.

Q3: 404 pages, is it always funny or has features?
A: It's not necessary. "Help" before "creativity" always. If your brand has a serious or formal tone, 404 pages are simple, clean and clear. Considered excellent But if that creativity matches the brand and can create a smile It will be a bonus that helps to make a difference and memorable for your website.

-Prompt for illustrations-

Large question image icon (?) In the middle, there is a letter "404" inside and there is a bright light bulb icon beside Convey the solution

Summary: Do not let the "dead end" be the "end" of the user.

At this point, I believe that everyone has already seen that the page 404 is not just "forgotten" but it is an asset that can turn errors into impressions. Change the irritability into a smile. And can change the user who is lost to a regular customer

The key is to mainly look at the user's perspective. Understand his feelings when arriving at a dead end And reaching out to help sincere by giving new routes That is useful for him to continue Investment is effective with the page 404 today, it may mean to maintain enormous value customers in the future.

Now ... it's time for you to try to go back and explore your own page 404. Try asking yourself if It is acting as a "dead end" or "bridge" that connects to new opportunities. For your business for sure?

If you find that your website needs improvements Not just 404 pages, but it is an overall experience. Expert consultation may be the best answer.

Want to change every page on your website to create an impressive experience and change the visitors into customers, right? Consult our UX/UI design team , or if your website is time to make a big look, our Website Renovation service is ready to help you create a new website that meets the business in the digital age!

‍