Diseño emergente de UX: mejores prácticas, consejos y ejemplos

Cada sitio web que se enfoca en las ganancias también se enfoca en obtener más conversiones de sus visitantes: alentarlos a comprar … o al menos suscribirse.

Las ventanas emergentes son la mejor herramienta para aumentar las tasas de conversión. Los resultados que ven las tiendas de comercio electrónico que comienzan a usar ventanas emergentes hablan por sí solos:

• Kiss My Keto redujo su tasa de abandono de carritos en un 20 %
• Christopher Cloos mejoró sus tasas de conversión en un 37%
• ¡AUGE! por Cindy Joseph aumentaron sus ingresos de comercio electrónico en $ 148,297 en solo un mes

El secreto del éxito de las campañas anteriores fue su integración con la experiencia general del usuario (UX) de cada sitio web. Estas empresas nunca interrumpieron a los usuarios mientras mostraban ventanas emergentes, sino que las configuraron inteligentemente para que aparecieran cuando pudieran ofrecer contenido útil y relevante en el momento adecuado.

Si puede lograr esto en su sitio, no solo evitará interrumpir su UX, sino que en realidad lo mejorará .

En este artículo, veremos 5 formas en las que puedes hacer precisamente eso, comenzando con…

Las ventanas emergentes de entrada pueden ser extremadamente perturbadoras.

Estas son ventanas emergentes que aparecen tan pronto como se carga un sitio web. Justo cuando un visitante comienza a orientarse y asimilar toda la información en su sitio, es interrumpido por una ventana emergente que aparece de la nada.

Ventanas emergentes de entrada también:

• Impedir que los visitantes accedan al contenido deseado
• A menudo contienen contenido irrelevante
• Confundir a los visitantes

En resumen, casi siempre son más molestos que útiles y degradan la UX de su sitio.

En lugar de molestar a sus visitantes con ventanas emergentes de entrada tradicionales, permítales conocer su sitio web primero. Luego, puede mostrar su ventana emergente cuando su comportamiento indique que están listos para ver un mensaje secundario.

Aquí hay algunas formas típicas de activar ventanas emergentes basadas en la participación del usuario:

• Mostrar la ventana emergente después de X segundos: esta opción les da a sus visitantes algo de tiempo para navegar por la página que están viendo. Puede captar su atención después de que hayan pasado un tiempo en la página.

• Mostrar la ventana emergente después de un desplazamiento del X por ciento: puede configurar sus ventanas emergentes para que aparezcan después de que un visitante se haya desplazado hacia abajo en un determinado porcentaje de su página web.
  
  Por ejemplo, puede configurar una ventana emergente que aparece cuando un visitante llega al final de un artículo de blog, lo que significa que está listo para algún contenido nuevo (quizás ofreciendo un libro electrónico gratuito a cambio de su información de contacto).

• Muestre su ventana emergente con intención de salida: de esta manera, captará la atención de los visitantes que están a punto de abandonar su sitio.
  
  Con una ventana emergente de intención de salida, puede evitar que alguien se vaya sin convertirse y convencerlos de que sigan comprando o se suscriban a una lista de correo electrónico.

También es fundamental que preste atención a la "frecuencia" o el número máximo de veces que se establece que aparezca la ventana emergente. Por lo general, desea limitar esto a 1 o 2 veces por visitante.

Mostrar varias ventanas emergentes puede estar bien (como veremos a continuación), pero ver la misma ventana emergente una y otra vez volverá locos a los usuarios.

Este es un buen ejemplo de cómo usar las ventanas emergentes en función de la participación del usuario. La ventana emergente de intención de salida de Obvi solo aparece para los visitantes que abandonan el sitio.

No hay una ventana emergente mágica que sea relevante para todos sus visitantes. Esto se debe a que no todos necesitan ver la misma información crítica u oferta de descuento al mismo tiempo.

Desafortunadamente, no puede identificar la solución a los problemas de cada individuo y presentarles las soluciones en una ventana emergente.

