Ventana modal: cuándo interrumpir y cómo facilitar la salida

Usa una ventana modal solo cuando detener a la persona evita un daño o cuando falta un dato sin el cual su tarea no puede seguir. En los demás casos, un aviso en la propia página o una ventana que no bloquea el fondo resuelve con menos costo (NN/g, Modal & Nonmodal Dialogs (en inglés)). Cuando la modal aparece, necesita un botón de cerrar visible, la tecla Esc y el foco de vuelta en el lugar donde la persona estaba.

Qué hace que una ventana sea modal

La ventana modal aparece encima del contenido y bloquea el resto de la pantalla hasta que la persona responde. La no modal también queda encima, pero deja usar la página de abajo. El ejemplo clásico es la ventana para redactar un correo en Gmail, que se queda en una esquina mientras buscas un mensaje viejo (NN/g (en inglés)).

Hay un tercer nombre en el medio. Cuando el fondo se oscurece, la ventana se llama lightbox, y suele ser modal, aunque no siempre (NN/g, Popups (en inglés)). El oscurecido es solo visual. Lo que la vuelve modal es que el fondo deja de responder.

Cuándo la interrupción vale la pena

Toda modal cobra un precio. La persona deja lo que hacía, lee, decide, cierra y después tiene que recordar dónde estaba. El artículo de NN/g de 2017 enumera los casos en que ese precio compensa (NN/g (en inglés)):

• Evitar una pérdida que no se puede deshacer. Salir sin guardar o sobrescribir un archivo justifica detener a alguien.
• Pedir un dato que falta para continuar. El ejemplo es pedir que inicie sesión a quien intenta guardar un favorito sin haber entrado.
• Dividir una tarea larga en pasos. Funciona, pero si la tarea tiene muchos pasos, probablemente merece una página entera.
• Hacer una pregunta corta que ahorra trabajo después. Solo cuando la pregunta tiene relación con lo que la persona acaba de hacer.

El mismo texto señala dónde la modal estorba. Suscribirse a un boletín no es crítico para quien visita. Una ventana en medio del pago distrae en el momento más delicado de la compra. Una decisión que depende de información escondida detrás de la propia ventana tampoco cabe en ella.

Los errores de formulario quedan fuera por el mismo motivo. La persona necesita ver el mensaje mientras corrige el campo, así que el error va junto a él, como cuento en el texto sobre formularios y errores de campo.

Cuándo se vuelve ruido

En 2019, una investigadora de NN/g registró cada ventana emergente que le apareció en sitios y aplicaciones durante varias semanas. El promedio fue de 25 por semana (NN/g, Popups (en inglés)). El artículo reúne los patrones que más molestaron en las pruebas:

• una ventana antes de que la página cargue;
• una ventana justo después de iniciar sesión, cuando la persona ya tiene el siguiente paso en mente;
• pedir el correo antes de cualquier interacción;
• pedir una valoración antes de que la persona haya hecho algo que valorar;
• varias ventanas apiladas, una tras otra.

El costo va más allá de la molestia. Quien se acostumbra a cerrar ventanas inútiles termina cerrándolas todas sin leer, incluida la que trae un aviso serio. Por eso el mismo artículo sugiere mostrar el aviso crítico en la propia página, en un bloque que se destaque (NN/g (en inglés)).

Google llega a una conclusión parecida por otro camino. Una ventana que tapa el contenido le dificulta al buscador entender la página y puede perjudicar el rendimiento en la búsqueda. Su consejo es cambiar la ventana de página completa por un banner que ocupe solo una parte de la pantalla (Google, intersticiales y cuadros de diálogo invasivos).

Cómo dejar salir a la persona

Un artículo de NN/g de 2015 sobre ventanas superpuestas parte de tres reglas que mucha gente ya conoce (NN/g, Overuse of Overlays (en inglés)). Son el botón de cerrar visible, el fondo oscurecido para mostrar que la página de atrás no responde y el cierre con la tecla Esc. Después muestra lo que suele faltar:

• Un cancelar explícito. Mucha gente no sabe que hacer clic fuera cierra la ventana. En pantallas táctiles, otras personas la cierran sin querer.
• Datos guardados. Si la ventana tenía campos y se cerró por error, lo que se escribió debería seguir ahí cuando vuelva a abrirse.
• El botón Atrás. Por defecto, no cierra la ventana. Lleva a la página anterior, y quien solo quería salir de la ventana pierde la página entera.
• Una posición alta. Una ventana centrada puede quedar cortada abajo en pantallas bajas. Más cerca de la parte superior, aparece entera con más frecuencia.

