Se abre en una pestaña nueva

Diseño web

Ventanas emergentes en tu web: cuándo ayudan y cuándo molestan

Cuándo vale la pena una ventana emergente en tu web, cuándo perjudica a los visitantes y a la búsqueda, cuándo mostrarla y cómo hacer que se cierre fácil.

Revisada5 de noviembre de 2026
Lectura
Forma parte deDiseño web
Escucha esta guía
0:00 /7:17

Respuesta corta: una ventana emergente interrumpe al visitante, así que úsala solo cuando el mensaje importe más que lo que tapa. Muéstrala cuando la gente ya vio algo de valor, una sola a la vez, y que sea fácil de cerrar. Para promociones, Google recomienda un banner pequeño en lugar de un intersticial de página completa.

Qué cuenta como ventana emergente

Google las llama intersticiales y diálogos: elementos de la página que tapan la vista del contenido, casi siempre para promocionar algo. Los intersticiales cubren toda la página, y los diálogos solo una parte.

NN/g distingue entre modales y no modales. Un diálogo modal se pone encima del contenido y lo desactiva hasta que interactúas con él. Uno no modal deja funcionar el resto de la página.

Por qué molestan las ventanas intrusivas

Interrumpir a la gente con intersticiales intrusivos puede frustrarla y reducir su confianza en tu web, dice Google. Añade que impiden que los buscadores entiendan tu contenido, lo que puede perjudicar tu rendimiento en la búsqueda.

NN/g, que lleva décadas estudiando ventanas emergentes en pruebas de usabilidad, dice que a la gente no le gustan. La mayoría aparecen a destiempo e interrumpen tareas importantes.

Cuándo vale la pena una ventana emergente

NN/g reserva los diálogos modales para pocos casos: avisos importantes que evitan o corrigen errores graves y datos sin los que el proceso no puede seguir. También sirven para dividir un flujo complejo en pasos más simples y para preguntas cuya respuesta puede ahorrarle mucho trabajo a la gente.

Algunos intersticiales los exige la ley, como un control de edad. Google los deja fuera de sus consejos, pero pide que el contenido quede debajo del intersticial y no detrás de una redirección.

Para todo lo demás, Google sugiere un banner que ocupe solo una parte pequeña de la pantalla. Así la gente y los buscadores llegan al contenido en cuanto entran en la página.

Casi todo depende del momento

La lista de NN/g de ventanas problemáticas trata sobre todo del momento:

Ventana Por qué molesta Qué hacer en su lugar
Antes de que cargue el contenido Interrumpe antes de que la gente reciba nada Esperar a que el mensaje tenga sentido
Pedir el correo antes de interactuar La gente todavía no vio nada Pedirlo cuando ya leyó o navegó
Pedir opinión demasiado pronto La gente aún no hizo nada que valorar Pedirla justo al terminar una tarea
En medio de una tarea importante Corta lo que la gente vino a hacer Esperar a que termine la tarea
Varias ventanas seguidas Se ve poco profesional y agota Mostrar solo una a la vez
Una ventana modal para las cookies La gente la cierra con prisa Usar un aviso no modal abajo o a un lado

De la investigación de NN/g sobre ventanas emergentes, consultada el 5 de noviembre de 2026.

Una ventana de intención de salida, que se abre cuando el visitante parece a punto de irse, al menos espera a que la gente vea la página.

Hazla fácil de cerrar

Muchos gestores de contenido tienen plugins para los diálogos habituales, como los de suscripción a un boletín, señala Google. Si tu web usa uno, revisa en sus ajustes cuándo sale la ventana y cómo se cierra.

Un banner que deja usar la página puede quedarse hasta que el visitante actúe. Una ventana que tapa contenido necesita un botón de cerrar visible y la tecla Escape, y si es modal, que también se cierre con un clic fuera. Nuestra guía del elemento dialog explica la parte de teclado y lector de pantalla. Una ventana que empuja el contenido también puede sumar al cambio de diseño acumulado (CLS).

Cómo añadir una ventana emergente que no moleste

  1. Decide si el mensaje necesita una ventana, o si un banner o la propia página pueden llevarlo.
  2. Si tiene que interrumpir, que sea un aviso, un paso obligatorio o una pregunta que ahorre trabajo.
  3. Espera a que el visitante vea algo de valor, nunca antes de que cargue el contenido.
  4. Nunca apiles ventanas una encima de otra, ni muestres una durante una compra, un formulario u otra tarea.
  5. Di en una frase qué gana el visitante si actúa.
  6. Si tapa contenido, añade un botón de cerrar visible, Escape y, si es modal, un clic fuera.
  7. Comprueba en el celular que el contenido sigue a mano y que nada salta al abrirse.

Lo que aparece en nuestra propia web

El 5 de noviembre de 2026 abrimos nuestra página de inicio como un visitante nuevo. Lo hicimos en una pantalla del tamaño de un celular y en una de escritorio. Aparecen dos cosas, y ninguna bloquea la página.

El aviso de cookies sale en más o menos medio segundo. Es un banner: ocupa el 15% del alto de la pantalla en el celular y el 9% en el escritorio, y la página sigue desplazándose detrás. Tiene tres botones, Preferencias, Aceptar todo y No vender ni compartir mi información personal, y se queda hasta que el visitante elige.

