Feedback and Errors

Feedback and error messages will interrupt a user's task and draw their attention to an important contextual or actionable message. First, decide what type of feedback you are trying to communicate, then decide which component or pattern to use to communicate it.

Information Feedback

This type of feedback provides helpful information that the user does not need to act on. Information feedback functions similarly to words in parentheses. The experience should feel complete without this information, but it should still enrich the user's understanding in some way.

Visual Treatments for Information Feedback

Information - Page Level

If it is system-level information that does not directly impact the user's current action on the page:

use the Information - Page Level variant of the notification component
allow the notification to be dismissed if necessary

Information - Inline

If it is information that directly impacts the user's current action on the page:

use the Information - Page Level variant of the notification component for information that clarifies two or more parts of the page
- allow the notification to be dismissed if necessary
use the Information - Inline variant of the notification component for information that clarifies a single part of the page
- place the inline notification close to the part of the page that it clarifies

If it is information related to a page-level action the user just completed, consider using the modal pattern.

NOTE: If it is information related to a page-level action the user just completed, consider using the Modal pattern.

Writing Information Feedback

Information feedback is descriptive by definition and will usually not include an action.

Lead with a description of the potential future problem.

Example:
You must have enough money in your available balance to cover this transfer when we attempt it on Thu Apr 23 2020, or the money will not be moved from the account.

Use active voice and words like "you" and "your" to direct the user to any actions.

Example:
We aren't able to confirm this mailing address in our system. You can try again later or continue to address this without confirming it.

Repeat nouns and verbs from the main interface so the user can clearly relate the warning to the action on the page.

Example:
Any changes you make to this payee will affect all pending, scheduled and future payments.

Don't

Lead with contextual information.

Example:
We will attempt this transfer on Thu Apr 23 2020. The money will not be moved from your account if you do not have enough funds in your available balance.

Use passive voice or ambiguous language.

Example:
Unable to confirm address.

Use generic of unspecific terms.

Example:
Updating this record may disrupt your transactions.

Warning Feedback

This type of feedback provides information that the user does not need to act on immediately, but may need to consider to avoid a problem at some point in the future. Unlike error messages, warning feedback does not block the user from completing their current action.

Visual Treatement for Warning Feedback

Warning - Page Level

If it is a system-level warning that does not directly impact the user's current action on the page:

use the Warning - Page Level variant of the notification component
allow the notification to be dismissed if necessary

If it is a warning that directly impacts the user's current action on the page:

use the Warning - Page Level variant of the notification for a warning about two or more parts of the page
- allow the notification to be dismissed if necessary

Warning - Inline

use the Warning - Inline variant of the notification component for a warning about a single part of the page
- place the inline notification close to the part of the page that needs a warning

NOTE: If the warning does not block the action but requires confirmation to proceed, use the confirmation modal pattern.

Writing Warning Feedback

Warning feedback should focus on helping the user understand the future problem and how to avoid it.

Lead with a description of the potential future problem.

Example:
You must have enough money in your available balance to cover this transfer when we attempt it on Thu Apr 23 2020, or the money will not be moved from the account.

Use active voice and words like "you" and "your" to direct the user to any actions.

Example:
We aren't able to confirm this mailing address in our system. You can try again later or continue to address this without confirming it.

Repeat nouns and verbs from the main interface so the user can clearly relate the warning to the action on the page.

Example:
Any changes you make to this payee will affect all pending, scheduled and future payments.

Don't

Lead with contextual information.

Example:
We will attempt this transfer on Thu Apr 23 2020. The money will not be moved from your account if you do not have enough funds in your available balance.

Use passive voice or ambiguous language.

Example:
Unable to confirm address.

Use generic of unspecific terms.

Example:
Updating this record may disrupt your transactions.

Error Messages

Error messages tell the user when they are unable to complete an action, and points them to the solution. The user will be blocked from completing their current action until the error is resolved.