En cambio, lo que puede hacer es segmentar a sus visitantes en grupos que comparten necesidades y características similares.

Estos segmentos varían según la industria y los tipos de productos que vende una tienda. Sin embargo, todas las empresas pueden segmentar a sus visitantes en grupos según la etapa en la que se encuentren en el proceso de compra.

Piense en su "recorrido del cliente": cómo las personas aprenden por primera vez sobre su marca, cómo llegan a su página de destino y cómo encuentran los productos que desean comprar.

Los segmentos en diferentes etapas del viaje del cliente tienen diferentes necesidades, y las ventanas emergentes que les muestre deben reflejar eso.

Ahora, veamos algunos otros factores que puede usar para segmentar a sus clientes. También compartiremos algunas ideas de campaña para diferentes visitantes en diferentes etapas del recorrido del cliente.

2.1. Prospectos fríos vs. calientes

Los "clientes potenciales calientes" son clientes que buscan comprar algo en este momento, mientras que los "clientes potenciales fríos" todavía están explorando sus opciones y no están listos para comprar nada.

En lugar de tratar a todos sus visitantes como si fueran "clientes potenciales calientes" que están listos para comprar de inmediato, debe crear diferentes objetivos de conversión para los clientes potenciales calientes y fríos.

Para los prospectos atractivos, el objetivo de conversión es simple: comprar ahora. Su mensaje debe impulsar a estos prospectos hacia una venta inmediata mediante un descuento o una oferta por tiempo limitado .

Necesitará un objetivo de conversión secundario para los prospectos fríos, que generalmente es lograr que se registren en su lista de correo electrónico. Después de obtener sus datos de contacto, podrá comunicarse con ellos con el tiempo y nutrir la relación hasta que estén listos para comprar.

Por esta razón, debe mostrar a los visitantes fríos contenido que les haga querer suscribirse, como un libro electrónico descargable.

Veamos cómo funciona en acción. Este es un gran ejemplo de un par de campañas de BOOM !

Ofrecen un libro electrónico como un imán principal para prospectos fríos que están interesados ​​en su línea de productos, pero que aún no están listos para realizar una compra:

Para sus clientes potenciales más atractivos (que han expresado su mayor interés en el contenido de BOOM! o están a punto de abandonar su carrito), utilizan la oferta de un cupón de descuento del 10 % como incentivo para comprar ahora y no más adelante.

2.2. Geo localización

Si vende a nivel internacional, la orientación geográfica o la orientación geográfica pueden ser una excelente manera de aumentar las conversiones. Con la segmentación geográfica, puede crear tantos mensajes diferentes para tantos países de destino como desee.

La segmentación de sus visitantes en función de su ubicación le permite ofrecerles ofertas específicas de cada país, como ofertas de envío. He aquí un ejemplo:.

2.3. Diríjase a los visitantes en función de su etapa en el proceso de compra

Cada uno de sus clientes se mueve a través de las siguientes etapas de conocimiento:

Los 5 niveles de conciencia describen las diferentes mentalidades que tendrán los clientes cuando interactúen con su sitio. Un cliente que acaba de enterarse de que su marca existe verá la misma página de manera muy diferente a un cliente leal.

Es por eso que necesita comunicar diferentes mensajes secundarios a través de sus ventanas emergentes a cada uno de estos segmentos.

Aquí hay algunos ejemplos de mensajes que se adaptan a uno de estos grupos.

1. Los visitantes conscientes de los problemas saben que tienen un problema, pero todavía están tratando de encontrar la mejor manera de resolverlo. Entonces, en este punto, su objetivo es ayudarlos a comprender mejor su problema (ya sea un problema de cuidado de la piel o la necesidad de un nuevo par de zapatillas para correr) y ofrecerles posibles soluciones.

Una forma de hacerlo es a través de publicaciones de blog y libros electrónicos. Por ejemplo, si tiene un artículo sobre "consejos para correr para principiantes", también podría promocionar un libro electrónico que brinde consejos prácticos para correr 10K.

