To help us communicate with users effectively, we display page-level messages in four different colors. We select the color treatment based on the type of message it is and how critical it is.
Blue for information and discovery: Use the blue treatment to let users know about an upcoming action QuickBooks might take or a next step that they themselves might need to take. We can also use this message type to tell users about an aspect of the product, such as a specific action or flow, that might be helpful.
Green for success: Display this message when the user completes an action or flow.
Amber for warning or alert: Display this message when the user does something the system can’t handle or when the system isn’t working because of connection errors, timeouts, and so forth. We also use this pattern when the user does something we need to tell them about.
Red for critical: Display this message to warn users to take action to avoid serious consequences, such as a loss of data, loss of access to data, or loss of income.
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. See the “Stacked page messages” section on this page.
Depending on the content, users may be able to dismiss the message. Some messages, like confirmation messages, might not require any action, so users don’t need to act on or close them.
Content guidelines for page messages
Page messages consist of three elements:
2. More information
3. Call to action
Here’s what that looks like for each message type.
Blue for information and discovery
Definition: Tell the user about an action they might take, an action QuickBooks might take, or a feature or functionality that might be helpful. Keep the copy informational, not promotional.
Example: You can see how your business is doing in a profit and loss report.
More information: If needed, give the user more details. This additional info is optional.
Example: This report shows how much money you’re making and how much you’re paying out.
Call to action: This might be a text link.
Example: View your reports
Green for success
Definition: This confirmation message tells the user the action they just completed was successful. We have guidelines that discourage the use of passive voice sentences, but passive constructions can work in these messages because they keep the focus on the thing the user just did. We can also choose to set key information in bold to make the message easy to scan.
Example: Invoice 1702 was sent.
More information: If needed, give the user more details. This optional copy guides the user to next steps that might be helpful.
Example: You can return to Invoice to create and send another one.
Call to action: This might be a text link, or the X icon in the box that indicates that the user can close the message. Some success messages have no call to action. Instead, they disappear in 3 to 5 seconds.
Example: Go to Invoices
Amber for warning or alert
Definition: This is a mild error or notice message. Display it when the user does something the system can’t handle or when the system fails. We also show this when the user does something we should tell them about.
Example: We’re having trouble connecting to your bank.
More information: If needed, give the user more details. In an error message, we might want to explain why there’s a problem.
Example: This is a temporary problem and we’re working on it.
Call to action: This might be a text link.
Example: Try to connect again
Red for critical
Definition: This is a serious error message. Tell users what happened. Be honest and let users know what the system did, what they did, or what they’re about to do.
Example: We weren’t able to send invoice 1702.
More information: If we have information that doesn’t fit in the error definition or call to action, we can include an additional sentence. We want to keep these messages brief, so more information is optional, and it’s ideal if we don’t have to include it.
Example: We probably lost our connection when we were trying to send it.
Call to action: This might be a text link, and it should guide users to what they need to do right now.
Example: Try again
Stacked page messages
If you need to display more than one message on a page, stack them vertically and combine them with other message types.
Stack them in order of importance.
Here is the priority order of these messages:
1. Red for critical errors
2. Amber for warning
3. Green for success
4. Blue for information and discovery