Modales, diálogos y drawers: cuándo interrumpir al usuario y cómo hacerlo bien

Hace poco abrimos, para un análisis, la web de una tienda de decoración con la que íbamos a trabajar. En los primeros cuatro segundos aparecieron el aviso de cookies, una ventana con un 10 % de descuento a cambio del email, la burbuja de un chat que se abría sola y, al intentar cerrarlo todo, un segundo popup que preguntaba si de verdad queríamos irnos sin el descuento. Cada pieza, por separado, tenía su lógica comercial. Juntas, impedían ver los sofás.

Las ventanas modales son una herramienta potente precisamente porque detienen todo lo demás. Bien usadas, evitan que alguien borre por accidente un año de facturas, o le permiten completar una tarea pequeña sin salir de la pantalla en la que estaba. Usadas por costumbre, se convierten en el componente que más paciencia consume de toda la interfaz.

Esta guía va de esa decisión: cuándo merece la pena interrumpir, qué alternativas tenemos y cómo diseñar y construir un diálogo que ayude en lugar de estorbar.

01Modal y no modal: qué significa interrumpir

Una ventana es modal cuando bloquea el resto de la interfaz: mientras está abierta, no se puede interactuar con lo que hay detrás, y el usuario tiene que responder o cerrarla para continuar. Una ventana no modal aparece sobre la interfaz o a su lado, pero deja seguir trabajando. Esa diferencia, que el Nielsen Norman Group trata en detalle en sus artículos sobre diálogos, es el punto de partida de cualquier decisión.

Interrumpir tiene un precio: la persona estaba pensando en otra cosa y tiene que cambiar de contexto, leer, decidir y volver. Si la interrupción trae algo que necesita en ese momento, el precio merece la pena. Si no, la percibe como un obstáculo, y aprende a cerrar ventanas sin leerlas, que es justo lo contrario de lo que queremos cuando de verdad hay algo importante que decir.

Por eso la pregunta útil no es «¿pongo un modal?», sino «¿esto necesita toda la atención del usuario, ahora mismo, antes de seguir?». Si la respuesta es sí, el modal es la herramienta. Si es «más o menos», hay alternativas más amables.

02Cuándo una ventana modal es la mejor opción

En nuestros proyectos reservamos los modales para cuatro situaciones, y en todas ellas la interrupción tiene una razón clara:

1. 01Confirmar una acción importante o irreversible. Eliminar una cuenta, cancelar una suscripción, enviar un pedido a producción. El modal da un momento de pausa y explica las consecuencias.
2. 02Completar una tarea corta sin perder el contexto. Añadir un contacto a una lista, renombrar un archivo, elegir una fecha. Dos o tres campos, una acción y de vuelta a donde estaba.
3. 03Pedir un dato imprescindible para continuar. Iniciar sesión antes de guardar algo, elegir la talla antes de añadir al carrito.
4. 04Mostrar un contenido ampliado de forma momentánea. Una foto a pantalla completa, un vídeo, un mapa. Aquí el modal funciona como lightbox.

Fuera de esos casos, casi siempre hay una opción mejor. Un mensaje de confirmación tras guardar encaja en un aviso breve (lo vemos en la guía de notificaciones, toasts y banners). Un error de formulario, en línea junto al campo. Un formulario largo, en su propia página, donde se puede guardar el progreso y compartir la URL.

03Modal, drawer, bottom sheet, popover: cada interrupción a su medida

Entre el modal centrado y el mensaje en línea hay toda una familia de componentes. Elegir bien entre ellos es la mitad del trabajo.

Drawers: el detalle sin perder el contexto

El panel lateral que se desliza desde la derecha es nuestro gran aliado en paneles y herramientas de gestión. Permite abrir la ficha de un cliente, editarla y cerrarla sin perder la posición en el listado ni los filtros aplicados. Admite más contenido que un modal, puede tener su propio desplazamiento y, si es no modal, deja seguir consultando la tabla de fondo. Un ancho entre 400 y 640 px en escritorio suele funcionar; en móvil, ocupa toda la pantalla.

Bottom sheets: la versión móvil más natural

En el teléfono, una hoja que sube desde abajo queda al alcance del pulgar y se cierra deslizándola hacia abajo, un gesto que casi todo el mundo conoce. Tanto iOS como Android la usan de forma nativa, con alturas intermedias (iOS las llama detents) que permiten ver el contenido de fondo a medias, como hace cualquier app de mapas con la ficha de un lugar. Para la web, una hoja inferior con dos alturas (media y casi completa) cubre la mayoría de casos.

04Anatomía de un diálogo que se entiende a la primera

Un buen diálogo se lee en pocos segundos y deja claro qué pasa con cada botón. Sus piezas son siempre las mismas:

• →Título que resume la decisión. «¿Eliminar la reserva del 14 de junio?» dice más que «Atención» o «¿Estás seguro?».
• →Texto breve con las consecuencias. Una o dos frases: qué pasará, si se puede deshacer, qué se pierde.
• →Botones con verbos concretos. «Eliminar reserva» y «Mantener reserva» funcionan mejor que «Sí» y «No», porque se entienden incluso sin leer el título. En la guía de botones en UI explicamos cómo jerarquizarlos.
• →Un cierre visible. La X en la esquina, además de Escape y el clic fuera, salvo en alertas que exigen una respuesta.

Medidas y comportamiento

• →Ancho: 400–480 px para confirmaciones, 520–640 px para formularios cortos, hasta 800–900 px para contenidos ricos. En móvil, ancho completo menos 16 px por lado, o bottom sheet.
• →Alto: como máximo un 85–90 % de la pantalla. Si el contenido no cabe, se desplaza dentro del cuerpo mientras el título y los botones quedan fijos.
• →Fondo (scrim): una capa oscura semitransparente, en torno al 40–60 % de opacidad, que separa el diálogo y deja intuir dónde estaba el usuario.
• →Botón destructivo: en color de error y nunca preseleccionado. El foco inicial, en la opción segura o en el primer campo.
• →Animación: corta, de 150 a 250 ms, con una ligera escala o un deslizamiento. Y con prefers-reduced-motion respetado.

Clave: un diálogo bien escrito se entiende leyendo solo sus botones. Si alguien pulsa sin leer el resto, que al menos sepa qué ha elegido.

05Accesibilidad: el elemento dialog hace casi todo el trabajo

Durante años, construir un modal accesible exigía bastante JavaScript: atrapar el foco dentro de la ventana, cerrar con Escape, devolver el foco al botón que lo abrió, ocultar el fondo a los lectores de pantalla. Hoy el elemento <dialog> de HTML, con su método showModal(), resuelve la mayor parte de forma nativa en todos los navegadores modernos: vuelve inerte el resto de la página, gestiona Escape y pinta el fondo con el pseudoelemento ::backdrop.

<button type="button" id="open-delete">Eliminar reserva</button>
<dialog id="confirm-delete" aria-labelledby="dlg-title" aria-describedby="dlg-desc">
  <h2 id="dlg-title">¿Eliminar la reserva del 14 de junio?</h2>
  <p id="dlg-desc">Se liberará la mesa y te enviaremos un email de confirmación. Esta acción no se puede deshacer.</p>
  <form method="dialog">
    <button value="cancel" autofocus>Mantener reserva</button>
    <button value="confirm" class="btn-danger">Eliminar reserva</button>
  </form>
</dialog>
<script>
  const dlg = document.getElementById('confirm-delete');
  document.getElementById('open-delete').addEventListener('click', () => dlg.showModal());
  dlg.addEventListener('close', () => { if (dlg.returnValue === 'confirm') { /* eliminar */ } });
</script>

dialog { width: min(480px, calc(100% - 32px)); border: 0; border-radius: 16px; padding: 24px; }
dialog::backdrop { background: rgb(0 0 0 / 0.5); }
@media (prefers-reduced-motion: no-preference) {
  dialog[open] { animation: dlg-in 200ms ease-out; }
}
@keyframes dlg-in { from { opacity: 0; transform: translateY(8px) scale(0.98); } }

