Descubre qué hacen tus visitantes en tu web con heatmaps

Somos seres curiosos por naturaleza. La curiosidad, en muchos sentidos, es una de las características que más nos ha hecho evolucionar. Y es que la información es poder, y tener información sobre los demás es muy útil en muchos campos diferentes, incluido el desarrollo de páginas web.

Sin entrar en el reverso tenebroso del mundo de la privacidad, hay muchas maneras de administrar una página web y utilizar la curiosidad de form ética para mejorar el desempeño de esta y conseguir que tus visitantes disfruten más con tus páginas.

Los heatmaps, o mapas de calor, son una técnica cuyo principal objetivo es descubrir qué hacen las y los visitantes en una página web y ver cómo interactúan con esta, pues nos permiten analizar su comportamiento de forma agregada y anónima. Mediante el análisis del movimiento del cursor en la página web se construye una representación visual que muestra las zonas calientes de tu página marcadas con colores más cálidos.

Además, los heatmaps nos permiten sacar ideas de mejora para aplicar en nuestra página web. Sólo tenemos que estudiar los datos que vemos en el heatmap para sacar conclusiones sobre qué está pasando, qué están haciendo tus visitantes, qué está fallando en la web y cómo podemos solucionarlo.

Creación de un heatmap en WordPress

Hoy en día, crear un heatmap es algo tremendamente sencillo. En WordPress sólo tenemos que utilizar un plugin que nos permita crear heatmaps y listo. De hecho, los heatmaps son una de las características principales más demandadas por nuestros usuarios y usuarias de Nelio A/B Testing.

Llevamos mucho tiempo creando heatmaps para seguir investigando posibles mejoras en la web. Como ejemplo, te mostraré el último heatmap que hemos creado en la página principal de Nelio.

Lo primero es crear el heatmap. Para ello, seleccionamos el nuevo test en Nelio A/B Testing y escogemos de qué página queremos tener el heatmap, como puedes ver en la siguiente captura:

Con esto, sólo tenemos que iniciar el test para que el plugin empiece a rastrear el movimiento del ratón de los y las visitantes y agregar la información de forma automática. De este modo, poco a poco iremos construyendo el heatmap con el que podremos ver gráficamente los resultados.

Resultados del heatmap

Una vez que hayamos rastreado un número representativo de visitantes, podemos observar con detalle el resultado del heatmap. Hay que tener en cuenta que existen varias visualizaciones diferentes de estos datos de nuestros visitantes.

La forma más común de visualización es el propio heatmap, que muestra una serie de manchas de colores cálidos superpuestas encima de la propia página web en aquellos puntos que han recibido más interacción.

Por otro lado, tenemos el scrollmap, que muestra con colores más cálidos hasta dónde se ha llegado de la página haciendo scroll (desplazándose de forma vertical hacia abajo) antes de abandonarla.

Finalmente, la última representación que podemos encontrar habitualmente consiste en ver los clics que se han realizado en la página como nube de puntos, o confetti.

En la galería anterior tienes el heatmap, el scrollmap y el cofetti completos que nuestro plugin ha creado al analizar la página principal de nuestra web. A continuación, veamos en más profundidad algunos detalles de la información que podemos extraer de todo esto.

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.

Más info

Detalles del heatmap

El heatmap muestra que gran parte de la actividad de quienes visitan nuestra página principal ocurre en la primera parte de la página. Encontramos mucha interacción sobre los botones que nos llevan a las página específicas de cada uno de nuestros plugins, que es algo que ya nos interesa:

Pero también descubrimos que mucha gente hace clic en la flecha que hay en el primer bloque para hacer scroll hacia abajo. Lamentablemente, esta flecha es sólo un indicador y no es clicable, por lo que seguramente confunde a nuestra audiencia, que igualmente hace clic sobre ella.

Como solución, podríamos optar por hacer que la flecha fuera un botón que automáticamente hiciera scroll vertical hacia abajo. De este modo, alineamos lo que la persona que hace clic espera que pase con lo que realmente acaba pasando.

Por otro lado, es curioso ver como el pie de página también recibe bastante atención. Esto es importante, ya que puede ser indicativo de que estamos forzando a nuestro público a llegar hasta el final de la página para acabar encontrando lo que quieren. Además, vemos que el enlace para contactar es lo que más relevancia toma. Posiblemente deberíamos poner este enlace mucho más arriba en la página, de tal forma que no perdamos a quienes no acaban llegando tan abajo.

Detalles del scrollmap

El scrollmap que hemos visto antes nos muestra que la mayoría de clientes y clientas que recibimos no llegan más allá de la mitad de la página. Con esta información, la conclusión principal que podemos extraer es que el contenido a partir de ese punto no es demasiado relevante.

Para hacer que nuestro contenido resulte más atractivo a nuestro público y, así, evitar que se vayan, una posibilidad es mostrar secciones que sean más visuales y dinámicas. El contenido estático no resalta lo suficiente y perdemos su atención. Por este motivo, proponer cambios en esas secciones puede ser una buena posibilidad a probar en un futuro test A/B que podemos crear en nuestra página.

Detalles del confetti

En cuanto al confetti, nos muestra una nube de puntos con la información de todos los clics que se han hecho en la página durante el tiempo en el que hemos tenido el test funcionando. Además, podemos obtener información más específica de los clics mediante el color en que se pintan y el filtro escogido.

Vemos como la mayoría de visitantes que hacen un clic, tardan entre 5 y 10 segundo en hacerlo. Conocer este dato es muy interesante, ya que tenemos una medida bastante aproximada del tiempo de que disponemos para llamar su atención.

Cuanto más compleja sea la página y más difícil de entender parezca, más visitantes perderemos. Esta información nos puede ayudar para plantear una versión de la página mucho más simple y radical. Por ejemplo, podríamos mostrar menos información y de forma más directa. Otro posible test A/B que podríamos probar a continuación.

Además, podemos ver como hay visitantes que hacen clic en elementos que no son clicables. Un apartado especialmente relevante aquí es la lista de logos de empresas que usan nuestros productos, o los testimonios de nuestras clientas y clientes:

En estas secciones no tenemos elementos clicables, pero estamos recibiendo clics. Por tanto, estamos confundiendo a la gente que viene a la página. Y la confusión puede generar un sentimiento de rechazo que les haga perder interés.

Para evitar esto, podríamos decidir modificar el diseño de estas secciones para dejar más claro que no se tiene que hacer clic ahí. O incluso eliminar las secciones, teniendo en cuenta la información del scrollmap, donde ya veíamos que perdíamos a gente en esta parte de la web.

Lo importante de los heatmaps es obtener ideas de mejora a través de analizar cómo creemos que están interactuando las personas que llegan a nuestra web. De esta forma podremos corregir comportamientos fallidos y proponer posibles mejoras a introducir en nuestra página que podemos probar con tests A/B a posteriori.

Te recuerdo que la versión gratuita de Nelio A/B Testing te permite crear heatmaps de prueba en tus páginas de WordPress de forma tan simple como te he explicado aquí. Anímate a probarlo y cuéntanos qué información has extraído a través de esta representación visual del comportamiento de tus visitantes.

Imagen destacada de Almos Bechtold en Unsplash.