Master 404 Error Page Designing/Development #12hacks
Tags: javascript, css, webdev, python
Published: 2020-07-23 18:09:55

_Hello to all my community people :-) This is my 5th post and I'm thankful to everyone because I love this community. And special thanks to all my 400 followers. I'll try to provide valuable post every week..._❤️😃

---

#### I'm going to share the complete hacks regarding designing 404 page but before that understand why it's happening and what are the consequences we have to face due to this. After understanding this as a developer we can design the best 404 pages with better user experience.

###**Real-Life Scenario **

When you are at an unknown place, and you get lost there, and neither you have the map. Now, you start getting `frustrated`.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/srzirfhso4eorp5n6mdj.png)

And at the time if someone helps you to find your path. That's feeling is great, agree?

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/ijt0oap8wd5626jjtc6x.png)

404 Error Page is similar to `real-life problems` and you just have to deal it the same way as other problems.

You can take `404 Page as an opportunity` to make as welcoming, as engaging as possible to offer a variety of solutions to reduce customer frustration and let them stay on the site/app much longer.

---

###**Default 404 Error Page**
If you don't take 404 Page seriously, not giving that much importance as another page then you have to face consequences.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/9arhdc6odp77hbkk4ssb.png)

---

###**Bad News**
As research concluded, `74% of customers` leave the site after they face a 404-error page. 

---

###**Good News**
Only `23% of visitors` that encounter a 404 page make a second attempt to find the missing page. 


###**Understanding of Error**
To create a best 404 page, you have to understand:

1. The `type` of 404 error
2. Who `causes` this error?

---

###**Type of 404 Error**

1. Error 404 | HTTP 404
2. 404 File Not Found
3. The page cannot be found
4. The requested URL not found on this server
5. HTTP 404 Not Found | 404 Page Not Found

---

###**Who causes this error?**
Either it's come from the `user side` or it's from the `website side`. Right?


![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/jqbqh0sysx0dih1r6673.png)

If the error is from the user side then they typed the link incorrectly. You can't control what person type into their keyboard.

---

###**Simple Categorization of Error**
Simple we can categorize 404 Errors in 3 Simple Parts:

1. Page is deleted
2. User Type wrong URL
3. The link does not exist now

---

###**Diagrammatic View: 404 Consequences**

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/wl4lhs34wzxrqr5oe55p.png)

---
####_But we have to understand that "`Mistakes are a part of our lives`"_

Now, after understanding what's 404 is all about. Start designing it with proper hacks.

---

`Hack 1: Maintaining brand consistency`

Always maintain consistency with your fonts, themes, logo, header, footer like other pages. So, that you'll find this 
a page similar to others.

![website design](https://dev-to-uploads.s3.amazonaws.com/i/d37h5htpz4e234hw9e9t.png)

####_Real website example:_
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/rkwnx89w5v1ykg2rgzdq.png)

---

`Hack 2: Provide Navigation`

Provide navigation on the 404 page so that users can navigate from that page to another page while remaining on your site. 

![css](https://dev-to-uploads.s3.amazonaws.com/i/gx6q1q9b11cagfj5y7c2.png)

####_Real website example:_

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/ck0v9luu3uop7fliq2cm.png)

---

`Hack 3: Provide Search box`

By providing a search box, you can easily navigate from the 404 page to any other page. It'll give the opportunity to the user to type.

![git](https://dev-to-uploads.s3.amazonaws.com/i/n5qwixfvxwf5m5jccqg7.png)

####_Real website example:_
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/j39w8oio0nws0xj49rn5.png)

---

`Hack 4: Showing emotions`

You can provide emotions to your 404-page design so that it'll look more original and realistic like "oops", "Ohh", "Awhhk", "Hmmm". Here your main goal is to target people's emotions.

![development](https://dev-to-uploads.s3.amazonaws.com/i/zim32eebiufdra4u7v8n.png)

####_Real website example:_

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/ivw0uibwcj1myuu2t1jf.png)

---

`Hack 5: Be Apologetic`

The more important part of designing a 404 page always shows an apology, even if it's user fault. The main goal of apology is that you are showing your user that you really value them. 

