Un visitante abre una pequeña ventana para consultar un detalle. De pronto, la página que hay detrás deja de estar disponible, el control para cerrar es difícil de encontrar y el mensaje que estaba escribiendo ha desaparecido. La interrupción puede tener un aspecto cuidado, pero la experiencia se ha vuelto frágil. Un diálogo útil necesita un motivo para interrumpir, una salida evidente y un regreso bien pensado al trabajo que ya estaba en marcha.
Primero, pregúntate si hace falta una ventana
Antes de dibujar una capa superpuesta, escribe qué decisión ayuda a tomar. Si la respuesta es simplemente «leer un poco más», intenta colocar esa información junto a la opción correspondiente. Los detalles de entrega pueden situarse cerca del selector de entrega. Una explicación breve puede desplegarse debajo de su etiqueta. Estas disposiciones permiten mantener a la vista la pregunta y su respuesta al mismo tiempo.
Conviene considerar un diálogo cuando una decisión breve e independiente necesita realmente atención antes de continuar con la tarea actual. Las explicaciones extensas, las comparaciones y los formularios de varios pasos merecen una página propia. Durante la revisión del diseño, compara ambas disposiciones con contenido de longitud real, no con un rectángulo vacío.
Da a la interrupción un propósito y una salida claros
Utiliza un encabezado que nombre la tarea y botones que describan el resultado. «Descartar mensaje» es más claro que «Sí» cuando alguien corre el riesgo de perder un borrador. Mantén comprensibles las opciones secundarias en lugar de hacer grande la acción preferida y dejar desvaídas todas las alternativas. Cerrar una invitación debería resultar algo normal, no parecer el rechazo de una negociación.
MDN distingue el método modal showModal(), que vuelve inerte el fondo, de las opciones no modales show() u open. El patrón modal de WAI mantiene el foco dentro, hace que Tab recorra sus elementos cíclicamente, se cierra con Escape y normalmente devuelve el foco al elemento que lo abrió. También requiere un nombre accesible y recomienda un botón de cierre visible.
Nuestra guía sobre navegación con teclado y foco visible ofrece un contexto más amplio para revisar el recorrido alrededor de esa interrupción.
Protege el trabajo ya realizado
Imagina una consulta de proyecto ficticia. Alguien ha redactado un párrafo, abre una nota sobre cómo preparar un encargo y luego vuelve a su mensaje. Decide antes de implementar qué ocurre con ese párrafo al cerrar la nota, al cerrar el formulario principal o al intentar salir. Son acontecimientos distintos y no tienen por qué borrar la misma información.
Prioriza conservar el borrador durante la interacción actual. Si una salida lo descarta, explica esa consecuencia y ofrece una elección clara. No afirmes «guardado» si el guardado no se ha completado correctamente. Cuando falle el envío, conserva la información útil y ayuda a la persona a recuperarse, como explicamos en errores de formulario que ayudan a continuar.
Revisa el teléfono con el teclado abierto
Una maqueta centrada para escritorio no puede resolver las preguntas sobre el móvil. Abre la versión más larga en un teléfono pequeño, activa el último campo y despliega el teclado. ¿Puede la persona ver lo que está editando y llegar a la siguiente acción sin una búsqueda incómoda a base de desplazamientos?
Revisa también las etiquetas traducidas más largas y el texto ampliado. Decide qué zona debe desplazarse y comprueba que la página no salte a una posición ajena al cerrar. Si una ventana compacta se convierte en una página apretada dentro de otra, reconsidera el formato en lugar de reducirlo todo para que quepa.
Prueba un recorrido completo, incluso uno inacabado
Empieza a media altura de una página. Abre el diálogo, lee su propósito, introduce un borrador realista, consulta una nota de apoyo y vuelve. Después sal sin enviar y ábrelo de nuevo. Repite la prueba en un teléfono y con un teclado. Pide a alguien que no conozca el diseño que explique qué espera que haga cada salida antes de seleccionarla.
Registra las diferencias entre esa expectativa y el resultado. Un diálogo fiable se gana su lugar al ayudar a completar una tarea pequeña sin romper el recorrido más amplio de la persona.