Try the micro-demo
Compare instant submission (BEFORE) vs a safer flow (AFTER):
What problem this solves
Some actions are “important” because a mistake is costly: submitting legal info, paying real money, deleting something permanently, or sending sensitive data.
Goal: prevent accidental submission, and provide a short recovery path if it still happens.
Checklist (practical)
- Add a review step that shows the exact values about to be submitted (not just a spinner).
- Make confirmation explicit: “Confirm payment”, not “OK”.
- Provide an Undo window (toast/snackbar) when reversal is possible.
- Keep focus stable: don’t move focus into toasts or live regions automatically.
- Announce outcomes in a polite live region (
role="status") so non-visual users aren’t guessing. - Let people go back and edit from the review step (“Back to edit”).
- If the action is truly irreversible, prefer a confirmation dialog (but keep it accessible).
Common failure modes
- “Review” step that’s not real: it doesn’t show the actual values, or values reformat silently.
- Vague button labels: “Continue” / “OK” without stating the consequence.
- Undo without a real undo: a message that says “Deleted” but offers no recovery.
- Focus theft: moving focus into a toast interrupts keyboard/controller flow.
Notes for games
- Controller users benefit from “review” because accidental presses are common during UI transitions.
- Prefer a predictable confirm layout: Cancel on the left, Confirm on the right, consistent across screens.
- If you show a countdown for Undo, also provide an explicit “Undo” button and announce expiry.