![javascript](https://dev-to-uploads.s3.amazonaws.com/i/rg6vyeg9wbp58ezy4t88.png)

####_Real website example:_
![product](https://dev-to-uploads.s3.amazonaws.com/i/dx9r1cozktw46q28ko2h.png)

---

`Hack 6: Keep your error message simple`

Don't' show scary text and image here. Always provide a simple and clear message to your user. "Minimalism is best for any design". Plain language helps every user to understand why they are getting this 404 error page.

![react](https://dev-to-uploads.s3.amazonaws.com/i/gnmrjxza1fwy3jooqjst.png)

####_Real website example:_
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/iuv3hiefdj2kfagc9gqt.png)

---

`Hack 7: Add useful links only`

Add a popular page of your website or any other important links on your 404 Page. Don't try to overload your 404 Page with too many links.

![html](https://dev-to-uploads.s3.amazonaws.com/i/8kmbqg94decwd1art393.png)

####_Real website example:_
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/41x3kxdh0web6ui2045s.png)

---

`Hack 8: Give Homepage Link [CTA]`

Adding the home page button is important to add to your 404 page so that users come back to the main page because they are lost. So, you've to guide them and bring them back.


![resources](https://dev-to-uploads.s3.amazonaws.com/i/us4l5gqiicz2jybyg2l5.png)

####_Real website example:_
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/ylfadau6mvj2r0tm4fgy.png)

---

`Hack 9: Add a bit of fun by adding Image | Animation | Illustration`

You can use illustration/images/illustration, images related to your theme or product by combining 404 in mind.

![coding](https://dev-to-uploads.s3.amazonaws.com/i/m1a9nytbfnib3tlw9job.png)

####_Real website example:_
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/2hizfsl9ascqu5ss4jao.png)

---

`Hack 10: Show Popular Posts`
Adding a popular page on your 404 page provide varieties to the users to maintain their interest.

![programming](https://dev-to-uploads.s3.amazonaws.com/i/7xu6tk7vxb6nu74ovwfz.png)

####_Real website example:_
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/ljcih3fh3ujmm6d7vdwy.png)

---

`Hack 11: Use of interactivity`

Providing interactivity like adding games, quizzes, drawing, etc so that users can interact with your 404 page and don't feel bore while seeing it.

![website development](https://dev-to-uploads.s3.amazonaws.com/i/53zr079meot24etvnv9b.png)

####_Real website example:_
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/bh32g8kqtdsk7oxrp1gr.png)

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/k40copea8mp53wkd5b6h.png)

---

`Hack 12: Show matching results`

This trick is also helpful as if your user did a mistake by typing `ountain` then you can show other results matching with the term that the user wrote. It'll also give varieties to users to explore.

![developersd](https://dev-to-uploads.s3.amazonaws.com/i/flqqii6bbjtwqooxx4ps.png)

####_Real website example:_
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/fchocfrj1l3u9xm2aeeq.png)

---

####_It doesn't mean include all these elements on one page. The designer can make the decision base upon the requirement/priority."_

---

####404 Error Page Design : Don'ts Checklist

`1.` Not treating the same way as other website pages.
`2.` Blaming users that it's their mistake.
`3.` Not giving enough information about the error.
`4.` Not telling how to recover from the error.
`5.` Overloading the page with many links
`6.` Using the server's language for telling errors not user's language

####404 Error Page Design : Do's Checklist

`1.` Maintaining brand consistency
`2.` Provide Navigation
`3.` Keep your error message simple
`4.` Show matching results
`5.` Provide a Search box 
`6.` Give Homepage Link [CTA] 
`7.` Be Apologetic
`8.` Show Popular Posts
`9.` Add useful links only
`10.` Add a bit of fun by adding Image | Animation | Illustration
`11.` Showing emotions
`12.` Use of interactivity

---

####If you love this post, please give a like to boost my confidence to write more posts for this community. I'm also sharing a short microblog on my Instagram page also.

If you have doubts regarding development or UI/UX Design. Please feel free to connect with me on: ❤️😃
[Instagram Page](www.instagram.com/designer.akash)
[Linkedin](www.linkedin.com/in/akash1296) 

Regards
`Akash`