Errors happen. When we need to let users know about them, we present straightforward messages that let users know what happened and what they can do about it. Here’s how we present errors in forms and anywhere else in the experience.

Errors in forms

What went wrongWhen the message appearsPatterns to useExamples
The user entered something that doesn’t meet the requirements of the field or form (example: letters in a numeric field).The user stops typing in the input field.Form-field error: real-time field error validation; a tooltip Please use a valid phone number.
 
That address doesn’t quite work. Please try again.
 
The user skipped a required field.The user clicks or tabs away from the field or control.Form-field error: real-time field error validation; inline message + page-level messageRemember to fill this in.
 
Looks like some information is missing. Check the form and try again.
 
The system detected an error in form data.The user sends or submits the form.Form-field error: server-side field error validation + (optional) page-level message This information doesn’t quite work. Please try again.
 
Something’s not quite right.
Check the form and try again.
 
Some aspect of a transaction failed (example: an email bounced.)The system detects the error.
 
Page-level message
 
We can’t connect to your bank right now.
You can try again, or come back later and try connecting then.  

Errors anywhere in the experience

What went wrongWhen the message appearsPatterns to useExamples
The user didn’t complete a critical next step, and we can easily provide links to complete the task.The system detects the error (the missing action or data).
 
 
 
Modals
 
 
 
 
Your work will be lost if you leave this page.
[Cancel] [Continue]

A number so nice, you used it twice.
There’s already an invoice [docnumber]. You can use it again, but it resets your invoice numbers (starting from [docnumber]).
Do you still want to use this invoice number?
[Use the number] [Enter a new number]

Some aspect of a transaction failed (example: an email bounced.)The system detects the error.
 
Page-level message
 

Connect your account
Something happened and we couldn’t connect to your bank.
Please try again.
Something important happened.The system detects a critical error.Page-level message: critical alert Something’s not right.
We’re working to get things back to normal.
Give us a few minutes to fix it, and try again.
The system couldn’t make a connection or took too long to make one. Or the user did something we need to tell them about.The system detects the error.Page-level message: alertConnect your account
Some sign-in info didn’t work.
Sign in to your bank and check your info. Then come back and try connecting again.
The user did something the system can’t handle.The system detects the error.
 
Page-level message: warning Let’s try that again.
Double check your info to make sure we get it right.

A project already uses this name.
Enter a new name for the project.

This payment doesn’t have an open invoice to go with it.
We’ll save it as a customer credit. If you want to record it without an invoice, use a sales receipt.

We need to guide users to next steps they can take.The user completes an action or flow.
 
Page-level message: information
 
Need help with your chart of accounts? An accountant can help you out. Invite yours or find one.

If you turn off the “track quantity and price” setting, you won’t be able to track inventory.
 

QuickBooks might take some action. Or the user might want to take some next step.The system detects the error, or it’s helpful to show users additional information.Page-level message: discovery
 
 
You just entered your first customer. Now you can send them an invoice or add another customer.
The system can’t display data because of a connection or other error.The system can’t display a certain module.Page-level message: module not availableThis information will appear here when it’s ready. Please check for it later.
Two or more errors exist.These global errors persist until the user acts on them.Stacked page messagesOne of your payments doesn’t have an open invoice to go with it.
We’ll save it as a customer credit. If you want to record it without an invoice, use a sales receipt.

Need help with your chart of accounts? An accountant can help you out. Invite yours or find one.

User tries to go to a page that doesn’t exist.The user tries to reach a missing page.404 error page
 
Something’s not adding up.
Let’s go to a page where the numbers make sense. Try again.

Content guidelines for error messages

Keep it simple. Error messages usually consist of three things:

  1. Error or alert definition:
    Tell users what happened. Be honest and let users know what the system did, what they did, or what they’re about to do.

    If you have any information about the error, let users know. Don’t just say “Something’s not right” when you know more about what really happened.

    Examples:

    • Something’s not right.
    • We couldn’t connect to your bank.
  2.  

  3. More information (optional):
    If we have information that doesn’t fit in the error or alert definition or call to action, we can include an additional sentence. We want to keep error messages brief, so more information is optional, and it’s great if we don’t have to include it.

    Examples:

    • This is a new feature we’re trying out, and it might not always work.
    • The password on your bank account might have changed.

     

  4. Call to action:
    Tell users what to do next to solve the problem. If the user can’t fix the problem, let them know what next step they should take (such as trying again later or contacting help).

    Examples:

    • Try again later.
    • Check your password and sign in again.

Putting the example elements together, we get these sample error messages:

  • Something’s not right. This is a new feature we’re trying out, and it might not always work. Try again later.
  • We couldn’t connect to your bank. The password on your bank account might have changed. Check your password and sign in again.
  • Was this Helpful?
  •