Skip to main content

Alerts

note

Work in progress

Alerts are notifications of mild to high priority. They may inform the user about events they should know, or explain a problem and point out a solution. They may be triggered by user actions or not.

Tone and Voice#

đź‘Ť Do's#

  1. Alerts should be shown at the top of the page or section they apply to, filling the full container width.
  2. Provide visible feedback to user actions by using alerts.
  3. In high priority alerts, completing the task is the main focus. Our role is to assure that the user will solve their problem, by providing enough information to do it, through a clear message and action button.
  4. Should be expressed in plain language (no codes), precisely indicate the problem, and constructively suggest a solution.
  5. The user needs to know exactly what happened. Even if we work to assure full SLA, things can fail. There are even some scenarios that are beyond our direct control. Because of this, it’s extremely important that our users understand what is blocking them to finish their tasks.
  6. Errors must be actionable. As users understand what is happening, we need to give them proper following actions.
  7. We should always calm the user, not cause more stress.
  8. You can insert large amounts of text in an Alert. However, try to be as concise and clear as possible, as you are helping your user to understand what happened.

Grammar#

Alert types#

Information#

Use this to give instant feedback about the tasks a user just performed. Its main objective is to ensure task confirmation, or notify about further actions.
Ex. You have four new releases to review.

Error#

Use this when something went wrong after performing an action. Check out the Error text pattern for more info.
Ex. Sorry, something went wrong. Please, try again, or refresh your page.

Warning#

Use this when user needs to know about some important info before taking any decision.
Ex. Sorry, this account is inactive. Please check your store’s billing for more information.

Success#

Use this when the user's action had a successful outcome. Check out the Confirmation Message text pattern for more info.
Ex. Order successfully placed!

Default copies#

Invite users for beta test#

You’ve been invited to the new __ experience! Try our new beta page, now.

Welcome users to a beta page#

You are beta testing the new __ experience.
You can switch back to the previous version at any time, through the button in the page header.

You are beta testing the new __ experience. The previous version can still be accessed through the __ module.