Pop up: Guía práctica de uso (y no abuso)

¿De qué hablamos cuando hacemos referencia a los pop ups o ventanas emergentes?

En el blog ya hemos hablado alguna vez de los pop ups (en WordPress), pero hoy voy a entrar en bastante más detalle. En concreto, quiero que cuando termines de leer tengas claro qué es un pop up, cómo se utiliza en un sitio web y las diferentes formas en que puede afectar a la experiencia de usuario. Desde su uso para mejorar la interacción en sitios web hasta su reputación como fuente de molestias, los pop ups no suelen dejar a nadie indiferente. ¿Vamos? [elementor-template id="80835"]

¿Qué es un pop up o ventana emergente?

Un pop up o ventana emergente (escucharás ambos términos, pero son lo mismo) es una pequeña ventana gráfica que aparece de manera repentina en el navegador de tu PC, tableta o móvil cuando visitas un sitio web. Estas ventanas se superponen al contenido principal que querías ver y suelen utilizarse para mostrar información adicional: descuentos, notificaciones, formularios de registro, etc. Mira un ejemplo. Mientras estoy redactando este post, en la web de PcComponentes tienen un pop up anunciando sus ofertas de Halloween:

Si te fijas mucho muchísimo, verás que hay una cruz en la parte superior derecha de la imagen. Es de color gris oscuro sobre fondo azul oscuro, así que te tienes casi que dejar la vista para apreciarla y poder cerrar esa ventana emergente. Más abajo hablaremos de este tipo de triquiñuelas (spoiler alert: no nos gustan).

Pero antes...

Tipos de pop ups en función de su diseño

Un pop up puede tomar más de una forma: los hay más llamativos, otros son más sutiles... Lo que es innegable es que su diseño desempeña un papel crucial en su efectividad y en cómo los perciben los usuarios. Vamos a ver los diseños de pop up más comunes, ¿vale?

• Pop ups de luz o lightbox: Este tipo de pop up aparece como una ventana superpuesta sobre el contenido principal de la página, mientras se oscurece todo el fondo. Aquí tienes el ejemplo de Zara Home, que utiliza un pop up lightbox para su aviso de cookies:

• Pop ups de pantalla completa: Es un tipo de ventana emergente que cubre completamente la pantalla y suele utilizarse para presentar contenido visualmente impactante o anuncios a pantalla completa. En general, su función es captar la atención del usuario sea como sea.
• Pop ups deslizantes o slide-ins: Este pop up aparece desde uno de los bordes de la pantalla y se desliza hacia el centro. Son menos intrusivos que las ventanas emergentes a pantalla completa.
• Pop ups que aparecen en el centro: Es un tipo de pop up que aparece directamente en el centro de la pantalla, sin oscurecer el fondo. Al igual que las ventanas emergentes de tipo slide-in, son más discretos que los lightbox o los de pantalla completa, pero siguen siendo muy efectivos para llamar la atención del usuario sobre contenido o acciones específicas.Al fin y al cabo, tiene que cerrarlo si quiere navegar con normalidad.Aquí tienes un ejemplo de Worten, que está (ya) de cuenta atrás para Black Friday y quiere aprovechar para conseguir unos leads. En su caso, la cruz para cerrar se ve perfectamente (¡así, sí!):

• Pop ups en forma de barra: Este pop up es una barra en la parte superior o inferior de la pantalla. Se asemeja visualmente a un elemento estático de una web pero, al igual que otras ventanas emergentes, se puede programar para aparecer dónde y cuándo quieras. Es una solución perfecta para anunciar novedades y es el pop up más común para la política de cookies:

Tipos de pop ups en función de su desencadenante

Ahora que ya conoces los distintos diseños de pop up que existen, veamos los tipos de pop ups en función de su desencadenante o trigger. El desencadenante es la acción (que tú estableces) utilizada para definir cuándo y cómo aparece un determinado pop up en la pantalla del usuario.

• Pop-ups de entrada o entrance pop ups: Son las ventanas emergentes que aparecen en cuanto un usuario llega a tu web (ya está dentro, pero aún no está distraído con el contenido). Se suelen usar para ofrecer descuentos especiales o para incitar al registro, por ejemplo.
• Pop ups de salida o exit pop ups: Son los que se activan cuando se detecta que el usuario está a punto de abandonar la web, moviendo el ratón hacia la parte superior derecha. Su objetivo es retener al visitante ofreciéndole una última oportunidad, como una oferta especial en su primera compra.
• Pop ups de tiempo transcurrido: Aparecen después de que el usuario haya pasado cierto tiempo en el sitio. Son útiles para dar un empujoncito a esos visitantes que ya han estado explorando el contenido y que tienen más posibilidades de convertir.
• Pop ups de scroll: Son ventanas emergentes que se abren cuando el usuario se desplaza hasta cierto punto de la página. Como ha demostrado interés al desplazarse, se considera que puede interesarle registrarse o hacer uso de un cupón, por ejemplo.
• Pop ups de inactividad: ¿El usuario lleva inactivo cierto período de tiempo? Se abre una ventana emergente para animarlo a seguir interactuando o para ofrecer información relevante.
• Pop ups de acción específica: Son aquellos que se abren cuando sucede algo concreto, como la adición de un producto al carrito, la visualización de cierta página o la interacción con algún elemento concreto del sitio.

¿Deberías añadir ventanas emergentes a tu web?