En el celular, el mensaje del chat espera al aviso. Con el aviso abierto, no salió en los 20 segundos que esperamos. Cuando lo respondimos, salió justo después de bajar media pantalla. Ocupa el 13% de la pantalla, y su botón Cerrar mensaje lo quita.

Antes de publicar una ventana emergente

  • En el celular, el contenido sale primero y sigue a mano con la ventana abierta.
  • Ninguna ventana se abre encima de otra.
  • Nada se abre mientras alguien llena un formulario o paga.
  • El botón de cerrar y la tecla Escape la quitan.
  • El texto de alrededor no salta al abrirse ni al cerrarse.
  • El aviso de cookies deja usar la página que tiene detrás.

RecuerdaInterrumpe solo por algo que importe más que lo que tapas. Espera, pregunta una vez y haz que irse sea tan fácil como quedarse.

Nuestro servicio de diseño web hace banners y diálogos que respetan al visitante y dejan el contenido a mano. Escríbenos en el formulario o por WhatsApp. Para los avisos que tienes que mostrar, nuestra guía del aviso de cookies y nuestra guía del chat en vivo cubren los dos más habituales.

Respuestas rápidas sobre las ventanas emergentes

¿Las ventanas emergentes perjudican el SEO?

Las intrusivas pueden hacerlo. Google dice que los diálogos e intersticiales que tapan el contenido impiden que los buscadores entiendan la página, y eso puede perjudicar el rendimiento en la búsqueda. Un banner pequeño que deja ver el contenido evita el problema.

¿Cuándo debe aparecer una ventana emergente?

Cuando el visitante ya vio algo de valor, no antes de que cargue la página ni en medio de una tarea. NN/g sugiere esperar a que el mensaje tenga sentido para el visitante, y pedir opinión justo después de que alguien termina una tarea.

¿El aviso de cookies debe ser una ventana emergente?

NN/g acepta pedir el consentimiento antes del contenido cuando lo exige la ley, pero desaconseja las ventanas modales para los avisos de cookies, porque la gente las cierra con prisa. Prefiere un aviso no modal abajo o a un lado, que deja usar la página.

¿Conviene una ventana de intención de salida?

Interrumpe menos que una ventana al llegar, porque el visitante ya vio la página. Valen las mismas reglas: una sola a la vez, un motivo claro para actuar y una forma evidente de cerrarla.

¿Cómo debe cerrarse una ventana emergente?

Con un botón de cerrar visible y la tecla Escape, y si es modal, también con un clic fuera. Nuestra guía del elemento dialog explica cómo hacer una que puedan cerrar quienes usan teclado o lector de pantalla.

Fuentes

Consultadas el 5 de noviembre de 2026. Central de la Búsqueda de Google: Evita los anuncios intersticiales y diálogos intrusivos. En inglés: Nielsen Norman Group, Popups: 10 Problematic Trends and Alternatives y Modal and Nonmodal Dialogs: When (and When Not) to Use Them. Nuestro caso: nuestra página de inicio como la ve un visitante nuevo, revisada el 5 de noviembre de 2026.

Pedro Galindez

Pedro Galindez

Fundador de Feedback Studios, estudio de crecimiento bilingüe en Miami.

Escuchar0:00 /7:17

Más guías

Revisada 5 de noviembre de 2026

Tooltips: cómo añadir texto al pasar el ratón que funcione para todos

Qué es un tooltip, por qué el atributo title se queda corto, qué pide WCAG 1.4.13 al contenido al pasar el ratón y cómo hacer uno accesible.

Revisada 5 de noviembre de 2026

Reflow en WCAG: cómo hacer que tu web funcione con zoom al 400%

Qué pide el reflow de WCAG: contenido que cabe en 320 píxeles CSS con zoom al 400% sin desplazarse de lado, qué puede seguir moviéndose de lado y cómo probarlo.

Revisada 5 de noviembre de 2026

Botón de alternancia (toggle): cómo hacer que el lector de pantalla entienda si está activado

Cómo dice su estado un botón de alternancia: aria-pressed con etiqueta fija, una etiqueta que cambia, un interruptor con aria-checked o una casilla.

Revisada 5 de noviembre de 2026

Contratar a un experto en Google Ads: qué preguntar antes de firmar

Qué le exige Google a quien gestiona tus anuncios, qué promesas prohíbe y qué preguntarle a un experto o una agencia de Google Ads antes de firmar.

Revisada 5 de noviembre de 2026

Anuncios en carrusel de Facebook: cuándo usarlos y cómo crearlos

Qué es un anuncio en carrusel de Facebook, cuándo conviene más que una sola imagen, cómo diseñar las tarjetas y cómo crearlo en el administrador de anuncios.

Revisada 3 de noviembre de 2026

Imágenes WebP: qué son y cuándo usarlas

Cómo se compara WebP con JPEG, PNG y GIF, cómo reduce las imágenes, cómo pasarte y cómo lo usamos en nuestra web.

Siguiente paso

Cuéntanos qué necesitas

Escríbenos por WhatsApp o envíanos un mensaje. Respondemos en español o en inglés.