Confirmation Messages
A confirmation message appears when a user attempts to perform a significant action. It asks the user to verify or confirm their intended action before proceeding. This secondary layer of interaction helps prevent accidental actions and gives users a chance to reconsider potentially impactful decisions.
Confirmation types
Expected outcome
The goal is to ensure the user understands the finality of the action and prevent accidental mistakes that could lead to data loss or other serious consequences.
System sentiment
This could be bad! Did you really mean to do this or was it a mistake?
Framework
- Title should clearly pose a direct question that emphasizes the specific action the user will take if they continue.
- Body explains the consequences and highlights that the action cannot be undone. Keep the language clear, direct, and concise.
- Where the body content is longer than one sentence, the last sentence should emphasize permanence and be styled as bold text.
- Primary action should be a clear, strong verb that matches the title, to reinforce the action that will follow.
- Secondary action provides a way to back out without taking action.
Examples
Title: Delete user?
Body: This action is permanent and cannot be undone.
Primary action: Delete
Secondary action: Cancel
Title: Delete analysis?
Body: Child datasets will also be removed. This action is permanent and cannot be undone.
Primary action: Delete
Secondary action: Cancel
Unexpected outcome
A checkpoint to ensure the user reviewed the details and is confident the operation should proceed.
System sentiment
Just to make you aware, there is also a side effect here.
Framework
- Title should be direct and include the unexpected outcome to make the user aware.
- Body highlights the side effect of completing the process. Keep it succinct yet informative. Be mindful that users may only choose to read the title and primary action.
- Where helpful to the user, key words should be highlighted in bold to emphasize the exact side effects of continuing.
- Primary action should be a straightforward, positive verb/short phrase that reflects the user’s choice, expressing a sense of understanding and acceptance of the outcome.
- Secondary action provides a simple, safe exit.
Examples
Title: Unsaved changes
Body: If you leave the page, your changes will not be saved.
Primary action: Continue without saving
Secondary action: Cancel
Title: Style overrides applied
Body: If you change themes, your color, font, line, and marker overrides will reset to align with the new theme.
Primary action: Change theme anyway
Secondary action: Cancel