El celular y la lupa de pantalla lo empeoran todo. Con la pantalla ampliada, la persona ve solo una parte de la ventana y puede no encontrar el botón de cerrar.

Lo que el navegador ya hace por ti

El elemento <dialog> de HTML, abierto con showModal(), se encarga de buena parte de este trabajo. Funciona en todos los navegadores principales desde marzo de 2022 (MDN, el elemento dialog). El fondo oscuro sale del pseudoelemento ::backdrop, que solo existe cuando la ventana se abre como modal.

Una guía de web.dev resume el resto (web.dev, componente de diálogo). La tecla Esc cierra la ventana sin código tuyo. El resto de la página queda inerte, sin recibir clics ni foco. Al abrir, el foco va al primer elemento que lo acepta dentro de la ventana. Al cerrar, vuelve al botón que la abrió.

El patrón del W3C para ventanas modales completa la lista (W3C, Dialog (Modal) Pattern (en inglés)). La tecla Tab circula solo entre los controles de dentro, y la ventana necesita un nombre, visible o en aria-label. El patrón recomienda, además, un botón de cerrar al que se llegue con el teclado.

El mismo patrón hace una advertencia. Marcar como modal una ventana que no bloquea el fondo de verdad engaña a quien usa lector de pantalla, que deja de percibir el resto de la página. Si la ventana no bloquea, no debe anunciarse como modal.

Cómo lo hice en kahue.net

La galería de pantallas de cada caso, como la del caso de Vexor, es una modal. Usa el <dialog> nativo, abierto con showModal(), y tiene nombre propio para el lector de pantalla, como “Galería de Vexor”. El primer botón dentro de ella es el de cerrar, así que ahí cae el foco cuando la galería se abre.

La modal tiene sentido ahí porque la persona la pidió. Hizo clic en una miniatura para ver la pantalla en grande, y la tarea dentro de la ventana es una sola: mirar las pantallas y volver.

Para salir hay cuatro caminos. El botón de cerrar en la esquina, la tecla Esc, que viene del navegador, y el clic en el fondo oscuro, que escribí aparte. El clic en la propia imagen no la cierra, para que nadie pierda la galería al tocar la pantalla. Las flechas de anterior y siguiente están abajo, al alcance del pulgar, y las flechas del teclado también cambian la imagen.

El selector de idioma, arriba en el sitio, va por el camino opuesto. No es modal: abre una lista corta y deja libre el resto de la página. Se cierra con un clic fuera, con la tecla Esc o al cambiar de página. Cuando se cierra con Esc, el foco vuelve al botón del selector. Pasar el ratón no abre la lista, porque eso creaba dos estados en conflicto.

Lo que falta, según la lista de NN/g, es el botón Atrás. Hoy, con la galería abierta en una computadora, sale de la página del caso en lugar de cerrar la galería.

Dónde las fuentes no coinciden

El punto de fricción es el aviso de cookies. El artículo de NN/g de 2019 acepta una ventana antes del contenido cuando la ley obliga a pedir consentimiento (NN/g (en inglés)). En el mismo artículo, sin embargo, la recomendación para el aviso de cookies es una ventana no modal, abajo o a un lado de la página.

Google exime de sus reglas sobre intersticiales a la ventana que exige la ley, como la verificación de edad. Aun así, pide que el contenido siga cargado debajo y que el sitio no redirija a una página solo de consentimiento (Google). Las dos fuentes coinciden en un punto: una obligación legal no exige una ventana que bloquee la página entera.

El error común: una modal en lugar de una página

A veces la modal nace por comodidad. Crear una página nueva da más trabajo, y la ventana encima parece un atajo. NN/g menciona ese motivo, evitar montar una plantilla de página nueva, como uno de los que no justifican la ventana (NN/g (en inglés)).

La señal de alerta aparece pronto. Si el contenido de la ventana necesita barra de desplazamiento, enlaces internos o una dirección propia para compartir, ya es una página (NN/g (en inglés)). Darle una página le devuelve el desplazamiento normal, el botón Atrás y un enlace que se puede guardar.

Fuentes

• Nielsen Norman Group, Modal & Nonmodal Dialogs: When (& When Not) to Use Them (en inglés)
• Nielsen Norman Group, Popups: 10 Problematic Trends and Alternatives (en inglés)
• Nielsen Norman Group, Overuse of Overlays: How to Avoid Misusing Lightboxes (en inglés)
• Google, Evitar los intersticiales y los cuadros de diálogo invasivos
• MDN, el elemento dialog
• web.dev, Cómo compilar un componente de diálogo
• W3C, Dialog (Modal) Pattern (en inglés)