Safeguards for Destructive Actions: Positive Friction
Learn to design safeguards and intentional friction mechanisms to prevent your users from accidentally performing irreversible actions in your digital product.
The Power of Positive Friction
In standard interface design, we seek to remove any obstacles or friction that slows down the user. However, for destructive actions, friction is humanly necessary. Without it, a single mistaken click could erase years of user work. A good safeguard forces the brain to switch from automatic mode (“System 1”) to analytical and conscious mode (“System 2”).
There are several types of safeguards that vary according to the level of risk of the action:
5 Types of Effective Safeguards
1. The Standard Confirmation Modal
It’s the classic dialog asking: “Are you sure?”.
- Critical Improvement: Do not use generic “Accept” and “Cancel” buttons. Use specific action verbs like “Delete Project” and “Keep Project”. This ensures the user actually reads the consequence of their click.
2. Double Verification by Text (Type to Confirm)
Used for extreme actions (e.g., deleting a database in AWS or the central repository in GitHub).
- How It Works: The user must type a keyword (e.g., “DELETE”) or the exact name of the object they are about to destroy to enable the final button. This manual task ensures the user is fully aware of what they are doing.
3. Extra Visual Differentiation (Danger Zone)
- Always group destructive actions in a separate section at the bottom of the page (e.g., the “Danger Zone”).
- Use the color red to indicate danger, but with caution to avoid overusing it.
- Add clear warning icons (exclamation marks or danger signs).
4. “Undo” as an Instant Safety Net
If the action is destructive but frequent (e.g., archiving an email or deleting a chat message), do not block the user with a modal every time; it would drive them crazy.
- Strategy: Allow the action to be performed, but immediately show a Toast or notification with an “Undo” button for a few seconds. It is much more agile and less annoying.
5. Hold to Confirm (Delay on Click)
A button that requires being held down for 2 or 3 seconds for the action to complete. It is widely used in mobile devices, wearables, and industrial control systems to avoid accidental touches.
When to Use Each Mechanism (Risk Level)
| Risk Level | Example Action | Recommended Safeguard |
|---|---|---|
| Low | Deleting a chat message or archiving a post. | Undo without prior confirmation. |
| Medium | Deleting a document or a shared folder. | Confirmation modal with specific verbs. |
| High | Deleting a user account or formatting a server. | Text verification + Email notification. |
Mentor’s Tips
- Do not abuse the modal: If you ask the user for confirmation for every small action, they will end up clicking “Accept” mechanically without reading anything, which defeats the purpose of the safeguard.
- Indulgent Tone: Even at the moment of destruction, maintain a helpful tone. Offer alternatives (“Instead of deleting, do you want to archive this content?”).
- Version History: The best safeguard is not the modal, but a system that allows recovering deleted information for a certain period of time (e.g., the Recycle Bin).
Resources and Tools
- Material Design Guidelines: Confirmation and Acknowledgement
- UX Collective: Using Friction as a Tool - Positive vs Negative Friction
- GitLab Design System: Destructive Actions and Modals Patterns
- Articles: Why Friction is Sometimes Necessary in UX
error-prevention-vs-recovery mental-models-undo-redo error-state-patterns