Modales, drawers y popovers: cuándo usar cada uno
Un modal bloquea la pantalla hasta que la persona responde; un popover no. Cuándo usar modales, drawers y popovers según el NN/g, Carbon y Atlassian.
¿Qué diferencia hay entre ellos?
El NN/g distingue los diálogos modales de los no modales. Un modal deshabilita el contenido principal hasta que la persona interactúa explícitamente con él. Un diálogo no modal no deshabilita el contenido principal (NN/g: Modal and nonmodal dialogs).
Carbon, el sistema de IBM, separa los componentes por su función. Un modal enfoca la atención en una sola tarea y bloquea la página hasta que se completa o se cierra. Un popover muestra detalles adicionales de elementos específicos y es una capa no bloqueante: solo puede aparecer uno a la vez (Carbon: Modal usage; Carbon: Popover usage). Atlassian define su componente Drawer como un panel que se desliza desde un lado de la pantalla y lo documenta como un tipo de diálogo modal (Atlassian: Drawer). Es decir, “drawer” describe la forma, no el comportamiento: un panel lateral puede bloquear la página o dejarla activa, y conviene decidirlo según la tarea.
¿Cuándo usar un modal?
El NN/g reserva los modales para advertencias importantes que previenen errores críticos o irreversibles, para pedir información crítica, para dividir flujos complejos en pasos y para información que puede reducir mucho el trabajo de la persona. Advierte que no deben usarse para información no esencial. También señala que son justificados para acciones irreversibles, como sobrescribir un archivo (NN/g: Modal and nonmodal dialogs).
Carbon añade reglas prácticas. Los modales son para tareas cortas y poco frecuentes, se usan con moderación, y si una tarea se repite conviene que pueda completarse en la página principal. Solo se abren por acción del usuario, nunca por el sistema. Para mensajes no críticos, Carbon recomienda una notificación tipo toast o en línea (Carbon: Modal usage).
Cuando el modal es de confirmación de una acción destructiva, Carbon pide usar la variante de peligro y que el botón tenga un verbo activo, como «Eliminar», no «Listo» ni «OK». Al abrir, el foco debe ir al primer campo o, si no hay campos, al botón primario, y debe quedar atrapado dentro del diálogo hasta cerrarlo.
¿Cuándo usar un drawer o un panel lateral?
Cuando la persona necesita completar una tarea secundaria sin salir de la página donde está. Atlassian lo considera mejor opción que un modal en ese caso, pero pide usarlo con moderación: es invasivo, y no conviene si la persona necesita consultar el contenido que queda detrás. Los tamaños extendidos o de pantalla completa pueden hacer que se pierda el hilo del flujo, y ahí una página nueva o un diálogo no modal funcionan mejor (Atlassian: Drawer).
En la práctica, un panel lateral sirve para revisar el detalle de un elemento de una lista o para completar un formulario corto relacionado con lo que se ve. Si quieres que la persona mire la lista y el panel a la vez, implementa el panel como no modal; si lo haces modal, la lista queda inactiva hasta cerrarlo. Si el panel crece demasiado, probablemente conviene una página completa.
El NN/g contrasta el modal con las ventanas no modales para tareas que no son críticas, y menciona que las no modales son adecuadas para tareas secundarias, como redactar un correo en una ventana flotante. Su advertencia de cierre es útil: evita modales en flujos de compra, porque interrumpen un proceso que la persona necesita terminar sin distracciones.
¿Cuándo usar un popover?
Cuando la información es pequeña y está ligada a un elemento: una explicación de un ícono, un detalle de una fila o un selector de opciones corto. Carbon indica que los popovers sirven para mostrar detalles adicionales de elementos específicos y para contener elementos interactivos. Se abren con clic, con foco o con paso del cursor, según el caso, y se cierran al hacer clic de nuevo o fuera de ellos (Carbon: Popover usage).
Si el contenido supera cuatro columnas de ancho, Carbon recomienda cambiar a un modal. Y si necesitas un flujo dentro del popover, probablemente ya no es un popover.
¿Cómo se anidan?
Carbon desaconseja anidar popovers o colocar uno dentro de otro. Permite tooltips dentro de un popover, siempre que no queden recortados. Por criterio de diseño, tampoco conviene abrir un modal desde otro modal: la persona pierde el hilo de dónde está. Si un paso secundario es inevitable, resuélvelo como un paso adicional dentro del mismo diálogo, o como un panel que no bloquee el anterior.
¿Cuándo NO conviene un overlay?
- Cuando el contenido cabe en la página. Un panel que se puede mostrar en línea evita una capa extra.
- Cuando la tarea es larga o recurrente. Una página completa suele ser mejor que un modal que se abre diez veces al día.
- Cuando la persona necesita comparar dos cosas. Un modal que tapa la lista impide la comparación.
- Cuando el mensaje no es crítico. Una notificación en línea es menos intrusiva.
Ejemplo ilustrativo
Ejemplo ilustrativo: un sistema de facturación tiene una lista de facturas. Al hacer clic en una fila, se abre un panel lateral con el detalle y permite editar el monto mientras la lista sigue visible. Un ícono de información junto al estado «Pendiente» muestra un popover con la explicación del plazo. Cuando la persona elige «Anular factura», aparece un modal con la variante de peligro y un botón «Anular factura» con verbo activo. No hay modales anidados: si la anulación requiere elegir motivo, el motivo aparece como un paso dentro del mismo modal. Cada capa tiene una función distinta.
Para que los botones del modal tengan la jerarquía correcta, revisa la jerarquía de botones. Y si un mensaje dentro del modal es de error, aplica cómo escribir mensajes de error.
Si el overlay muestra datos que deben compararse, una tabla de datos suele ser mejor que un modal. Y si la tabla tiene acciones por fila, sus botones siguen la misma jerarquía de botones.
Errores comunes
- Usar un modal para información que no necesita respuesta.
- Abrir un modal por acción del sistema, sin que la persona lo pida.
- Anidar modales o popovers.
- Usar un modal en un flujo de compra que la persona debe terminar sin interrupciones.
- Dejar el foco fuera del diálogo, de modo que el teclado sigue en la página de atrás.
- Poner un botón «OK» en una acción destructiva.
Qué puedes hacer mañana
- Lista los overlays de tu producto y anota para cada uno si bloquea y si pide una respuesta obligatoria.
- Cambia un modal informativo por un panel lateral o un popover, y prueba si la persona entiende lo mismo.
- Verifica con el teclado que el foco entra y sale correctamente de cada modal.