¿Qué es un mapa de calor o heatmap?
Un Heatmap es una representación visual basada en un código de colores, también llamado «mapa de calor» de fácil lectura e interpretación, el cual muestra qué elementos o áreas de ésta presentan más interés e interacción para el usuario.
Por ejemplo, la siguiente imagen muestra la codificación típica que nos suele entregan una de las herramientas a las que me refería anteriormente:
El panorama hace ver que los colores más cálidos hacen referencia a las zonas de la web más frecuentadas y con más interacciones por parte de los usuarios y las verdosas las que menos.
Cuando un elemento o área de la página no presenta ninguna interacción o resulta ser mínima con respecto a otros elementos o áreas, no se codifica con ningún color, ya que esto complicaría y haría mucho más compleja la interpretación del heatmap.
¿Para qué sirven los mapas de calor?
Ya hemos adelantado cuál es el propósito de los mapas de calor web: analizar el comportamiento de los usuarios cuando navegar por las páginas de nuestro Blog o la de nuestro negocio online, sea cual sea la tipología de éste.
Pero la interpretación de los mapas de calor es, la mayoría de las veces, subjetiva y nunca podemos estar seguros del beneficio de un cambio que implementemos a raíz de haber comprobar en uno de ellos que sería efectivo algo concreto.
Por ello, te recomiendo hacer Tests A/B siempre que te sea posible e ir variando los contenidos hasta conseguir un porcentaje de «interés» a tu medida, dado que de lo contrario, una de las consecuencias podrían ser el aumento del Pogo sticking, que daría como consecuencia la vuelta de tus visitantes a la SERP.
Y lo que es peor: que para contenidos similares a los tuyos, fueran a visitar a webs de la competencia.
De esta forma, en caso de que el cambio realizado no fuese positivo, habremos minimizado el impacto de las pérdidas que pudiera provocar.
¿Cuáles son los tipos de mapas de calor que existen?
1. Mapa de clics de ratón
El primero de ellos corresponde, como te he mencionado anteriormente, a la cantidad de usuarios han hecho clic con el ratón.
Realmente, es el tipo más frecuente y el que, la mayor parte de las veces nos va a interesar, puesto que maximizar la cantidad de clics en un botón de tipo CTA para comprar productos en nuestro eCommerce será el objeto de deseo por parte de cualquier responsable de eCommerce, por citar un ejemplo evidente.
En este caso, no sólo se almacena información sobre los elementos «clicables» de la web, como enlaces o botones, sino también elementos «pasivos», como lugares actualmente no hipervinculados.
El ejemplo anterior de la Wikipedia podría ser una buena ilustración de cómo quedaría el panorama en cuanto a esta tipología.
2. Mapa de movimientos de ratón
En cuanto a los cambios de posición del ratón, tenemos la posibilidad de trackear lo que ocurre en nuestro negocio online de una manera muy pormenorizada.
Además, tanto cuando está en movimiento como cuando está parado, existen herramientas que pueden darnos una visión muy clara de por donde mueven su puntero los usuarios.
Esta es una manera muy psicológica de analizar el comportamiento de todo aquel que entra a nuestro sitio, ya que podemos comprobar si, la manera en que planteamos en un principio el contenido, es realmente cómo ellos lo están consumiendo.
De esta manera, tenemos una referencia de las áreas de la página web que atraen o son de interés del usuario, reflejándose en el mapa con el correspondiente código de color más cercano (o menos) al deseado rojo «intenso».
En este ejemplo, podemos ver un heatmap de este tipo en la web de un eCommerce donde, al tener en la mayoría de los casos una variedad muy amplia de categorías, la mayoría del tiempo el puntero del ratón se concentra en estas zonas.
De esta manera, sea evidencia que lo que se pretende en este tipo de negocios es llegar a la categoría concreta del producto que tenemos en la mente:
En este tipo de mapas, creo que queda en evidencia que la mirada del usuario sigue el mismo trayecto que el cursor del ratón y que, cuando su mirada está centrada en alguna parte de la página, el cursor está también alrededor de esa zona.
3. Mapas de desplazamiento vertical (“scroll”)
Cuando un usuario accede a una página web, tiene una primera visión de su contenido “above the fold”, o lo que es lo mismo: la zona superior de la página que es visible directamente en pantalla sin ninguna interacción del usuario dentro de ella.
Por tanto, aquí tenemos claro qué se va a mostrar sí o sí en nuestra web, pero ¿hasta dónde llegan del resto de esa URL?
El mapa de desplazamiento nos da una muestra de ello, con una distribución muy característica, con mayor índice de visitas en la parte superior, que va disminuyendo a medida que se desciende por la página (a menos en la mayoría de los casos).
Ejemplo de mapa de calor web
Para ejemplificar esto más fácilmente y que comprendas mejor qué es un heatmap exactamente, veamos la siguiente captura de una web, donde vemos cómo se comportan los usuarios en una URL cualquiera de la Wikipedia:
A simple vista, podemos ver que, según los lugares donde el color se vuelve algo más rojizo, es donde los usuarios que entran ahí prestan mucha mayor atención. De ahí la cantidad de clics que recibe.
Y es que, en este caso particular, vemos cómo esta atención se fija en las zonas donde hay imágenes, las cuales probablemente se pretende clicar para visualizar de una manera más amplia.
A su vez, podemos sacar muchas más conclusiones, como que en la parte superior izquierda existe una actividad de clics muy elevada, aún siendo éste un texto.
Claramente, como creadores de un sitio concreto, nos da a entender si existe interés o no en ciertos contenidos de nuestra web. En este caso, la hipótesis es que lo que pretenden es ampliar el extracto de texto, en busca del artículo completo que les aporte una información integral sobre él.
A su vez, pero de manera contrapuesta, también nos permite detectar qué lugares carecen de interés por parte de nuestros visitantes a lo largo del período al que hemos hecho seguimiento.
En nuestro caso de ejemplo de heatmap, vemos cómo la parte superior no ha despertado demasiada expectación por la mayoría.