Unos detalles que marcan la diferencia. El formulario con method="dialog" cierra la ventana y guarda en returnValue el botón pulsado, sin necesidad de más código. El autofocus coloca el foco en la opción segura. aria-labelledby y aria-describedby hacen que el lector de pantalla anuncie el título y el texto al abrir. Y al cerrarse, el navegador devuelve el foco al elemento que tenía antes, normalmente el botón que lo abrió. El patrón completo, con sus variantes, está documentado en la guía de prácticas de autoría de ARIA del W3C, y si quieres repasar las bases tienes qué es la accesibilidad web.

06Popups de marketing y avisos legales: interrumpir con respeto

Volvamos a la tienda de decoración. Los popups de captación pueden funcionar muy bien si respetan el momento de la persona. Lo que suele dar mejores resultados en nuestros proyectos:

1. 01Esperar a que haya interés. Mostrar la invitación tras un porcentaje de lectura, al llegar a la segunda página o al detectar intención de salida en escritorio, en lugar de nada más entrar.
2. 02Ocupar lo justo en móvil. Un banner inferior o una hoja de media altura, que no tape el contenido por el que la persona ha llegado. Google recoge en su documentación sobre experiencia en la página que los intersticiales intrusivos dificultan el acceso al contenido, especialmente en móvil.
3. 03Una sola interrupción por visita. Y recordar la decisión: si alguien lo ha cerrado, no volver a mostrarlo en unos días.
4. 04Un cierre visible y un texto amable. «No, gracias» basta; no hace falta hacer sentir mal a nadie por no suscribirse.

El aviso de cookies es un caso aparte: es obligatorio y llega antes que nada. La guía de la AEPD sobre el uso de cookies pide que rechazar sea tan fácil como aceptar, con ambas opciones en la primera capa. Diseñarlo como un banner compacto y bien jerarquizado, en lugar de un modal a pantalla completa, permite cumplir sin tapar la web.

07Ejemplo resuelto: revisar los modales de un área de clientes

Un ejercicio que hacemos a menudo en auditorías: inventariar todas las ventanas que se abren en un producto y decidir, una a una, si deben seguir siendo modales. En el área de clientes de una empresa de alquiler vacacional encontramos catorce. Este fue el resultado:

1. 01«Datos guardados correctamente» (modal con botón Aceptar): pasó a ser un aviso breve que desaparece solo.
2. 02Editar datos de facturación (modal con nueve campos): pasó a una página propia, con su URL, para poder guardarla a medias.
3. 03Ver ficha de una reserva (modal grande): pasó a un drawer lateral en escritorio y a una pantalla completa en móvil.
4. 04Cancelar una reserva: se quedó como diálogo de alerta, con un título concreto, la política de cancelación en dos líneas y los botones «Cancelar reserva» y «Mantener reserva».
5. 05Archivar una conversación: pasó a acción directa con «Deshacer» durante seis segundos.
6. 06Galería de fotos del alojamiento: se quedó como modal a pantalla completa, con navegación por teclado y cierre con Escape.

De catorce ventanas modales quedaron cuatro. Y esas cuatro, por contraste, empezaron a leerse con atención.

08Interrumpir solo cuando ayuda

El mejor modal es el que llega cuando el usuario lo necesita y se va en cuanto ha cumplido su función. Diseñar interrupciones con criterio es una forma de respeto hacia el tiempo y la atención de las personas, y eso se nota en cómo perciben la marca: una interfaz que interrumpe poco transmite calma y seguridad. Escribir bien esas ventanas importa tanto como dibujarlas; si te interesa esa parte, la guía de UX writing entra en detalle.

En nuestros proyectos de diseño web y experiencia digital definimos estos componentes y sus reglas de uso dentro del sistema de diseño, para que cada interrupción tenga un motivo y una forma coherente. Si tu web o tu aplicación tienen más ventanas de las que te gustaría, escríbenos y las revisamos contigo.