Friction in the user interface is often regarded as something to avoid or resolve. However, it can be useful to prevent a user from completing a destructive action when the consequences may be unknown.
In cases where we prioritize error prevention, we can take steps to:
- Assist a user from accidentally clicking a destructive action.
- Help a user understand what happens after confirming a destructive action.
- Provide alternative options to potentially resolve a problem without resorting to destructive action.
Depending on the severity of destructiveness, consider the following friction patterns.
If a destructive action is difficult to undo or data will be lost permanently, strongly consider implementing a modal to confirm the action or guide the user to an alternative route.
- A modal used for confirming a destructive action should use the danger button variant to confirm the action.
- Require input confirmation of the deleted object's name when the action removes additional resources within. For example, when deleting a project.
- All caps text should not be used in the modal header or body, unless the all caps styling is typical in the context (for example, README).
- Body content can use bold styling to draw attention to the consequences of the destructive action.
- Avoid using alerts to emphasize the content inside a modal.
Destructive actions may be frustrating to a user when performed unintentionally. Recovering from these actions is difficult and can have an emotional impact. Consider introducing an additional step to prevent a user from accidentally completing a medium-severity destructive action. For example, put the action within a dropdown requiring a minimum of two clicks to complete it.
The destructive action can easily be undone and no actual data is lost. Consider adding no friction at all in order to streamline the interface, especially in places where an action needs to be performed in bulk. These kinds of destructive actions can be exempt of using the danger button variant and use the default variant instead.
Last updated at: