Message
#
Overview- Used to provide users with low priority, at-a-glance feedback after the outcome of an action.
#
Related componentsComponent | Pattern | User action |
---|---|---|
Message | Low priority | Optional: Messages disappear automatically |
Alert | Prominent, medium priority | Optional: Alerts remain until dismissed by the user, or if the state that caused the alert is resolved |
Modal | Highest priority | Required: 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.
Selectedlocations enabledsuccessfully. - 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.
Do | Don'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#
InfoUse for general informational messages.
Example text: Store transfer notification.
#
SuccessUse to indicate that a task or process has completed successfully.
Example text: Product updated.
#
ErrorUse to indicate something has gone wrong but only if it is of low priority.
Example text: Internet disconnected.
#
WarningUse to notify the user that something will effect the process negatively, but not cause problems.
Example text: Unstable connection.