System and action messages for the user

Providing clear communication and feedback to users is crucial for building confidence and trust.

Limit Notifications, use sparingly, and ensure purpose is clear.

See "When to Use" / "When Not to Use" to differentiate between the different alert types.

• Use For: System status, validation messages, event notifications.
• Banner: High priority, critical system-level alerts.
• Time element: Used sparingly.
  • For maintenance to be timed before and during, but not after.
  • To let the users know when they log in for the first time
    • Example: Different account levels
  • For expiration
    • Example: Upcoming payment is due
• • If the message is applicable to the user then the banner should be visible to the user throughout the application.
• Add usage for each of the colors
  • Info
  • Danger
  • Warning
  • Success?
  • White (used for contrast)
  • Black (used for contrast)

• Avoid: using alerts for non-critical information that can be conveyed through other UI elements.
• Avoid: Inline validation alerts on forms.
• Avoid: part of everyday (user) task completion.

• Writing & Tone: Limit to 200 characters; use noun + verb pattern; address users directly with "we," "our," and "you".
• Elements:
  • Accent: Notification color.
  • Icon: Notification icon.
  • Label: Descriptive text or title.
  • Action: Optional user action.
  • Dismiss: Dismiss button.

• Trigger & Dismissal:
  • Persistent (across the entire application) until user closes (if applicable).
  • If the message you are trying covey could interrupt usage of the application it should be sticky. It should not be dismiss-able.
    • Examples: Maintenance, expiration, etc.

• Positioned at the top of the screen, shifts content below (sticky or not).
• Ability to dismiss it with a close button on the right hand side.
• If there is a single optional user action and there is an ability to dismiss, the action should also act as a dismissal for the banner.

• WAI-ARIA:
  • Use role='alert' for non-interruptive messages.
  • Use role='alertdialog' for interruptive messages.
  • Use aria-hidden='true' to hide from screen readers if needed.
  • On dismissal needs to be removed from the DOM.
  • Close or action buttons should have the appropriate roles and labels.
    • Icons (close icon) should be treated as an image.
  • Expose non-button tags as buttons with appropriate ARIA attributes.

• Modals
• Popovers