Page Level Errors
Last updated: October 8, 2015 at 14:07 pm

Content of page-level errors (including "404: File Not Found") where page loading itself has failed for one reason or another.


Visual example of the element:


What problem does this element or pattern solve?
Often overlooked in style guides, page level errors occur more frequently than many of us would like. But savvy UX professionals know that a clever “404” or other system error page can turn a potential negative into a brand-building experience. In your UX Style Framework, provide options to address these opportunities.
It applies to these platforms:

Desktop Web, Tablet Web, Smartphone Web

An example of this element or pattern in production:


Detailed specifications

Specifications To Consider

  • Define the “voice” which should be communicated by the error page. Your branding and marketing team will help your owners with this positioning and content. Will your page be humorous? Helpful? Apologetic?
  • Will your error pages include your standard global header and/or footer?
  • Many sites find it helpful to present open text search functionality. This will permit the user to enter new search terms to locate their desired page. Will that box be pre-populated with terms taken from the user’s browsing history?
  • As in all error messages, avoid using negative wording or phrases. Encourage the user to stay on your site and use alternative navigation options to find the content they need.


Location of assets to build this element or pattern
Location of UX or visual design assets
Location of development code repository


Additional details
Information on research, user testing, or usability reports:

Not Applicable (Remember: no field should be blank!)

This element or pattern may also be known as:
404, not found, 403, forbidden, 401, unauthorized, 408, timeout, page load error, error screen, down for maintenance, unable to load, over capacity, server load, overloaded, file not found, bad url, broken link
Related elements within this Style Framework:

Not Applicable (Remember: no field should be blank!)



Owners and governance
UX or design 0wner
John Designowner
Email: design.owner@yourcompany.com
Business or marketing owner
Mary Businessowner
Email: business.owner@yourcompany.com
Development owner
Mike Devowner
Email: development.owner@yourcompany.com


Other information
Please include any other relevant information about this element or pattern:
Not Applicable (Remember: no field should be blank!)


Comments & Questions

Leave a Reply