Message

Overview#

  • Used to provide users with low priority, at-a-glance feedback after the outcome of an action.

Related components#

ComponentPatternUser action
MessageLow priorityOptional: Messages disappear automatically
AlertProminent, medium priorityOptional: Alerts remain until dismissed by the user, or if the state that caused the alert is resolved
ModalHighest priorityRequired: Modals block app usage until the user performs a action or exits the dialog (if available)

Design Guidelines#

Use when#

  • The feedback is non disruptive.
  • Displaying short form information messages, success messages, non-critical errors, or non-critical warnings.

Don't use when#

  • Error messages block the user or the errors are persistant.
  • An action is required.
  • The feedback message is longer than roughly 3 words.

Visual Style#

  • Do not include action buttons within message.
  • Try to not go over 3 words.
  • Use sentence case.
  • Never use all caps, bold or italics.

Editorial#

  • Write in a concise and affirmative way.
  • Utilize the noun + verb pattern unless more description is needed to describe the outcome.
  • Do not use adverbs or adjectives eg. Selected locations enabled successfully.
  • Use plural nouns when the message reflects multiple items, otherwise use singular.
  • Because task-generated messages are sent in response to user action, it isn’t necessary to give users extensive background information.
DoDon't
Changes saved.Changes saved successfully.
File exported.File exported successfully.
Updates canceled.Updates canceled successfully.
Location ID saved.Location ID saved successfully.
Locations enabled.Selected locations enabled successfully.
Upload complete.Upload completed successfully.

Behaviour#

  • Appear at the top (below header) in the centre of the page when feedback is needed.
  • Do not appear over top of other content/actionable components.
  • Stay visible for 4 seconds.
  • Can be stacked if more feedback is required sequentially.

Accessibility#

  • Keep consistent location.
  • Icon should have alt-text identifying what type of message it is.
  • Colour contrast should meet AA standards.

Examples#

Info#

Use for general informational messages.

Example text: Store transfer notification.

Success#

Use to indicate that a task or process has completed successfully.

Example text: Product updated.

Error#

Use to indicate something has gone wrong but only if it is of low priority.

Example text: Internet disconnected.

Warning#

Use to notify the user that something will effect the process negatively, but not cause problems.

Example text: Unstable connection.

Last updated on by Diana Thomson