Skip to content

Patterns-Errors

Errors occur when an app fails to complete an expected action. Some examples of errors include:

  • When user input is not understood.
  • An app failing to load.
  • Incompatible operations are run concurrently.

Types of errors

  • User input errors.
  • App errors.
  • Incompatible state errors.

Specific error patterns

  • Forms
  • General usage errors
  • Sync errors
  • Connectivity
  • Permissions

Usage

Help users fix input errors as soon as they are detected. Disable the submission of a form if errors are detected, and if detected only after form submission, clearly explain the error and how to fix it.

User Input Errors

Text field input

  • Helper text may be included before, during, or after a user interacts with each field on a form.
  • Show error text only after user interaction with a field. If the user inputs incorrect data, helper text may transform into error text.
  • Minimize form text to the essentials. Not every text field needs helper and/or error text.

Specification:

Place 16dp of vertical space between text fields and below the error text.

Form submission

The Submit button should be enabled by default. If you are performing inline form validation, and the field with the error is clearly marked, the submit button may be disabled until the error is corrected.

Color

Error text should reflect your product’s color palette. It’s recommended that you use a contrasting color for error states, such as a warmer hue like red or orange.

To see color for error rtext , Helper and error text & Error with floating text label,Click Here.

Text field input - Over/under character or word count

A character counter may be displayed before, during, and after user interaction with a field. Consider not displaying the counter until the user approaches the character limit.

  • Counter font is Roboto Regular 12sp.
  • Counter fields have 16dp of additional bottom padding.

To refer specs & suggestions for various types of character counters Click Here.

Incompatible values

Show errors for incompatible values during or after a user interacts with a text field. If two or more fields have incompatible inputs:

  • In the text field, indicate a fix is needed. Add an error message below.
  • Display a message at the top of the form, or screen, summarizing the fixes needed and any additional explanation.

Errors detected upon form submission

  • Reload the form with consolidated error messages and scroll position at the top.
  • Error messages for individual fields may be resolved as the user works through the form.

Incomplete form

  • Empty form fields should be indicated by both the text field and error message below.
  • Display incomplete form errors to indicate a user has skipped a field after they have advanced through a form.
  • If unable to detect user progress through the form, display an error after the user has attempted to submit the form.

Multiple errors before form submission

Individually label error messages as the user works through the form.

App errors

App errors occur independent of user input.

  1. General app error:
    2. When an error occurs, an app should display loading indicators until the error message appears.
  2. Sync error/failure to load:
    3. When sync is down or content has failed to load, the user should be able to interact with as much of the rest of the app as possible.
  3. Connectivity:
    4. When connectivity is down, the user should be able to interact with as much of the rest of the app as possible.

Incompatible state errors

  • Incompatible state errors occur when users attempt to run operations that conflict, such as making a call while in airplane mode or taking a screenshot from a restricted work account.
  • Help prevent users from putting themselves into these situations by clearly communicating the states they are selecting and the implications for the rest of their experience.
  • When these errors are triggered, do not imply that they are the user’s fault.

General incompatibility

Clarify the reason for and origination of the error.

For example, screenshots and premium features are not allowed while in a restricted mode.

Offline by choice

Display an persistent indicator that attract attentions when users are offline but try to do tasks that require being online.

Examples ;

  • Placing a call while in airplane mode.
  • Music availability while offline.

Permission requested

If your app requires user permission before proceeding with an action, include the permission request in the app flow instead of treating it as an error.