# Salvaguardas para Acciones Destructivas: Fricción Positiva

> Aprenda a diseñar salvaguardas y mecanismos de fricción intencionada para evitar que sus usuarios realicen acciones irreversibles de forma accidental en su producto digital.

*Tags: ux, tecnica, seguridad, diseño-ui, product-design*

---


> [!info] Definición Rápida
> Las **Salvaguardas** son mecanismos de fricción intencionada diseñados para evitar que un usuario realice acciones irreversibles (borrar, formatear, cerrar cuenta o eliminar datos críticos) de forma accidental o impulsiva. En este caso, la **fricción es un aliado de la experiencia de usuario.**


## El Poder de la Fricción Positiva

En el diseño de interfaces habitual, buscamos eliminar cualquier obstáculo o fricción que ralentice al usuario. Sin embargo, en las acciones destructivas, la fricción es **humanamente necesaria**. Sin ella, un clic erróneo podría borrar años de trabajo del usuario. Una buena salvaguarda obliga al cerebro a pasar del modo automático ("Sistema 1") al modo analítico y consciente ("Sistema 2").

Existen varios tipos de salvaguardas que varían según el nivel de riesgo de la acción:

## 5 Tipos de Salvaguardas Efectivas

### 1. El Modal de Confirmación Estándar
Es el clásico diálogo que pregunta: "¿Estás seguro?".
- **Mejora Crítica:** No utilices los botones genéricos de "Aceptar" y "Cancelar". Usa verbos de acción específicos como **"Eliminar Proyecto"** y **"Mantener Proyecto"**. Esto asegura que el usuario lea realmente la consecuencia de su click.

### 2. Verificación Doble por Texto (Type to Confirm)
Utilizada para acciones extremas (ej. borrar una base de datos en AWS o el repositorio central en GitHub).
- **Cómo Funciona:** El usuario debe escribir una palabra clave (ej. "ELIMINAR") o el nombre exacto del objeto que va a destruir para habilitar el botón final. Esta tarea manual asegura que el usuario es plenamente consciente de lo que está haciendo.

### 3. Diferenciación Visual Extra (Danger Zone)
- Agrupar siempre las acciones destructivas en una sección separada al final de la página (ej. la "Danger Zone").
- Usar el color rojo para indicar peligro, pero con precaución para no abusar de él.
- Añadir iconos de advertencia claros (exclamaciones o señales de peligro).

### 4. El "Deshacer" (Undo) como Red de Seguridad Instantánea
Si la acción es destructiva pero frecuente (ej. archivar un email o borrar un mensaje de chat), no bloquees al usuario con un modal cada vez; se volvería loco. 
- **Estrategia:** Permite que realice la acción, pero muestra inmediatamente un **Toast** o notificación con el botón de "Deshacer" durante unos segundos. Es mucho más ágil y menos molesto.

### 5. Retraso en el Click (Hold to Confirm)
Un botón que requiere ser mantenido pulsado durante 2 o 3 segundos para que la acción se complete. Se utiliza mucho en dispositivos móviles, wearables y sistemas de control industrial para evitar toques accidentales.

## Cuándo usar cada Mecanismo (Nivel de Riesgo)

| Nivel de Riesgo | Ejemplo de Acción | Salvaguarda Recomendada |
| :--- | :--- | :--- |
| **Bajo** | Borrar un mensaje de chat o archivar un post. | Undo (Deshacer) sin confirmación previa. |
| **Medio** | Borrar un documento o una carpeta compartida. | Modal de confirmación con verbos específicos. |
| **Alto** | Borrar la cuenta de usuario o formatear un servidor. | Verificación por texto + Notificación por Email. |

## Consejos de Mentor

- **No abuses del modal:** Si le pides confirmación al usuario para cada pequeña acción, acabará pulsando "Aceptar" mecánicamente sin leer nada, lo que anula el propósito de la salvaguarda.
- **Tono Indulgente:** Incluso en el momento de la destrucción, mantén un tono de ayuda. Ofrece alternativas ("¿En lugar de borrar quieres archivar este contenido?").
- **Historial de Versiones:** La mejor salvaguarda no es el modal, sino un sistema que permita recuperar la información borrada durante un tiempo determinado (ej. la Papelera de Reciclaje).

## Recursos y Herramientas

- **Material Design Guidelines:** [Confirmation and Acknowledgement](https://m2.material.io/design/communication/confirmation-acknowledgement.html)
- **UX Collective:** [Using Friction as a Tool - Positive vs Negative Friction](https://uxdesign.cc/friction-in-ux-design-is-it-always-bad-26f634356614)
- **GitLab Design System:** [Destructive Actions and Modals Patterns](https://design.gitlab.com/patterns/destructive-actions)
- **Artículos:** [Why Friction is Sometimes Necessary in UX](https://www.interaction-design.org/literature/article/why-friction-is-sometimes-useful-in-ux-design)
---
[[prevencion-vs-recuperacion-errores]]
[[mental-models-undo-redo]]
[[patrones-estados-error]]


---

Source: https://www.fernandoux.com/es/wiki/tecnicas/salvaguardas-acciones-destructivas/