Uso de mapas de calor en la página de precios

Comencemos "La prueba A/B del mes" con una prueba que no es A/B. Antes de que te vayas a otro rincón de Internet, déjame explicarte por qué vamos a empezar con los mapas de calor.

Una de las principales causas de no utilizar A/B testing de forma habitual en tu web es no saber por dónde empezar: ¿qué cambios intento, dónde y por qué? Esas son las preguntas clave que te harás. Si no sabe cómo responderlas, dejará de probar.

Para superar esto, lo que te recomiendo es que lo primero que hagas sea elegir una página de tu sitio web para empezar. Esta página debe ser relevante para sus objetivos. Esto quiere decir que es una página donde recibes muchas visitas, o es una página clave para tu actividad o negocio.

En el ejemplo de hoy, hemos elegido comenzar con las páginas de precios de nuestros complementos premium: Nelio A/B Testing y Nelio Content. Estas páginas son clave para nuestro negocio, ya que de ambas provienen los ingresos de nuestra empresa.

Ahora que hemos elegido las páginas, para saber qué cambios hacer y por qué, es mejor comenzar ejecutando una prueba de mapa de calor. Hacemos esto porque los mapas de calor nos brindan datos reales sobre cómo nuestros visitantes interactúan con nuestro sitio web.

Cuando realmente vemos cómo funcionan nuestras páginas con datos de usuarios reales, es mucho más fácil obtener ideas para ejecutar futuras pruebas. Es por eso que los mapas de calor siempre son un buen comienzo.

Cómo crear una prueba de mapa de calor en WordPress

Crear una prueba de mapa de calor para una página de WordPress es muy fácil. Solo tienes que seleccionar la página elegida y comenzar la prueba.

En Nelio A/B Testing, crea una nueva prueba de mapa de calor seleccionando este tipo de prueba en el cuadro de diálogo que se abre al hacer clic en el botón para añadir una nueva prueba.

En la pantalla de edición de la prueba, establece un nombre para su prueba para que sea fácil de identificar más adelante. También puede agregar una descripción de lo que desea probar en la prueba. Por último, pero no menos importante, debe seleccionar la página en la que desea realizar la prueba del mapa de calor:

Cuando tengas todo listo (como ves en la captura de pantalla anterior, es muy fácil), haz clic en el botón en la esquina superior derecha de la ventana para comenzar la prueba. Solo tienes que esperar a que lleguen tus visitantes para que Nelio A/B Testing recopile datos de su comportamiento en la página y procese los resultados.

Resultados del mapa de calor

En nuestro caso, teníamos dos pruebas de mapa de calor ejecutándose al mismo tiempo en nuestro sitio web: una para la página de precios de Nelio A/B Testing y otra para la página de precios de Nelio Content.

Cada prueba ha estado recopilando datos durante unos 20 días y ha analizado el comportamiento de unos 500 visitantes. Esto es más que suficiente para poder sacar ciertas conclusiones y pensar en futuras pruebas A/B que podamos hacer en estas páginas.

Tenga en cuenta que estas páginas no son las que más visitas tienen de nuestro sitio web. Son la etapa final del embudo de conversión, por lo que se pierde tráfico en el camino. Pero recuerde que los elegimos por su importancia para nuestro negocio. En futuras pruebas estudiaremos otras páginas con más tráfico, por otros motivos que explicaremos.

Página de Precios de Nelio A/B Testing

Empecemos con los resultados obtenidos para la página de precios de Nelio A/B Testing. La prueba del mapa de calor nos muestra los datos desde tres perspectivas diferentes: mapa de calor, mapa de desplazamiento y confeti. Incrustar aquí las 3 imágenes completas es demasiado, porque son bastante grandes en términos de altura en píxeles. Para evitar obligarte a desplazarte hacia arriba y hacia abajo por completo, los vinculé aquí:

• Mapa de calor de la página de precios de Nelio A/B Testing.
• Scrollmap de la página de precios de Nelio A/B Testing.
• Confeti de la página de precios de Nelio A/B Testing.

Veamos ahora los fragmentos más relevantes de los resultados anteriores:

Como puedes ver en la imagen anterior, un mapa de calor es una representación gráfica que muestra la interacción de los usuarios con los elementos de la página, de forma agregada y con una escala de colores donde un color cálido indica gran relevancia.