2. Los visitantes conscientes de la solución saben qué tipo de producto resolverá su problema y están sopesando activamente sus opciones (lo que los convierte en un prospecto "más atractivo" que los visitantes conscientes del problema que acabamos de discutir). Esto hace que su objetivo sea simple: ayudarlos a encontrar el mejor producto para ellos en su sitio.

Un enfoque comprobado consiste en mostrarles los productos más populares (o productos "de tendencia") en la categoría que están buscando.

3. Los visitantes más conscientes han encontrado un producto específico que les encanta y que resolverá su problema. Todo lo que necesitan hacer es hacer clic en "Comprar ahora" y pasar por el proceso de pago. Incluso aquellos clientes que son sus prospectos "más atractivos", a menudo necesitarán un empujón final para realizar una compra.

Una oferta especial irresistible que solo está disponible por tiempo limitado es la mejor manera de convencer a este segmento para que compre ahora y no más tarde.

2.4. Segmentación avanzada

También puede tener en cuenta el comportamiento de sus visitantes en el sitio, lo que le permite crear segmentos de usuarios cada vez más específicos. Cuanto más específica sea su segmentación, más relevante puede ser su mensaje.

Puede utilizar el siguiente comportamiento específico del usuario para segmentar aún más a sus visitantes:

• Ha estado en la subpágina actual durante al menos X segundos
• Son de una fuente de tráfico específica
• Actualmente está navegando en una página específica
• Haber visitado previamente una(s) página(s) específica(s)
• Tener artículos específicos en su carrito
• Tener un valor de carrito superior a un umbral específico

Esto le permite:

• Muestre diferentes ventanas emergentes a los visitantes que provienen de diferentes fuentes de tráfico (por ejemplo, Facebook vs. Google Ads).
• Muestre ciertas campañas a prospectos que han visitado páginas específicas pero que aún no han realizado una compra.
• Diríjase a los visitantes en función de los artículos que ya agregaron a su carrito (para ventas adicionales y cruzadas).

Como hemos estado diciendo, "si le estás vendiendo a todos, no le estás vendiendo a nadie". Puede llevar esto al siguiente nivel con la personalización.

Una vez que haya separado a sus visitantes en segmentos según sus intereses, variables demográficas o geográficas y su etapa en el proceso de compra, puede mostrarles los mensajes más relevantes.

Por ejemplo, si vende productos electrónicos y sabe que un visitante específico está interesado en teléfonos inteligentes, "25% de descuento en teléfonos inteligentes" es un mensaje mucho más efectivo que "25% de descuento en productos seleccionados".

Hay cuatro niveles básicos de personalización para los mensajes en sus ventanas emergentes:

1. Todos reciben el mismo mensaje: en otras palabras, transmite una oferta general a todos los visitantes de su sitio web. Esto no es recomendable.
2. Haces dos ofertas diferentes para prospectos calientes y prospectos fríos: es decir, divides tu audiencia en dos segmentos principales en función de su compromiso. Incluso esta simple segmentación puede marcar la diferencia.
3. Hay varias ofertas para cada uno de los principales grupos de visitantes: en este caso, divide a sus visitantes en varios grupos diferentes según las variables relevantes y los vuelve a involucrar con mensajes personalizados para cada grupo.
4. Todos reciben un mensaje personalizado mediante el reemplazo dinámico de texto: este es el nivel más alto de personalización para sus ventanas emergentes. Cada mensaje se adapta a la persona específica que lo ve.

Con el reemplazo dinámico de texto , el texto de sus ventanas emergentes se actualizará automáticamente según las variables que elija.

Esto significa que puede crear una plantilla y luego modificar el contenido para satisfacer las necesidades de cada público visitante. El uso de este enfoque reduce la cantidad de esfuerzo de su parte y garantiza que cada uno de sus segmentos de visitantes vea el contenido más relevante.

