Page messages give users helpful information, such as alerts, warnings, and tips, without completely stopping them from completing the task they’re doing.

Usage

There are six types of page-level messages with four colors. Here’s some guidance on which one to use when.

  • Critical alert (this appears with red glyph): Display this message to warn of situations with serious consequences unless action is taken. Examples include: loss of data, loss of access to data.
  • Alert (amber): Display this message when our system isn’t working because of connection errors, timeouts, and so forth. We also use this pattern when the user did something we need to tell them about.
  • Warning (amber): Display this message when the user does something the system can’t handle.
  • Information (blue): Display this message when the user completes an action or flow.
  • Discovery (blue): Display this message to let users know about an upcoming action that QuickBooks might take or to let users know about a next step they might want or need to take.
  • Module not available (gray): Display these messages when users are not seeing the financial data visualization or other information that should usually appear. If the dashboard can’t display some module, this is the message that appears there instead.

Appearance and behavior

If you need to display more than one message on a page, you can stack them vertically and combine them with other message types.

Depending on the content, users may be able to dismiss the message. Some messages might not require any action, so users don’t need to act on or close them.

Content guidelines: Using page-level messages for errors and alerts

Error and alert messages usually fit into one of these page-level messages patterns. We designed these messages specifically to let users know something is not exactly right and what they can do about it.

Form-field validation errors (such as “Enter a valid email address”) are a bit different. Find out more about form-field errors

Page-level messages 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.
      Recommended voice and tone attribute: straightforward
      Examples:

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

 

    1. 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 usually want to keep these messages brief, so more information is optional, and it’s ideal if we don’t have to include it.
      Recommended voice and tone attribute: straightforward
      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.

 

  1. Call to action:
    Tell users what to do next to solve the problem. If the user can’t fix the problem themselves, let them know what next step they should take (such as trying again later or contacting help).
    Recommended voice and tone attributes: straightforward, experienced, encouraging, optimistic
    Examples:

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

Examples

Chart of accounts

 

Informational: New feature announcement

 

Launch Preview
x
px wide

  • Was this Helpful?
  •