算法艺术创作
algorithmic-art
通过代码和可调参数创作生成艺术与交互式视觉效果。
forgiveness-confirmation-and-prevention【设计与创意】Use this skill when the user must commit to an irreversible or high-stakes action and reversibility isn't enough — confirmation dialogs, type-to-confirm patterns, password re-entry, two-step authentication for destructive actions, and structural prevention that makes the wrong action impossible. Trigger when designing destructive flows for genuinely-…
独立 GitHub 快照 · 自动分类 · 以原作者文档为准
forgiveness; read that first.'When an action can't be made reversible, the next-best forgiveness is requiring deliberate intent. The user must take an explicit, considered step before the irreversible thing happens. The challenge: confirmation overuse trains users to dismiss it on autopilot, defeating the purpose. Confirmation must be reserved for the moments when it earns its friction.
A useful test before adding confirmation: is the action irreversible and high-stakes?
Match confirmation friction to action severity:
Cancel reservation?
[ Cancel ] [ Cancel reservation ]
For actions the user clearly initiated, where the dialog mostly catches accidental clicks. The user reads the title, picks an option.
Delete project "Acme Q4"?
This deletes 24 tasks and 8 attached files.
[ Cancel ] [ Delete project ]
For actions where the user benefits from seeing what they're about to lose. The summary gives them a chance to step back.
Delete project "Acme Q4"?
This deletes 24 tasks and 8 attached files. Cannot be undone.
To confirm, type the project name below:
[ Acme Q4__________ ]
[ Cancel ] [ Delete project ] (button enabled only when name matches)
For irreversible high-stakes actions. The user must actively type the resource name, breaking autopilot. The button stays disabled until the confirmation matches.
This action requires re-authentication.
Enter your password to continue.
[ Password__________ ]
[ Cancel ] [ Continue ]
For account-affecting actions: deleting account, changing email, transferring ownership, viewing audit logs. Re-authentication catches both autopilot mistakes and someone-else-using-my-session attacks.
<dialog id="delete-dialog">
<h2>Delete workspace "Acme Inc"?</h2>
<p>
This permanently deletes the workspace, all 47 projects, all 12 members'
access, and 3.2 GB of files. This cannot be undone.
</p>
<p>To confirm, type the workspace name below:</p>
<input id="confirm" placeholder="Acme Inc" autocomplete="off" />
<div class="actions">
<button onclick="closeDialog()">Cancel</button>
<button id="confirm-btn" disabled class="destructive">
Delete workspace permanently
</button>
</div>
</dialog>
<script>
const input = document.getElementById('confirm');
const btn = document.getElementById('confirm-btn');
input.addEventListener('input', () => {
btn.disabled = input.value !== workspace.name;
});
</script>
What this achieves:
For actions that should genuinely never happen by accident, this stack is appropriate.
<button onclick="requireReauthThen('delete-account')">
Delete account
</button>
<dialog id="reauth-dialog">
<h2>Confirm your identity</h2>
<p>For your security, please re-enter your password to continue.</p>
<input type="password" id="reauth-password" autofocus />
<div class="actions">
<button onclick="closeDialog()">Cancel</button>
<button id="reauth-submit">Continue</button>
</div>
</dialog>
Use re-authentication when:
The cost: an extra password entry. The benefit: a second opportunity for the user to reconsider, plus protection against session theft.
Stronger than any confirmation: making the wrong action impossible.
A "Submit" button disabled when the form has errors. The user can't trigger the failure path. (Pair with inline error explanations so the user knows what's missing — see affordance-false-and-anti.)
<input type="email"> rejects non-email format. <input type="number"> rejects non-numeric. <input type="tel"> shows a numeric keyboard on mobile. Each is structural prevention of certain input errors.
A <select> for state names prevents typos that a free-text field would allow. A date picker prevents impossible dates. A typeahead constrained to known values prevents misspelled selections.
The USB-C connector that can't be inserted upside-down. The pill organizer that shows visual state. The medical injector that can't deliver a dangerous dose.
<form>
<label>Email <span class="required">*</span>
<input type="email" required />
</label>
<button>Submit</button>
</form>
The browser blocks submission with focus on the missing field. Native scaffolding for prevention.
A useful framing: every confirmation step is a tax. Ask whether the tax is worth it for this specific action.
| Action | Reversibility | Stakes | Recommended confirmation |
|---|---|---|---|
| Save | Reversible | Low | None |
| Apply filter | Reversible | Low | None |
| Archive item | Reversible (toast undo) | Low | None |
| Delete (soft) | Recoverable in trash | Medium | None |
| Empty trash | Irreversible | Medium | Light dialog |
| Delete project | Irreversible | High | Strong dialog with summary |
| Delete account | Irreversible | Very high | Type-to-confirm + reauth |
| Transfer ownership | Irreversible | Very high | Type-to-confirm + reauth + email verification |
Each step up the friction ladder should correspond to a step up in stakes.
forgiveness (parent).forgiveness-undo-and-soft-delete — the preferred alternative when reversibility is possible.affordance-false-and-anti — disabled states and structural prevention.constraint — input constraints prevent invalid actions.expectation-effect — confirmation buttons in unexpected positions surprise users.accessibility-understandable (process) — confirmation flows must be operable for all users.