Critical Alerts

Critical alerts are system-generated messages that warn of situations with serious consequences unless action is taken. Examples include: loss of data, loss of access to data.

Web

When to Use

Remember to avoid creating unnecessary alerts. On the web there are two types of critical alerts:

  • The No-access alert warns the user about access to their data.
    • The user can’t  access the application
    • The user can still access parts of the application, but their data may not be visible
    • The user can still access parts of the application, but their data may be “read-only” until the situation is resolved.
  • The Data loss (modal) alert warns the user they will lose data if they continue, like closing a transaction without saving.
    • The user will lose data if they continue. (It typically gives them a choice to cancel or continue)

Appearance & Behavior

No-access alert

  • Is anchored to the top of the page (positioned below the stage or the header)
  • Uses the red attention glyph to draw attention to its importance.
  • It can be dismissible, and multiple alerts can be paged through.
  • It may or may not have a call to action associated with it.
critical-alerts_dia_no-access-alert

example of no-access alert in the context

Example Use Cases

  • Credit card expiration.
  • Trial expiration.
  • Browser not supported.
  • Automated transactions failed.
  • ICN no longer connected to the bank.
  • Payroll Alert: Payment cannot be filed electronically.
  • Email from support asking users for help tracking down critical system bugs.
  • Future FY14: Need to contact Agent to unblock app access (IFSP).

Data loss (modal) alert

  • Uses a modal dialog.
  • Uses the red attention glyph to draw attention to its importance.
  • May contain either a primary call to action or primary and secondary calls to action.
critical-alerts_dia_data-loss-alert

example of a critical alert: You are about to loose data!

iOS

When to Use

Remember to avoid creating unnecessary alerts. Mobile devices use the same native style in all cases to indicate status or to communicate a destructive action. (Follow iOS HIG for more details.)

Appearance & Behavior

  • Keep the title short enough to display on a single line.
  • Use plain language that offers a solution for resolving the issue. Generally, this can be accomplished using a two-button alert. A two-button alert is often the most useful, because it’s easiest for people to choose between two alternatives.
  • Avoid having more than three buttons. If you find that you need to offer more than two choices, consider using an action sheet instead.
IOS7_alert popover

 

iPad alerts can use icons (wireframe)

iPad alerts can use icons (wireframe)

Android

When to Use

Remember to avoid creating unnecessary alerts. Android devices use the native dialog element to communicate a destructive action.

 

Appearance & Behavior

a_alert

Text Guidelines

Data Loss Modal Alert:

  • Frame the basic confirmation in a No/Yes format.
  1. State the consequences: “Your changes have not been saved.”
  2. Then confirm the action: “Do you want to [do this action]?” ie: “Do you want to leave without saving?”
  • Button labels will be: “No”/”Yes”
© Intuit 2016 | Terms of use