Volviendo a nuestro ejemplo anterior, la tienda de electrónica promociona "25% de descuento en teléfonos inteligentes" cuando un visitante intenta abandonar su sitio desde la página de categoría de teléfonos inteligentes o una página de producto individual dentro de la categoría de teléfonos inteligentes.

Sin embargo, cuando un visitante está buscando accesorios para computadoras portátiles e intenta abandonar el sitio, la palabra "teléfono inteligente" cambia automáticamente a "accesorios para computadoras portátiles", hablando directamente de las necesidades de ese cliente.

Para maximizar sus conversiones, debe limitarse a un objetivo por ventana emergente y asegurarse de que su propuesta de valor sea persuasiva.

Una propuesta de valor es un beneficio que los clientes pueden esperar al interactuar con su ventana emergente o comprar sus productos. La propuesta de valor de una ventana emergente de registro de correo electrónico puede ser el acceso exclusivo a ciertas ventas o productos, mientras que el valor de una ventana emergente de descuento proviene del dinero que un visitante puede ahorrar al usar el código de cupón.

Si está tratando de lograr varios objetivos en la misma ventana emergente, disminuirá las posibilidades de completar cualquiera de ellos. En última instancia, confundirá su mensaje y confundirá a los visitantes sobre el valor de su oferta, lo que hará que las conversiones y las ventas sean menos probables.

Se pueden lograr varios objetivos mediante el uso de ventanas emergentes, pero asegúrese de limitarse a perseguir solo uno de ellos en cada ventana emergente.

Estos son algunos objetivos comunes de comercio electrónico:

1. Impulsando las ventas
2. Construyendo tu lista de correo electrónico
3. Reducir el abandono del carrito
4. Up-selling y cross-selling
5. Mejorando la experiencia del cliente

Como acabamos de ver, el éxito de una ventana emergente depende del valor que proporciona a sus visitantes.

Pero no importa cuán valiosa sea su oferta, si aprovecharla es demasiado difícil, nadie querrá tomarse la molestia.

Por eso es importante evitar pedir demasiada información. Mostrar demasiados campos en una ventana emergente de registro de correo electrónico, por ejemplo, hará que parezca demasiado trabajo para la mayoría de los usuarios. Además, los nuevos visitantes pueden dudar en proporcionar demasiada información personal.

Cuantos menos datos solicite, más conversiones obtendrá. En muchos casos, solo una dirección de correo electrónico es suficiente, como en el ejemplo a continuación.

Muchos sitios también solicitan un nombre para personalizar sus mensajes en el futuro, como en este ejemplo de The Oodie.

Cuando sienta la necesidad de solicitar más información, es mejor utilizar una ventana emergente de varios pasos. De esa manera, puede solicitar primero la información más crítica y luego tener campos de entrada adicionales en la segunda página de su ventana emergente.

La ventana emergente de Oodie tenía una segunda página en la que también pedían un número de teléfono:

Esta estrategia utilizada por The Oodie se denomina "Método del caballo de Troya" y generó $ 1,9 millones de ingresos adicionales para The Oodie en solo 30 días.

Si desea "robar" su estrategia, mire nuestra capacitación gratuita.

Crear ventanas emergentes como los diseñadores de UX significa pensar en cada uno de sus visitantes como humanos y considerar cuidadosamente el estado mental en el que se encontrarán cuando aparezca una ventana emergente.

Es por eso que nunca debe usar una ventana emergente de entrada y, en su lugar, debe crear ventanas emergentes basadas en la participación del usuario en su sitio. Definir segmentos de usuarios y luego mostrar ofertas relevantes es el siguiente paso. Y, por último, puede personalizar sus ventanas emergentes mediante el reemplazo dinámico de texto para adaptar sus mensajes a cada usuario.

Al seguir estas mejores prácticas, puede mejorar la experiencia del usuario en su sitio mientras mejora sus esfuerzos de creación de listas y aumenta las ventas al mismo tiempo.

Comience con OptiMonk de forma gratuita y cree impresionantes ventanas emergentes que mejoren la experiencia del usuario en solo unos minutos.