En la página de precios de Nelio A/B Testing, el primer pliegue de la página es donde hay más puntos calientes. Si lo analizamos en detalle, los elementos en el ámbito del plan básico y del plan profesional cobran más relevancia que los de la empresa. Dado esto, tal vez podríamos reordenar los planes de precios para mostrar primero el plan empresarial. Tenga en cuenta que estamos acostumbrados a leer de izquierda a derecha, por lo que mostrar primero el plan más caro en la página de precios puede ser un buen cambio para probar en una prueba A/B.

Otro elemento que recibe mucha interacción de los usuarios es el enlace para desplazarse hacia abajo y ver la comparación detallada de los planes. Esto es bueno, ya que significa que hay interés en ver más detalles sobre los planes.

Lo que no es tan bueno es que hay muchas interacciones en elementos en los que no se puede hacer clic. Lo puedes ver en el confeti, que es la representación gráfica donde puedes ver todos los clics que han hecho los visitantes:

En todo el bloque de planes que puedes ver en la captura de pantalla anterior, solo los botones que aparecen en cada plan son elementos sobre los que se puede hacer clic. Tenga en cuenta que hacer clic en todo lo demás no tiene ningún efecto. Nuestra interfaz actual está generando confusión.

Los visitantes están haciendo clic en los textos e íconos de las características de cada plan, que son elementos en los que no se puede hacer clic. Desde aquí podemos entender que intentan encontrar más información al respecto, pero en cambio tenemos esta información más abajo en la página.

Otra prueba A/B que podríamos probar aquí es cambiar cada una de las características de los planos para que tengan un elemento flotante que aparece al pasar el cursor sobre el texto y brinda más información contextual al visitante. Podríamos probar esta versión con ayuda contextual contra la versión actual para ver cuál termina generando más compras.

El confeti también nos da información agregada de los visitantes, extraída de los clics que han realizado. Nelio A/B Testing incluye varios tipos de filtros para comprender mejor las diferentes características de los visitantes, como puedes ver aquí:

De estos filtros extrajimos los siguientes datos:

• Chrome y Firefox son los navegadores más utilizados por nuestros visitantes, con diferencia. Por tanto, debemos hacer que la web se vea bien, al menos, en estos navegadores.
• La mitad de los visitantes de esta página provienen de Estados Unidos. Esto coincide con nuestros datos de ventas.
• Los visitantes nos visitan más los primeros 3 días de la semana. Conocer esta información puede ser útil para, por ejemplo, hacer ofertas el resto de días en otras zonas de la web, y así atraer tráfico en días con poco tráfico.
• Casi el 100% de los visitantes acceden a la página desde una computadora de escritorio o una laptop. Apenas tenemos visitas desde dispositivos móviles. Esto es algo para estudiar en el futuro.
• Windows 10 y Mac OS X son los sistemas operativos desde los que nos visita la gente. Coincide con el dato anterior, ya que no tenemos visitantes de sistemas operativos para dispositivos móviles.
• Tenemos más visitantes durante la jornada laboral (la prueba se realizó en la zona horaria de Chicago). Tiene sentido, ya que nuestro principal cliente es de EE. UU.
• Las visitas se realizan en pantallas con un ancho mínimo superior a 1500 píxeles. Otro dato que confirma que las visitas son desde ordenadores de sobremesa o portátiles.

Si revisas las versiones completas del mapa de calor y confeti, verás que todas las demás secciones de la página de precios de Nelio A/B Testing son menos relevantes. Con eso en mente, veamos el siguiente mapa de desplazamiento:

Si revisa el mapa de desplazamiento completo, puede ver que muy pocos visitantes van más allá del primer pliegue de la página. Esto me hace pensar que tal vez deberíamos optar por una versión mucho más corta de la página de precios de Nelio A/B Testing, condensando la información relevante en la parte superior de la página.

Las secciones posteriores al primer pliegue de la página tienen mucho texto y los visitantes no lo leen. Menos del 20% acude a ver e interactuar con la tabla detallada de comparación de planes, que puedes encontrar en la parte inferior de la web. Todos estos datos los proporciona el scrollmap:

Probar con versiones más cortas de la página que incluyan más secciones visuales puede ayudar a convencer al comprador potencial y obtener una página de precios mucho más efectiva y eficiente. Esta es otra idea de un posible cambio para probar con una prueba A/B.

Ya tenemos algunas ideas que podríamos probar en el futuro, por lo que está claro que la información que nos proporcionan los mapas de calor es muy útil para sacar ideas que luego podemos aplicar en pruebas A/B.

Página de Precios de Nelio Content

Al igual que con la página de precios de Nelio A/B Testing, aquí tenéis las imágenes completas con los resultados del mapa de calor de la página de precios de Nelio Content:

