Este artículo fue escrito el 6 de noviembre de 2026.
Las herramientas de IA evolucionan rápido. La necesidad de decidir si se interrumpe a un usuario, si se despliega un panel lateral o si se eleva una tarjeta desde abajo, no cambia. Ventana de diálogo (dialog), panel lateral (drawer), tarjeta inferior (bottom sheet), menú desplegable (dropdown), pestañas (tabs) y acordeón (accordion): estas son formas de solicitar información. Los menús de las aplicaciones cambiarán de sitio; por eso, tome este texto como una guía para gestionar las interrupciones y no como un catálogo para memorizar.
Una sección fija en la página alberga datos que no cambian: la dirección, los precios o los horarios. Sin embargo, hay elementos que resultan molestos si están siempre visibles y que se pierden si se envían a una página nueva: filtros de búsqueda, confirmaciones breves o respuestas extensas que casi nadie lee. El habla cotidiana suele agrupar todo esto bajo la palabra «emergente» (popup), y por eso las IA cometen tantos errores. Para acertar, divida la decisión en tres preguntas: ¿Es imprescindible detener al usuario? ¿Puede la página principal seguir visible? ¿Se trata simplemente de alternar entre vistas de la misma lista?
Detener, compartir o cambiar
Una ventana de diálogo (dialog), también llamada modal (modal), se ubica en el centro de la pantalla y oscurece el fondo. Debe reservarse para momentos en que el usuario deba responder antes de realizar cualquier otra acción segura: eliminar un registro, confirmar una reserva o corregir un campo obligatorio que quedó vacío. No es el lugar adecuado para redactar explicaciones largas, mostrar menús o dar avisos sorpresa. Mientras permanece abierta, el foco del teclado (focus) debe quedarse en su interior; la tecla Escape o un botón de cancelación explícito deben cerrarla y devolver el foco de navegación al control que la abrió. Si no se fija esa condición, los modelos suelen dibujar un recuadro sin vía de retorno para el teclado, dejando atrapada a cualquier persona que no use ratón. Esa condición no es un detalle secundario: es la regla fundamental de uso.
Un panel lateral (drawer) se desliza desde el borde inicial (start edge) y mantiene a la vista la página principal. Resulta idóneo para tareas secundarias que consultan la pantalla de fondo: aplicar filtros sobre una lista, revisar detalles de un elemento o ajustar opciones que no son críticas. Se cierra mediante la tecla Escape o tocando fuera del panel. En páginas redactadas en idiomas de derecha a izquierda, como el árabe, el borde inicial se sitúa a la derecha; por eso conviene indicar siempre «start edge» en lugar de fijar la derecha, evitando que el panel se abra a contracorriente de la lectura.
Una tarjeta inferior (bottom sheet) se eleva desde la parte inferior en la pantalla del teléfono. Funciona como la variante móvil del panel lateral cuando se sostiene el dispositivo con una sola mano. Es perfecta para ofrecer acciones rápidas sobre el elemento seleccionado: llamar, guardar o compartir. No debe emplearse para formularios extensos de veinte campos. La tarjeta debe detenerse a media pantalla o mostrar solo una vista previa, permitiendo cerrarla al deslizar hacia abajo o mediante la tecla Escape. Si en su idioma no existe un nombre técnico asentado, no lo invente: la fórmula «un panel que sube desde la base» junto al término «bottom sheet» explica todo lo necesario.
El mismo lugar, una vista distinta
Un menú desplegable (dropdown) abre una lista corta junto a un control y se recoge en cuanto se selecciona una opción. Sirve para elegir idioma, criterio de ordenación o cantidades. No es un menú de navegación principal ni un lugar para incluir párrafos. Si la lista supera la decena de elementos, requiere una página propia o un panel lateral, en lugar de un menú flotante que termine saliéndose de la pantalla del móvil.
Las pestañas (tabs) organizan distintas vistas dentro de un mismo contenedor, permitiendo cambiar de una a otra en horizontal. Estas vistas están al mismo nivel jerárquico: esta semana y la siguiente, o descripción e ingredientes. Todos los nombres de las pestañas deben permanecer visibles simultáneamente; si se ocultan dentro de un menú desplegable, dejan de funcionar como pestañas.
Un acordeón (accordion) apila bloques de información que se despliegan hacia abajo, ya sea de uno en uno o varios a la vez (especifique cuál prefiere). Es muy útil para información secundaria que la mayoría suele pasar por alto, como condiciones de envío o preguntas frecuentes. Evite colocar la única mención del precio dentro de un acordeón cerrado; mantenerlo oculto presupone que el usuario no lo necesita, y el precio no es un dato secundario.
Es muy habitual confundir pestañas y acordeones porque ambos «ahorran espacio». Las pestañas reemplazan la información en pantalla manteniendo los encabezados visibles a lo largo de la parte superior. El acordeón empuja el resto del contenido hacia abajo y oculta la respuesta hasta que se pulsa. Si a una IA solo le pide “ahorrar espacio”, elegirá uno u otro al azar; debe nombrar la estructura exacta que responda a la forma en que el usuario buscará el dato.
Dos componentes equivocados en un mismo proyecto
El registro de una academia requería dos interacciones distintas: una acción delicada (cancelar la plaza de un alumno) y una habitual (filtrar únicamente las clases de tarde). La primera versión colocó ambas opciones dentro del mismo «emergente» (popup) porque esa era la única palabra que figuraba en la solicitud. Como consecuencia, cancelar una plaza se volvió un error facilísimo de cometer al tocar la pantalla, mientras que el filtro de la tarde tapaba la lista que el profesor necesitaba consultar. Una sola palabra provocó dos malas soluciones.
La corrección consistió en separar los términos. Para cancelar, se configuró una ventana de diálogo (dialog) que oscurece el fondo, explica con precisión quién perderá la plaza y permite cerrarla mediante la tecla Escape o un botón visible de cancelar, devolviendo el foco de navegación al botón de origen. Para el filtro de la tarde, se utilizó un panel lateral (drawer) que se despliega desde el borde inicial (start edge), manteniendo la lista visible al lado y cerrándose con un toque fuera del panel. En teléfonos móviles, ese mismo filtro se convierte en una tarjeta inferior (bottom sheet) para facilitar el acceso con el pulgar. El docente no necesita aprender a usar tres programas distintos; solo necesita que la interfaz respete cuándo debe detenerlo y cuándo dejarlo trabajar.
Redacte esa diferencia funcional en su idioma para que el equipo entienda la lógica, y mantenga los términos técnicos en inglés para evitar que el modelo de IA vuelva a fundirlo todo en un emergente genérico. Si en su idioma no hay una palabra cotidiana para drawer, la definición «un panel lateral que no tapa la lista principal» transmite la idea con claridad. No pierda tiempo buscando un sustantivo perfecto; el comportamiento del componente es lo que importa.
Un ejemplo de instrucción técnica
On the list page, put filters in a drawer from the start edge, not in a dialog. Close the drawer with Escape or a tap outside. Keep focus inside the drawer while it is open, and return focus to the filter button when it closes.
Justo debajo, en su propio idioma, detalle cuáles son los filtros concretos. El modelo puede construir el panel lateral sin saber de antemano que los filtros serán por barrio o por precio. Esos datos debe decidirlos usted en su idioma. La estructura técnica se comparte en inglés; el contenido responde a su realidad local.
Suele debatirse mucho sobre qué componente parece más moderno, pero la discusión relevante es cuál resulta más respetuoso con la tarea del usuario. Interrumpir la navegación para elegir un orden de lista resulta molesto; ocultar una acción destructiva dentro de un menú desplegable resulta peligroso. Cuando estas dos reglas se aplican con naturalidad, se ha superado la parte más compleja del diseño. El siguiente paso es más breve pero se olvida a menudo: cómo confirmar al usuario que su acción se ha realizado con éxito, sin necesidad de cargarlo con una página nueva.