When you are viewing web pages or playing games on a site, you may come across the situation where the page you click on cannot be found (a.k.a 404 page) 404Lab did a statistics research asking people about their experience, “what would you respond when you see the 404 page?” of which 39.88% people just lost it and started wailing, 36.92% people would go back to the previous page and forget about the 404 page. This piece of data is quite interesting and it reflects the “bad feeling or experience” that 404 page causes.
The purpose of 404 page is to let the users know that the web page requested might have the following problems: current page link is invalid, the page has been deleted or the user keyed in the wrong website. During the process of website design, most websites generally adopted the default standard 404 page. They neglected the fact that 404 page could be redesigned and that the visual and information contained in 404 page is not sufficient for users to execute the next step.
In fact, 404 page could be re-designed and improved. Through intuitive, creative way, the page could guide the user to resolve the problem. A good 404 page can help users to find the right information or provide other alternatives. It reduces users’ sense of loss or distrust occurred when they’re unable to find the right page, and encourage users to explore other contents in the website.
Here we gathered a few directions for 404 page design. We emphasize on the “interaction between users and the website, and seek to provide users with accurate information and suggest possible solutions.” Please see the following pointers:
1. Make the users feel familiar with the page
Every web page contained in the same website should remain consistency in terms of visual effect, website logo etc, so the users can easily identify whether they are still viewing under the same website. Which is why 404 page should also maintain consistent visual and logo information. When the users see the same familiar colors, visual layout or logo, they will feel a sense of reassurance and subsequently lower the chances of closing the webpage.
– larknews： they use a humorous and witty way of explaining why you end up on this page in an attempt to lower your anger. But larknews’ 404 page has no color, nor any visual icons or logo, people may think they’ve opened some other entertainment window.
– Spore： their 404 page shows the originality and uniqueness that reflects their games. The digits “404” consists of the creatures designed by Spore, hinting at you that you’ve entered the 404 zone and it’s be to leave now! 
2. Clearly stated error information
When users are linked to 404 page, they should be able to see the error information clearly. Clearly stated the error information is not a way to scare off the users, but telling them the problems they’re currently running into. Do not let the users think they’re at fault, instead, assist them to engage in the next step.
– Rockettheme：they use bright color and huge font to let the users realize that they’ve entered 404 page and concisely stated the current situation.
– abduzeedo：adopted “Lost in Space” as theme, abduzeedo combines the vivid visual presentation and effect with humorous catch phrase, “Houston, we have a problem! We can’t find the page you are looking for L”
– 31three：the visual presentation consists of too many butterflies that can easily confuse the users. It fails to deliver the message and let the users know they’ve entered 404 page.
3. Provide Alternatives
Providing comprehensive alternatives is one of the important messages that should be conveyed in 404 page design. It guides the user to their next step, helps clearly out the “doubt” or “confusion.” There are many alternatives that could be included into 404 page, the most common ones are listed below:
● Provide main menu, search function so the users can swiftly and accurately link to other pages.
● Recommend other web pages: recommend some of the popular pages on the website, attracting users to click on other information.
● Provide customer service email or complaint form: it can help to ease users’ strong emotions and obtain information from their end to prevent it from happening again.
– Pop Cap：it adopted a bulletin visual design to provide other alternatives for the users and guide them to find solutions. 
youcastr：provide 3 alternatives: search keywords, go back to the previous page or main page or contact customer service. 
4. Provide right amount of alternatives
We’ve covered the items to be included in 404 in previous point, but exactly how many we should provide is kind of tricky. If you have too many, the users don’t know what to choose from; but if you provide too little, they may fail to provide any actual help the users need.
– inspirationbit：provide users with too many alternatives, the focus is easily lost.
– Dailymotion cloud：only informs the users that they’ve entered 404 page, but does not provide any other alternatives.
5. User-friendly page design
Adding creativity to your 404 page design is a great idea, but too much creativity may not be of any help to users and may even cause some negative effects. We need a balance point between creativity and practicality. Perhaps, a simple, clear 404 page that enables the users to find alternatives and getting out of the 404 mess promptly would do the trick.
– Acme：they wish to present the predicament that happens during computer shutdown, but the blue background and white font may easily mislead users into believing their computers really crash and thus causing users to restart their computers.
404 page should not be a over-simplified page that shows the errors. It should be a well-thought, creative and concise design that helps guide the users to find their next step (and to reduce the amount of wailing caused by it)
Reference and Resources:
Design Guidelines:404 error pages：http://www.michaelgaigg.com/blog/2009/03/09/design-guidelines-404-error-pages/
404 Research Lab：http://queenofsubtle.com/404/
200 best 404 error page design for inspiration：http://www.webdesignshock.com/404-error-page-designs/
————-
About Author
Gamania UI Designer Center / Michellecy Lin
Adopting a User-Center Design approach, the Center seeks to improve upon Group initiated projects to promote Gamania self-produced products and give the players the best user experience.
————–