Visual Treatments for Error Messages

Error - Page Level

If it is a system-level error unrelated to the user's current action on the page:

use the Error - Page Level variant of the notification component
the notification cannot be dismissed

Error - Inline Level

If it is an error preventing an action the user has just attempted to take or is about to take on the page:

use the Error - Page Level variant of the notification for an error that the user can resolve from two or more parts of the page
- the notification cannot be dismissed
use the Error - Inline variant of the notification component for an error that the user can resolve from a single part of the page
- place the inline notification close to the part where the user can resolve the error
use the input validation component for an error that the user can resolve from a single Input Field

NOTE: If the user needs more robust information about the error, or a more forceful interruption of the page-level action they are trying to complete, consider designing a full error page.

Writing Error Messages

Error messages need to explain why a user can't complete an action and provide a solution whouth making them feel like they've done something wrong. Sometimes the only solution is to try again later or to call our customer service number, but we should try to be more specific when we can.

Lead with the action to be taken if there is one. Otherwise, lead with a description of the error.

Example:
Enter an amount between $0.01 and $999,999.99 using only numbers and a decimal point. The account you selected doesn't have enough funds to make this transfer.

Use commands and, where possible, link to any actions the user needs to take.

Example:
You already have an identical payment scheduled for this date, amount and payee. Edit or cancel a scheduled payment in your bill pay activity.

Use "sorry" and "please" when an error is our fault or when the solution will take extra effort from the user.

Example:
Sorry, we're not able to schedule this payment right now. Please try again a little later.

Repeat nouns and verbs from the main interface so the user can clearly relate the error to the action on the page.

Example:
You have already added this payee using the same account number.

Don't

Lead with the consequence.

Example:
You won't be able to make this transfer until you have enough funds in your account.

Use passive voice or ambiguous language.

Example:
Duplicate payment could not be added.

Use "sorry" or "please" when an error is simple to resolve.

Example:
Sorry, this entry is invalid. Please enter a zip code that's five or nine digits.

Use generic or unspecific terms.

Example:
This record has a repeat name and number.

Success Feedback

This type of feedback provides confirmation that the user has successfully completed their previous action. It can also be used to offer follow-up actions to the user.

Visual Treatments for Success Feedback

Success - Page Level

If the user just completed a page-level action, or a major action within the page:

use the Success - Page Level variant of the notification component
the notification is always dismissible

Success - Inline

If the user just completed a minor action within the page:

use the Success - Inline variant of the notification component, and place it near where the user completed the action

NOTE: If the user needs more robust information about the page-level action they just completed, consider designing a full confirmation page.

Writing Success Feedback

State the completed action simply.

Example:
You have scheduled a transfer for Thu Apr 23 2020.

Link directly to details of the successfull action and any follow-up actions, or present them elsewhere on the page.

Example:
You have scheduled a transfer series starting Thu Apr 23 2020. View the details on your transfer activity page.

Use active voice and address the user directly with words like "you" and "your".

Example:
You have canceled your payment to Bob's Garage scheduled for Thu Apr 23 2020.

Repeat nouns and verbs from the main interface so the user can clearly relate the error to the action on the page.

Example:
You have added Jimmy the Plumber for paper check payment.

Don't

Use the word "successfully". It's redundant.

Example:
You have successfully scheduled a transfer for Thu Apr 23 2020.

Try to pack too much into the success message.

Example:
You have scheduled a transfer for Thu Apr 23 2020. It will happen from My Choice Checking (...7890) to Relationship Savings (...1234) in the amount of $500. This transfer will recur weekly until Fri Apr 23 2021. You can choose to edit these details at any time before Wed Apr 22 2020 by finding this transaction in your transfer activity.

Use passive voice or ambiguous language.

Example:
This payment to Bob's Garage on Thu Apr 23 2020 will not be processed.

Use generic or unspecific terms.

Example:
The new payee will be paid by check.