• Mapa de calor de la página de precios de Nelio Content.
• Scrollmap de la página de precios de Nelio Content.
• Confeti de la página de precios de Nelio Content.

La página de precios de Nelio Content es más sencilla y corta que la de Nelio A/B Testing. Entre otras razones, esta página tiene un solo plan, mientras que con Nelio A/B Testing teníamos 3 planes diferentes.

Si miras el mapa de calor completo y lo comparas con el de Nelio A/B Testing verás que en este caso hay más puntos calientes en otras partes de la página, además del primer pliegue.

En la imagen anterior vemos que los botones de acción dentro de la tabla de comparación de planes cobran especial relevancia. Esto es bueno, porque los tenemos ahí por esa razón. Sin embargo, ten en cuenta que el plan Starter de la tabla, que no es más que la versión gratuita de Nelio Content, cobra especial relevancia.

Aquí la pregunta es si deberíamos tener un enlace al directorio de complementos de WordPress en nuestra página de precios para que los visitantes puedan descargar la versión gratuita de Nelio Content o no. Ahora lo tenemos, pero el mapa de calor muestra que probablemente varios visitantes abandonen nuestra página de precios para optar por la versión gratuita.

Este tema es controvertido y fuente de largas discusiones en nuestras reuniones. Por un lado, mantener el enlace no es bueno porque pierdes una posible venta directa dentro de la página de precios. Pero aunque los visitantes abandonen nuestro sitio, puede que probar Nelio Content gratis sea algo bueno. Los usuarios pueden amar la herramienta y terminar comprándola más tarde una vez que la hayan probado. En Nelio hemos hablado de esto varias veces y supongo que hoy no será la última vez que lo hagamos. Por ahora, el vínculo se mantiene. ¿Qué piensa usted al respecto?

También vemos que el vídeo llama mucho la atención. Creamos un video muy bueno, y tal vez podríamos mostrarlo antes en la página. Podríamos probar este cambio con una prueba A/B porque la sección posterior al primer pliegue tampoco está recibiendo tanta relevancia.

Por otro lado, vemos en el scrollmap que la pérdida de visitantes es menos brusca a medida que nos desplazamos hacia abajo en la página. Esto confirma que una página de precios más corta puede funcionar mejor si lo que queremos es que el visitante vea la mayor cantidad de contenido posible.

Además, combinado con el mapa de calor anterior, vemos que las dos secciones después del primer pliegue, que hablan sobre características específicas y muestran opiniones de personas, pueden necesitar un rediseño. Son secciones con demasiado texto y que no llaman demasiado la atención. Podríamos probar una versión alternativa más visual y directa.

Con respecto al gráfico del confeti de clics, es interesante ver la cantidad de clics incorrectos que se realizan en áreas no clicables dentro del primer pliegue de la página:

Aunque la mayoría de estos clics no se pueden evitar (sí, suponga que las personas hacen clic en las áreas laterales, especialmente en la derecha, al desplazarse), hay otros que son el resultado de visitantes confundidos. Este es el caso de los clics en el número de precio mensual que ves en la captura de pantalla anterior. Ese precio no es un artículo en el que se pueda hacer clic; tienes que hacer clic en el botón naranja en su lugar. Sin embargo, el número de precio anual que se muestra a continuación es un enlace adecuado.

Debemos buscar otra forma menos confusa de mostrar los dos precios, con una interacción igual para ambos casos. Esta es otra prueba A/B que podríamos ejecutar en esta página.

¿Y ahora qué?

Empezamos sin tener idea de qué pruebas A/B podíamos ejecutar en nuestro sitio web. Hemos visto que los mapas de calor nos ayudan a obtener ideas fácilmente para probar en las pruebas A/B de nuestras páginas. Una vez que tenemos estas ideas de prueba, lo que tenemos que hacer es priorizarlas según nuestras necesidades.

Recuerda que los cambios en el primer pliegue de la página son más rápidos de probar ya que más personas los verán y así obtendrás resultados más rápido. Podrías comenzar priorizando las pruebas A/B que prueban cambios en esa parte de la página.

Y la lección más importante aquí es: una vez que comience a probar, no se detenga. Después de cada iteración del proceso de prueba, aprenderá algo nuevo tanto de su sitio web como de sus visitantes.

Nos vemos el próximo mes con otro tipo de test en el que analizaremos resultados reales. Recuerda dejarme un comentario con tu opinión sobre este post y todo lo que aquí expliqué. ¿En qué página de su sitio ejecutaría un mapa de calor?

Imagen destacada de Steve Halama en Unsplash.