Errors

Errors provide contextual and actionable feedback to help users resolve failures and avoid future complications.

Error masthead example: change password

Problem Statement

Ensuring that they are designed well and include helpful error messages can aid in the conversations we want to have with our users.

Entire Page or System is Down

If a full page or system is down, apologize, let a user know what’s going on, and then tell them how long you think it might take to resolve the issue.

Restricted Access

If a user can’t access certain information, tell them why, or hide the component entirely if it’s not pertinent to their role. Provide a way to resolve access issues, if it’s possible.

User Errors

Page-Level Validation

When a user submits a form, if multiple required fields are not completed, page-level validation will inform a user to complete those required fields. The combined field-level validations should further describe the error in detail.

Field-Level Validation

If a user enters an input incorrectly or fails to take proper action, alert them with red, in-line error messaging. Ideally, this messaging would show as a user is typing. See Input states for details.

Preventative Measures

Deactivating Controls

Deactivate the primary action button on the page until all required information has been provided.
Offer helper text in Tooltips if a user must take action before a page is rendered.

Error Prevention

Prevent errors ahead of time by identifying required/optional fields.

Guidelines

do use messaging to let a user know why data is missing. — Do use messaging to let a user know why data is missing.

dont show empty pages without explaining why there’s no content. — Don't show empty pages without explaining why there’s no content.

do use in-line errors, as they provide contextual information to help a user act. — Do use in-line errors, as they provide contextual information to help a user act.

dont show a summary of errors at the page-level only. In-line errors should be combined with any page-level messaging. — Don't show a summary of errors at the page-level only. In-line errors should be combined with any page-level messaging.

Editorial

Never make a user feel foolish, guilty or patronized. Use natural language to help them get out of whatever jam they’re in.
Use full sentences with punctuation.
Acknowledge what is keeping a user from proceeding, but don’t make them feel like they did something wrong.
If we are the reason they can’t proceed, apologize.
Provide a user at least one way to resolve the problem.
Write it as if you were telling a friend how to resolve an issue.
If an error has the potential to repeat, tell a user what they should do, i.e., “If the site continues to not recognize your account, email us at ___.”

Examples

Do not	Do
We are sorry, but this Sponsor Code is not valid	Sorry, but we don’t recognize this sponsor code. Check with your employer for more details.
Fix errors below	Please enter the information below to reconnect your account.
Enter a valid Market Value.	For Market Value, please enter only positive numbers. If this message winds up in-line, shorten to: Only positive numbers, please.
Invalid investment exclusion.	You can’t exclude more than four investment options, because doing so will keep us from properly diversifying your account.
Morningstar Security mapping missing, map your security.	This investment doesn’t map to a Morningstar security, so please map it yourself.
The security [Name] is already defined in client security master by security identifier as [ID]. Please either maps the imported security to another Morningstar security or as a user defined security.	You’ve already mapped an investment to this Morningstar security. Either choose another Morningstar security, or don't map it at all. Add additional context that can help a user succeed, not create more errors.
Enter balance	Only numbers between $0 and $100,000,000, please.
You’re not allowed to save that much into this account.	You’re saving more than into your Simple IRA. That's the most the government allows for this account. If you choose not to adjust your savings rate(s), we may advise you to put any overflow money into a new account.
Invalid entry.	For this account, you can't put in more than you make.

Additional Resources

Link Template