Refine By


  • Contents:
  • Error messages inform the user about a failure in a transaction.
  • Errors are generally caused by invalid data inputs from the user, or when content fails to load.
  • They appear when a transaction is stalled and disappear once a remedial action is taken.

Form Validation Errors


  • Form field errors typically appear when the user submits invalid information in a form field or fails to provide input for a field that requires one.
  • Minimize errors by designing forms to be context aware:
    • Disable the submit button for a form when in-line validation fails for a field after a user interacts with it.
    • Use the correct keyboard on mobile for the right data entry format.
  • Use in-line validation to give the user feedback in real time and help them catch errors before submitting their responses.
  • Include helper text for entry fields such as passwords and email addresses, where there are very specific validation rules.
  • Make password validation rules interactive so the user gets real-time validation as they type.
  • The most common error scenarios for forms are:
    • Wrong data formatting for specialized fields like passwords, email addresses, or phone numbers
    • Not checking a required selector such as a checkbox or radio button
    • Leaving a required entry field blank
  • For errors detected after form submission, position a general error message at the top of the view in addition to highlighting the offending fields with their pertinent error messages.
  • Preserve as much user-entered input as possible to save the user hassle of re-entering inputs for those fields that were correctly validated.

General Usage Errors


  • Usage errors typically occur as a result of user input or interaction with interface elements.
  • Communicate the error clearly, and let the user know how to fix it.

Connectivity Errors


  • These typically occur when content fails to load due to a disruption in connectivity.
  • Provide an empty state that conveys the failure instead of perpetually showing an activity indicator, such as a loading spinner.
  • Provide directions the user could take to remedy the situation. Be sure to only offer links that you can actually support.



Do not visually hide alert messages on the page and then make them visible when they are needed. Users of older assistive technologies may still be able to perceive the alert messages even if they are not currently applicable.

As you use and customize this element, ensure it continues to follow the Accessibility 101 guidelines.

See Also


Version History

Date/Time of ChangeWho Made the ChangeChange Details
May. 08 2017 5:43pm Initial content entry