Errors

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

Error masthead example: change password

Problem Statement

Errors disappoint and frustrate users. Prevent them whenever possible. When errors happen, provide thoughtful feedback and exemplify the conversations Morningstar strives to have with our users.

Types

System-level Errors

System-level errors should use the Top Hat component. In the message, start by apologizing, describe what’s going on, and indicate how long it might take to resolve the issue.

Page-level a top hat message that system is down.

Page-level Errors

If there are errors about page-level or out-of-view events, use a Notification. Combine with inline form errors to further describe the error in detail.

See Forms, Notifications, and Tooltips for more information.

Example of a page-level error notification.

In-page Errors

If there are errors at a component-level, Alerts can be used in combination with field-level validations to further describe the error in detail. Notifications are typically not necessary in addition to Alerts.

See Alerts, Forms, Notifications, and Tooltips for more information.

Inline Form Errors

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 the user types.

See Input states for details.

Example of field level validation, with message Your worksheet names can only include letters, numbers, and the following special characters.

Permission Restricted Errors

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.

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 user must take action before a page is rendered. See Buttons and Tooltips for more information.

Prevent errors ahead of time by identifying required/optional fields. See Forms for more information.

Example of preveting errors with an optional field inactive.

Character counters set users' expectations for how much content to enter, including any limits on characters.

Example of preveting errors with a character counter.

Guidelines

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

Don‘t show empty pages without explaining why there’s no content.

Do use inline form errors, as they provide contextual information to help a user act.

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.
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

This Sponsor Code is not valid

Don‘t

We don’t recognize this sponsor code. Check with your employer for more details.

Fix errors below

Don‘t

Enter the information below to reconnect your account.

Enter a valid Market Value.

Don‘t

For Market Value, enter only positive numbers.

Invalid investment exclusion.

Don‘t

You can’t exclude more than four investment options, because doing so will keep us from properly diversifying your account.

The security [Name] is already defined in client security master by security identifier as [ID]. Please either map the imported security to another Morningstar security or a user defined security.

Don‘t

You’ve already mapped an investment to this Morningstar security. Either choose another Morningstar security, or don't map it at all.

Enter balance

Don‘t

Enter only numbers between $0 and $100,000,000.

You’re not allowed to save that much into this account.

Don‘t

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.

Don‘t

For this account, you can’t put in more than you make.

Alerts