Vamos a empezar «El Test A/B del Mes» con un tipo de test que no es A/B. Antes de que salgas huyendo a otro rincón de Internet, permíteme que te explique porqué vamos a empezar con tests de heatmaps.
Una de las causas principales de no utilizar la técnica del test A/B en tu web es no saber por dónde empezar. ¿Qué cambios pruebo, dónde y por qué? Esas son las preguntas clave que te harás. Si no sabes responderlas, acabarás por no probar nada.
Para evitarlo, lo que te recomiendo es que lo primero que hagas es escoger una página de tu web dónde empezar. Esta página ha de ser relevante para tus objetivos. Esto quiere decir que o bien recibe muchas visitas, o bien es una página clave para tu actividad o negocio.
En el ejemplo de hoy, hemos escogido empezar con las páginas de precios de nuestros plugins premium: Nelio A/B Testing y Nelio Content. Estas páginas son clave para nuestro negocio, ya que los ingresos de nuestra empresa vienen a través de estas dos páginas.
Ahora que hemos escogido las páginas, para poder saber qué cambios hacer y por qué, lo mejor es empezar lanzando un test de heatmaps. Esto lo hacemos porque los heatmaps nos proporcionan datos reales de cómo interactúan nuestros visitantes con nuestra web.
Cuando vemos realmente cómo funcionan nuestras páginas con datos reales de los usuarios, es mucho más fácil sacar ideas de posibles tests a realizar. Por esto los heatmaps son siempre un buen comienzo.
Cómo crear un test de heatmaps en WordPress
Crear un test de heatmaps para una página de WordPress es muy fácil. Tan sólo tienes que seleccionar la página en cuestión e iniciar el test.
En Nelio A/B Testing, crea un nuevo test de heatmaps seleccionando este tipo de test del cuadro flotante que se abre al hacer clic en el botón para añadir un nuevo test.
En la pantalla de edición del test podrás darle un nombre a tu test para que te sea fácil identificarlo a posteriori. También puedes añadir una descripción de lo que quieres probar en ese test. Por último, pero más importante, has de seleccionar la página en la que quieres hacer el test de heatmap:
Cuando tengas todo listo (ya ves que es muy sencillo), haz clic en el botón de la esquina superior derecha de la ventana para iniciar el test. Ya sólo te queda esperar a que vengan tus visitantes para que Nelio A/B Testing se encargue de ir recogiendo datos de su comportamiento en la página y los vaya agregando en los resultados.
Resultados de los heatmaps
En nuestro caso hemos tenido dos tests de heatmaps funcionando a la vez en nuestra web: uno para la página de precios de Nelio A/B Testing y otro para la página de precios de Nelio Content.
Cada test ha estado recogiendo datos unos 20 días y ha analizado el comportamiento de unos 500 visitantes. Esto es más que suficiente para poder extraer ciertas conclusiones y pensar en futuros tests A/B que podemos implementar en estas páginas.
Ten en cuenta que estas páginas no son las que tienen más visitas (ni mucho menos) en nuestra web. Son el punto final del embudo de conversión, de ahí que el tráfico se vaya perdiendo por el camino. Pero recuerda que las escogimos por su importancia para nuestro negocio. En futuros tests estudiaremos otras páginas con más tráfico, por otros motivos que ya veremos.
Nelio A/B Testing
Me sorprendió mucho la calidad del plugin, lo fácil que fue configurarlo y el increíble soporte que me dio Nelio. Recomiendo encarecidamente usar Nelio A/B Testing.
Josette Millar
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. El test de heatmaps nos muestra los datos desde tres perspectivas diferentes: heatmap, scrollmap y confetti. Incluirte aquí directamente las 3 imágenes es un poco locura dado que son bastante grandes en cuanto a altura en píxeles. Para evitarte tener que ir haciendo scroll todo el rato, te las dejo enlazadas:
- Heatmap de la página de precios de Nelio A/B Testing.
- Scrollmap de la página de precios de Nelio A/B Testing.
- Confetti 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 heatmap es un 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 más rojizo indica mayor relevancia.
En la página de precios de Nelio A/B Testing el primer corte de la página es donde hay más zonas calientes. Si lo analizamos en detalle, los elementos de la zona del plan básico y del plan profesional reciben más relevancia que en el plan enterprise. Visto esto, quizás podríamos reordenar los planes de precios para mostrar primero el plan enterprise. Ten en cuenta que estamos acostumbrados a leer de izquierda a derecha, así que mostrar primero el plan más caro en la página de precios puede ser un buen cambio a probar en un test A/B.
Otro elemento que recibe bastante interacción del usuario es el enlace para hacer scroll hasta la comparativa detallada de los planes, que se encuentra más abajo en la página. Esto es bueno, ya que quiere decir que hay interés en ver más detalles concretos de los planes.
Lo que no es tan bueno es que hay muchas interacciones en elementos no clicables. Lo podrás ver en el confetti, que es la representación gráfica donde puedes ver todos los clics efectuados por los visitantes:
En todo el bloque de planes que puedes ver en la captura anterior sólo los botones que aparecen en cada plan son elementos a los que se les puede hacer clic. Ten 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 iconos de las características de cada plan, que son elementos no clicables. De aquí podemos entender que intentan buscar más información al respecto, pero esta información en vez de estar aquí directamente la tenemos más abajo en la página.
Otro test A/B que podríamos probar aquí es hacer que cada una de las características de los planes tuvieran un elemento flotante que apareciera al pasar el ratón por encima del texto y que diera más información contextual al visitante. Probaríamos esta versión con ayuda contextual contra la versión actual para ver cuál de estas acaba generando más compras.
El confetti también nos da información agregada de los visitantes extraída a partir de los clics que estos han hecho. Nelio A/B Testing incluye varios tipos de filtros para conocer mejor diferentes características de los visitantes, tal y como puedes ver aquí:
De los filtros extraemos estos datos:
- Chrome y Firefox son los navegadores más usados por nuestros visitantes, con mucha diferencia. Por tanto, debemos hacer que la web se vea bien, como mínimo, en estos navegadores.
- La mitad de los visitantes a esta página vienen de Estados Unidos. Esto cuadra 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 los demás días en otras zonas de la web y así atraer tráfico los días valle.
- Casi el 100% de los visitantes acceden a la página desde un ordenador de sobremesa o portátil. No tenemos prácticamente visitas desde dispositivos móviles. Esto es algo a estudiar en el futuro.
- Windows 10 y Mac OS X son los sistemas operativos desde los que nos visita la gente. Cuadra con el dato anterior, ya que prácticamente no tenemos visitantes desde sistemas operativos para dispositivos móviles.
- Tenemos mas visitantes durante la jornada laboral (el test se ejecutó en zona horaria de Chicago). Tiene sentido, ya que nuestro principal cliente es norteamericano.
- Las visitas se hacen en pantallas con un ancho mínimo superior a 1500 píxeles. Otro dato que confirma que las visitas son desde ordenadores de escritorio o portátiles.
Si revisas las versiones completas del heatmap y del confetti, verás que todas las demás secciones de la página de precios de Nelio A/B Testing ya tienen mucha menos relevancia. Visto esto, toca revisar el scrollmap:
Si revisas el scrollmap completo puedes ver que muy pocos visitantes van más allá del primer corte de la página. Esto me hace pensar que quizás deberíamos probar a tener una versión de la página de precios de Nelio A/B Testing mucho más corta, condensando la información relevante arriba.
Las secciones posteriores al primer corte de la página tienen mucho texto, y los visitantes no lo están leyendo. Menos del 20% llega a la tabla comparativa detallada de planes que puedes encontrar en la parte de abajo de la web. Todos estos datos nos los proporciona el scrollmap:
Probar con versiones de secciones más cortas y visuales puede ayudar a convencer al posible comprador y a hacer que una página de precios sea mucho más efectiva y eficiente. Esta es otra idea de un posible cambio a probar con un test A/B.
Llevamos ya unas cuantas ideas que podríamos probar en el futuro, así que está claro que la información que nos proporcionan los heatmaps es muy útil para coger ideas que luego podemos aplicar en tests A/B.
Página de precios de Nelio Content
Igual que con la página de precios de Nelio A/B Testing, aquí te dejo las imágenes completas de los resultados de la página de precios de Nelio Content:
- Heatmap de la página de precios de Nelio Content.
- Scrollmap de la página de precios de Nelio Content.
- Confetti 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 página de precios de Nelio A/B Testing. Entre otros motivos, esta página sólo tiene un tipo de plan, mientras que con Nelio A/B Testing teníamos 3 planes diferentes.
Si te fijas en el heatmap completo de Nelio Content y lo comparas con el de Nelio A/B Testing verás que en este caso hay más zonas calientes en otras partes de la página, además del primer corte.
En la imagen anterior vemos que los botones de acción de la tabla comparativa toman especial relevancia. Esto es bueno, ya que justo los tenemos ahí para eso. Sin embargo, fíjate que el plan Starter de la tabla, que no es más que la versión gratuita de Nelio Content, toma especial relevancia.
Aquí la cuestión es si deberíamos tener en la página de precios un enlace al directorio de plugins de WordPress para que los visitantes se descarguen la versión gratuita. Ahora lo tenemos, pero el heatmap muestra que es posible que un número elevado de visitantes se vayan a la versión gratuita.
Este tema da para largas discusiones. Por un lado, que se vayan no es bueno porque pierdes una posible venta directa. Aunque que se vayan puede propiciar que prueben Nelio Content y acaben comprándolo más tarde una vez probado. En Nelio hemos discutido esto varias veces y supongo que no será la última vez que lo hagamos ?. Por ahora el enlace se queda. ¿Tú que opinas al respecto?
También vemos que el vídeo capta bastante la atención. Nos quedó un vídeo muy chulo, y quizás se podría subir más arriba de la página. Esto lo podríamos probar con un test A/B ya que el bloque posterior al primer corte tampoco está recibiendo tanta importancia.
Por otro lado, vemos en el scrollmap que la pérdida de visitantes es menos brusca según bajamos hacia abajo en la página (los colores oscuros aparecen más abajo). Esto nos confirma que una página de precios más corta puede funcionar mejor si lo que queremos es que el visitante vea la mayor parte posible del contenido.
Además, combinado con el heatmap anterior vemos que las dos secciones posteriores al primer corte, que hablan de características concretas y muestran opiniones de personas, podrían trabajarse más. Son secciones con demasiado texto y que no llaman demasiado la atención. Se podría probar una versión alternativa más visual y directa.
Respecto al gráfico del confetti de clics de los visitantes, resulta curioso ver la cantidad de clics incorrectos que se hacen en zonas no clicables dentro del primer corte de la página:
Aunque la mayoría de estos clics no los podremos evitar (sí, la gente hace clic en zonas laterales, sobretodo a la derecha, al hacer scroll), hay otros que son fruto de la confusión de los visitantes. Es el caso de los clics en el precio mensual que ves en la captura anterior. Ese precio no es un elemento clicable; hay que hacer clic en el botón naranja. Sin embargo, el precio anual que aparece debajo sí lo es.
Debemos buscar otra forma menos confusa de mostrar los dos precios, con una interacción igual para ambos casos. Esto es otro de los tests A/B que podríamos probar en esta página.
¿Y ahora que?
Hemos empezado sin tener ni idea de qué tests A/B podemos probar en nuestra web. Hemos visto que los heatmaps nos ayudan a sacar ideas fácilmente para probar en tests A/B en nuestras páginas. Una vez que tenemos estas ideas de tests, lo que tenemos que hacer es ordenarlas según la prioridad que queramos.
Recuerda que los cambios en el primer corte de la página son más rápidos de probar ya que mucha más gente los verá y así obtendrás resultados concluyentes más rápido. Podrías empezar a priorizar los tests A/B que hagan cambios allí.
Y lo más importante de todo es que una vez empieces con las pruebas no pares. En cada iteración del proceso de test aprenderás algo nuevo tanto de tu web como de tus visitantes.
Nos vemos el mes que viene con otro tipo de test diferente en el que analizaremos de nuevo resultados reales. Recuerda dejarme un comentario con tu opinión de esta entrada y lo que hemos explicado hoy. ¿A qué página de tu web te gustaría hacerle un test de heatmap?
Imagen destacada de Steve Halama en Unsplash.
Deja una respuesta