In a perfect world, web pages would never break and your site’s visitors would never end up on the so-called 404 Error page. If one have ever found themselves  on a 404 Error page this is either because they have directly typed a wrong URL into the address bar or simply because they’ve clicked on an outdated/ broken link.

On a non user-friendly website the 404 page usually looks like the screenshot below: a browser’s built-in CSS-free page that briefly explains to the user what the problem is. Could be better, right?

html 404 error page

While it is easy for the webmaster to track and correct all the broken URLs of a website that return an error page it is also still important to make sure that a well-designed and optimised 404 page is in place in order to help visitors find what they are looking for in the event that they land on a this error page because of a mistyped URL.

A user-friendly404 error page should include the following:

  • A brief explanation. Include a few lines explaining the possible reasons why the user may not have found the requested page.
  • A search box. The visitor was clearly looking for something and a seach box will allow them to make a quick search and send them back to the right direction.
  • A navigation section. Keep it simple but it is also a good practice to include the website’s top navigation section so that the user can keep browing the site without having to hit the go back button.
  • A Link to the home page. Allow the user to start the search from scratch.
  • A minimalist look. Don’t overload the page with all the website’s standard navigation structure in order to remove distractions and confusions.
  • Some fun. Be creative, fun and prevent your visitor to be frustrated.

We have selected below 15 examples of 404 Error pages we like. You would notice that some of them don’t include all the six rules that make an error page user-friendly as mentioned above but they all have one thing in common: they are fun and creative!

1- Matt Northam

- www_wphub_com_500-creative-404-error-pages

2- Kevin Michael Smith

404 Page — Kevin Michael Smith' - kevinmsmith_org_404

3- 501st

404 Page Not Found' - www_501st_com_404

4- Blizzard Entertainment

'Blizzard Entertainment - Error!'

5- CSS Scoop

css scoop

6- Dropbox

'Dropbox - 404' - www_getdropbox_com_404

7- Annual Design Awards

Error I Annual Design Awards' - www_annualdesignawards_com_banana

8- The Web Motel

'ERROR!' - thewebmotel_com_404

9- Limpfish

ile not found' - www_limpfish_com_notfound_html

10- Jibjab

JibJab - 404 File Not Found' - sendables_jibjab_com_404

11- Home Star Runner

Oops! You bwoke it_' - www_homestarrunner_com_404

12- Blue Fountain Media

Pacman 404 Page I Blue Fountain Media' - www_bluefountainmedia_com_404

13- Mint

www_mint_com_404_html

14- Urban Pill

www_wphub_com_500-creative-404-error-pages

15- CSS Tricks

'You've ripped a hole in the fabric of the internet_ Love, Chris from CSS-Tricks' -

Did you like this list of 404s? With all the great desings out there we are sure you have some great examples to feature. Feel free to drop a line in the comment box and share your ideas with us.

Enhanced by Zemanta