Confirmation Messages

Confirmation messages let the user know that they have successfully completed a task.

See the Pen Confirmation Messages by Harmony Design (@harmonydesign) on CodePen.

Web

When to Use

  • Use an Inline message
    • When the user correctly enters data in a field or control and clicks/tabs outside of that field (on field blur).
  • Use a Module (Toast)
    • For frequent confirms, like successful completion/submission of a transaction.
    • Use when information is not critical for the user to read
  • Use an End of flow dialog
    • Successful completion of a complex and/or important flow.
    • Messaging for the final step of a multiple-step, linear flow.

Appearance & Behavior

Inline Confirmation displays as the user interacts successfully with a form field. Use sparingly to avoid over-communicating with the user.

There are two variations of the inline confirmation message depending on the content they’re associated with.

  • Beside a form field
  • In the drawer or feed

The Module Confirmation (Toast) lets the user know that the task they just performed was successful and don’t require user dismissal. It gives users immediate feedback for taking an action and only appears momentarily before disappearing.

  • Features a green glyph
  • Animates down from the top of the window.
  • Although the message will automatically dismiss itself after a few seconds, it can also be dismissed immediately by the user
    • When the user “saves and closes”, it displays on the parent page.
    • When the user “saves and new,” it displays on the trowser.

The End of Flow Confirmation (Modal) displays after the user completes the last step in a flow, or takes an important action.

  • Use a modal dialog.
  • Confirmation is provided on the refreshed page
  • May include recommended next steps, actions or auxiliary messages

iOS

Appearance & Behavior

Inline (success validation)

Display the success icon when the user taps out

Field-level validation (iPhone)

Field-level validation (iPhone)

Module (Toast)

On mobile devices, toasts are used to provide system statuses to users.

  • System statuses provide feedback to increase users’ confidence instead of leaving them wondering if the app is frozen.
  • System statuses can be a simple message, an animated indicator, a progress meter, or a combination of elements.
  • It is typically integrated into the page and displayed as an overlay loading icon.
  • Offer a cancel option if the operation might take a long time.

Use when:

  • When saving
  • When loading an image
  • After an action occurs
iPhone (wireframe)

iPhone (wireframe)

Android

When to Use

  • When saving
  • After an action occurs

Text Guidelines

End-of-Flow Modal Alerts:

  • 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