Pues, a ver, la cosa tiene sus pros y sus contras. Antes de decidir si vas a incluir un pop up en tu web, lo mejor es que tengas muy claro cuál va a ser su objetivo y qué desencadenante vas a escoger. ¿Puedes conseguir lo mismo utilizando un elemento estático o un banner? Porque esas opciones serían menos intrusivas para el visitante. Bueno, para que puedas decidir, vamos a ver cuáles son las ventajas de los pop ups y cuáles son sus inconvenientes. Después de eso, te daré algunos consejos por si decides emplearlos. Venga, rápidamente.

Ventajas de usar pop ups

Por supuesto, la principal ventaja de un pop up bien utilizado (y destaco esto por algo) es que te ayudará a recopilar leads, a reducir las tasas de rebote de tus páginas o a aumentar la conversión. Y todo ello se debe a que los pop ups:

• Captan la atención del usuario. Además de porque tienen que cerrarse para poder seguir navegando, un pop up puede incluir animaciones u otros elementos de diseño que atraigan la atención. Si quieres maximizar la visibilidad de una llamada a la acción, un pop up es exactamente lo que necesitas.
• Se pueden sincronizar de forma precisa: Al contrario que un banner u otro tipo de elemento estático, gracias a los desencadenantes o triggers de los que te hablaba antes, puedes configurar tu pop up para que aparezca solamente si el usuario cumple una condición concreta (tiempo de estancia en la web, profundidad del scroll, clic en un botón o imagen concretos, etc.).
• Ofrecen llamadas a la acción concisas: Como el espacio es limitado, te obligan a resumir la información e ir directo al grano. En resumen, general una comunicación más efectiva.

Como ves, puede valer la pena experimentar con las ventanas emergentes en tu web para comprobar si tus tasas de conversión mejoran. Eso sí, no pierdas de vista la siguiente sección...

Desventajas de usar pop ups

• Las ventanas emergentes pueden resultar intrusivas. Al final, estás interrumpiendo la experiencia de navegación del usuario y eso puede ser molesto. Si además dificultas el cierre de la ventana emergente (con una "X" diminuta o apenas visible, por ejemplo), pues a mí por lo menos ya me tienes frita.
• Desvías la atención del usuario del contenido principal de la web. Imagínate que entras a la web de una empresa, por ejemplo, porque quieres encontrar su teléfono para llamarlos y contratar con ellos. Nada más entrar, salta un pop up con un sorteo chorras que te anima a participar desde Instagram. Ale, ya te has distraído.
• Pueden afectar a tu imagen de marca. Las ventanas emergentes mal diseñadas (y su uso excesivo) pueden llevar a percepciones negativas del sitio web y a un aumento de la tasa de rebote.
• Pueden ralentizar la carga de la web. Si tu pop up contiene vídeo u otros elementos multimedia pesados, va a aumentar significativamente el tiempo de carga de la página (sobre todo en el caso de conexiones a Internet lentas).
• Pueden no mostrarse correctamente o no funcionar en dispositivos móviles. Tendrás que asegurarte de que se visualizan correctamente en pantallas de todos los tamaños, que se pueden cerrar fácilmente pulsando con el dedo y que cargan rápidamente. Mira este pop up que anima a bajarse la app de la tienda:

Mejores prácticas para el uso de pop ups (y errores que debes evitar)

Entonces, si quieres añadir una ventana emergente a tu sitio web pero no la quieres liar... ¿Qué tienes que hacer? Pues hay algunos consejos básicos que funcionan en casi todos los casos. Vamos a verlos y, en comentarios, me dices lo que opinas y si se te ocurre alguno más.

• Mantén la coherencia entre el diseño del pop up y el de tu sitio web en general. Ya resulta bastante intrusivo sin que, además, dejes de lado tu imagen de marca. El pop up es un elemento más de tu web ¡y tiene que parecerlo!
• Cuida ese diseño. Que no pese una tonelada, pero no te cortes si quieres usar una imagen. Para crear una ventana emergente aburrida y monótona, es mejor no crear nada.
• Elige el formato más adecuado. ¿Va a ser de pantalla completa o simplemente va a abrirse en el centro? Recuerda que algunos tipos de formato son más intrusivos que otros a ojos del usuario. Siempre puedes probar distintos tipos y ver cuál te funciona mejor. Recuerda que, para dispositivos móviles, seguramente tengas que elegir un formato más sencillo.
• Menos es más. Tienes poco espacio y poco tiempo para despertar el interés de tu visitante. Usa únicamente el texto imprescindible para dejar clara tu propuesta de valor y llamar al usuario a la acción.
• Sé específico. El contenido de tu ventana emergente debe ir en consonancia con los intereses, las necesidades y el comportamiento del usuario de tu página web. Para eso tienes distintos desencadenantes, ¡elige el correcto!
• Ojo con el número de campos. Si tu ventana emergente incluye un formulario o una encuesta, que sean lo más sencillos posible.
• No abuses. Tu web no puede ser un campo de minas, con un pop up distinto en cada página. Recuerda que hay un factor de molestia que debes tener en cuenta y que debes priorizar la experiencia de usuario. Minimiza la interrupción.

¿Cómo lo ves? ¿Te apuntas a usar pop ups?

En última instancia, el éxito de tus pop ups va a depender de cómo de bien integrados estén en tu plan de marketing y de cuánto los hayas adaptado a las necesidades y a las preferencias de tu público objetivo. Para aprovechar al máximo este tipo de elemento, debes asegurarte de mantener el equilibrio entre el impacto y la experiencia de usuario. Aunque los pop ups pueden tener su lado negativo, correctamente utilizados pueden aumentar la tasa de conversión, capturar leads y ofrecer auténtico valor a los usuarios.