El equipo de Nelio lanzamos la funcionalidad de Heatmaps en Febrero de 2014 y tres meses después se ha convertido en el segundo tipo de experimentos más apreciado por nuestros clientes. Se trata, pues, de una función imprescindible que integramos en los experimentos de test A/B de páginas y entradas (de forma que podáis ver el heatmap de cada alternativa que estéis testeando), porque creemos que los heatmaps son el compañero ideal para el Test A/B en WordPress.
Los heatmaps proporcionan información de gran valor sobre lo que nuestros visitantes hacen cuando aterrizan en nuestro sitio web de WordPress. Sin embargo, después de hablar con varios de nuestros clientes, parece ser que no somos capaces de comprender cómo usar esta información de los heatmaps a nuestro favor. ¡Que no hay forma de entender bien los heatmaps, vaya!
Desarrolladores web y expertos en usabilidad vienen usando los Heatmaps desde hace ya bastante tiempo. Gracias a que éstos han compartido los resultados de sus pruebas, hoy es posible encontrar multitud de trucos y consejos sobre cómo aprovechar los heatmaps para mejorar el diseño de nuestra web. En ConversionXL, por ejemplo, hay una entrada muy interesante que explica 19 cosas que podemos aprender de los heatmaps y que deberíamos tener en cuenta cuando diseñamos nuestras webs:
- A la gente no le gusta hacer scrolling. No todos los usuarios harán scroll en nuestra web (y cuanto más scroll tengan que hacer, menos probable es que lo acaben haciendo). Por tanto, debemos asegurarnos de que el contenido relevante es visible desde el principio.
- La gente suele dedicar más tiempo a mirar la parte izquierda de nuestras páginas. Leemos de izquierda a derecha, y de arriba a abajo, por lo que tiene sentido que los ojos de nuestros visitantes se centren en esa parte. Parece, pues, que tenemos que añadir el contenido importante ahí.
- Capacidad para ignorar anuncios. Estamos tan cansados de ver anuncios que acabamos ignorándolos de forma natural. Por tanto, no incluyáis información relevante entre anuncios o pasará desapercibida.
- Las entradillas son mejores que los artículos completos. Usar entradillas atractivas y frases que llamen la atención de nuestros usuarios en vez de textos muy largos es claramente mejor, ya que éstas os permiten mostrar a los visitantes una amplia selección de temas de una vez.
- Las fotografías y/o las imágenes permiten llamar la atención de nuestros visitantes. Ser capaz de escoger una buena imagen que acompañe a nuestras ofertas no es fácil, pero hacerlo siempre es una buena idea.
Usando estas recomendaciones con prudencia, conseguiremos páginas más atractivas para nuestros usuarios 😉 En esta entrada, sin embargo, no me quiero centrar en lo que ya sabemos (o podemos saber) sobre heatmaps, sino en por qué deberíais obtener vuestros propios heatmaps y cómo deberíais utilizarlos.
Heatmaps como un paso previo al Test A/B
Supongamos, por ejemplo, que creásteis una página siguiendo las recomendaciones antes mencionadas. Una página simple, con una imagen divertida de un bebé y un formulario de contacto a su lado. ¡Esta imagen seguro que les encanta y me ayuda a mejorar mis ventas!, pensaste entusiasmado. Sin embargo, los resultados no son los esperados; el ratio de conversiones sigue siendo bajo y no parece que la composición que escogimos funcione. Llegados a este punto, la primera pregunta que tenemos que hacernos no es «¿qué tengo que cambiar para mejorar mis resultados?» sino «¿por qué esta está pasando esto?, ¿qué está fallando?«.
Si queréis hacer Test A/B de una de vuestras páginas, pero no sabéis por dónde empezar, los heatmaps os pueden servir de inspiración.
Un Heatmap es una herramienta perfecta para detectar aquello que nuestros usuarios no están haciendo. En nuestro ejemplo, queríamos que nuestros usuarios hicieran click en un botón… y no lo hacen. ¡Y encima no tenemos ni idea de por qué! ¿Ven el botón? ¿Leen su descripción? ¿Hay algo en la web que está atrayendo más su atención? La solución os la dará, como os podéis imaginar, los Heatmaps:
¡Ahí está el problema! Hemos creado una página graciosa con un nene mono en ella… ¡y se está llevando toda la atención! Los clientes miran al bebé, no a tu página. Y ahora, de repente, ya sabemos dónde falla todo y podemos empezar a corregirlo. Dado que queremos que nuestros usuarios se fijen en el texto que hay al lado del bebé, modificamos un poco la imagen y…
… ¡voilà! Ahora el bebé está mirando hacia la derecha y, sorprendentemente, consigue dirigir la mirada de nuestros visitantes hacia el contenido que tiene también al lado.
Nelio A/B Testing
Pruebas A/B nativas en WordPress
Usa tu editor de páginas favorito en WordPress para crear variaciones y lanza pruebas A/B con solo un par de clics. No se necesita saber nada de programación para que funcione.
Detectar flaquezas de nuestro diseño
Otra ventaja de los Heatmaps es su capacidad para detectar los puntos débiles de nuestro diseño (aquellos que lían a nuestros usuarios). Fijémonos, por ejemplo, en los comentarios de WPMayor acerca de nuestra herramienta. Una de las cosas que el autor destaca es que los Heatmaps muestran clicks en «zonas extrañas». Una explicación sencilla es, simplemente, que los visitantes de nuestra web se equivocan:
- Recuperar el foco en la página (aún cuando ésta no lo ha perdido), creyendo que está volviendo de otra pestaña o ventana.
- Hacer click antes de bajar. Según hemos podido comprobar, esto pasa bastante a menudo cuando los usuarios usan touchpads.
- Intentar hacer click en la barra de desplazamiento vertical, pero sin «acertar».
- Clicks sin sentido, porque sí.
Pero no siempre es culpa de nuestros «patosos» visitantes. ¿Qué pasa si «aquello que es clickable» y «aquello que no lo es» no está claramente marcado como tal en nuestro diseño? Por ejemplo, si nuestro tema no utiliza el título de nuestras entradas como enlace al conenido, pero vemos que los visitantes suelen clickar encima del título… entonces, ¿qué? Bueno, en primer lugar ya vemos más claramente que la interacción entre los usuarios y nuestra página no está funcionando. Y, en segundo lugar, vemos claramente que tenemos que convertir el título en un enlace!
Y eso es todo, amigos. Espero que ahora tengáis una mejor idea de qué son los Heatmaps y cuál es su utilidad a la hora de entender y preparar experimentos de A/B Testing. Si tenéis dudas, no dudéis en comentar.
Deja una respuesta