404 pages

(Standard 404 Pages are dead-ends for users. By customizing a 404 page, a website can re-engage users.)
m (Standard 404 Pages are dead-ends for users. By customizing a 404 page, a website can re-engage users.)
Line 3: Line 3:
=== What Problem This Solves  ===
=== What Problem This Solves  ===
-
Standard 404 Pages are dead-ends for users. By customizing a 404 page, a website can re-engage users.<br>  
+
Standard 404 Pages are dead-ends for users. By customizing a 404 page, a website can re-engage users and greatly reduce site abandonment.<br>  
 +
=== When to Use This Pattern  ===
 +
'''Existing websites:'''&nbsp;Use this pattern when you are undergoing any type of content review (formal or informal).
-
=== When to Use This Pattern  ===
+
'''New websites:'''&nbsp;Custom 404 pages should be part of the content deliverables for site launch.&nbsp;
-
Existing websites:&nbsp;Use this pattern when you are undergoing any type of content review (formal or informal).  
+
'''Tip:'''&nbsp;To quickly find a 404 page, enter websitename.com/404
-
New websites: Custom 404 pages should be part of the content deliverables for site launch.&nbsp;
 
-
To quickly find a 404 page, enter websitename.com/404
 
=== What's The Solution?  ===
=== What's The Solution?  ===
Line 19: Line 19:
Effective 404 Pages accomplish the following:  
Effective 404 Pages accomplish the following:  
-
- Communicate/reinforce a brand's voice  
+
*Communicate/reinforce a brand's voice  
 +
*Redirect users to meaningful site content
 +
*Reinforce a site's primary call-to-action
 +
*Give users the ability to contact the company directly (if relevant)
 +
*Include the top navigational menu to give users a map back to familiar territory
 +
*Do not blame the user for making a mistake
-
- Redirect users to meaningful site content
 
-
- Reinforce a site's primary call-to-action
 
-
 
-
- Give users the ability to contact the company directly (if relevant)
 
-
 
-
- Include the top navigational menu to give users a map back to familiar territory
 
-
 
-
- Do not blame the user for making a mistake
 
-
 
-
<br>
 
=== Why Use This Pattern  ===
=== Why Use This Pattern  ===
-
Effective 404 pages can greatly reduce site abandonment.
+
Effective 404 pages can greatly reduce site abandonment.  
=== References  ===
=== References  ===
-
#To come
+
#To come (Be wary of many of the "great 404 pages!" sites out there. Many are design-heavy with little to no usefulness. See Project Fedena example below.
===  ===
===  ===
Line 49: Line 44:
Grade: A+  
Grade: A+  
-
[[Image:Emma 404.jpg]]  
+
[[Image:Emma_404.jpg|thumb|left]]<br>
<br>  
<br>  
 +
 +
 +
 +
'''SAP 404 Page'''  
'''SAP 404 Page'''  
Line 57: Line 56:
Grade: C  
Grade: C  
-
[[Image:Sap 404-mediocre 404 page.jpg]]<br>  
+
[[Image:Sap_404-mediocre_404_page.jpg|thumb|left]]<br>  
<br>  
<br>  
 +
 +
 +
 +
 +
'''Project Fedena'''  
'''Project Fedena'''  
Line 65: Line 69:
Grade: D (Well-designed. Not at all useful.)<br>  
Grade: D (Well-designed. Not at all useful.)<br>  
-
[[Image:Project fedena 404-not useful.jpg]]  
+
[[Image:Project_fedena_404-not_useful.jpg|thumb|left]]<br>
-
'''Bonnier Corporation 404 Page''' (Publishers of Popular Science, Spa and Saveur, among others)  
+
 
 +
 
 +
 
 +
 
 +
 
 +
'''Bonnier Corporation 404 Page'''  
 +
 
 +
(Publishers of Popular Science, Spa and Saveur, among others)  
Grade: F  
Grade: F  
-
[[Image:Bonniercorp 404-awful 404.jpg]]<br>
+
<br>
 +
 
 +
[[Image:Bonniercorp_404-awful_404.jpg|thumb|left]]
 +
 
 +
===  ===
 +
 
 +
===  ===
=== Categories  ===
=== Categories  ===
-
<br>
+
Editorial Patterns

Revision as of 15:59, 4 February 2011