Cómo mejorar la experiencia de usuario con los mapas de calor

Pretender mejorar la experiencia de un usuario en nuestra web, tienda online o landing page, forma parte de la evolución y mejora continua para un constante progreso. Los mapas de calor, también llamados heatmaps, nos proporcionan de manera visual y sencilla, que es aquello que despierta mayor interés, qué debemos mejorar, y qué cosas apenas funcionan o no suscitan interés alguno.

Hay ciertos «deberes» que son más prioritarios que otros depende lo que persigamos. Y si se trata de mejorar la navegación online de nuestros usuarios, los mapas de calor deben copar las primeras posiciones. Por eso mismo, vamos a ver de qué se tratan, y que utilidades nos ofrecen. Qué formas de sacarles partido podemos encontrar. Y qué recursos podemos encontrar para poderlos integrarlos en nuestros sitios.

¿Qué es un mapa de calor?

Un mapa de calor es una herramienta que nos permite saber el comportamiento de un usuario o usuarios mediante una representación de termografía en nuestra web. Desde dónde hace click, hasta por dónde ha pasado el ratón. También que cosas le han interesado más y cuánto tiempo ha permanecido en un lugar y ha dejado de hacerlo.

Para conocer las zonas de más interés, se emplea una escala de colores para determinar las zonas «más calientes» (de mayor interés) y las «más frías» (de menor interés). La gama de colores va desde los más fríos, comenzando por los azulados y verdes, hasta los más cálidos, como los naranjas, rojos y rojos oscuros. El poder identificar los focos de atención, permite tomar las decisiones oportunas para mejorar las experiencias de los usuarios y su interfaz para relacionarse con el lugar.

Tipos de mapas de calor

La representación termográfica de los Heatmaps, como hemos dicho, se representan en colores según su nivel de atención. Para ello, los colores se agrupan entorno a una polaridad «fría o caliente». Sin embargo, no existe un único tipo de mapa de calor. Estos pueden dividirse en 3 principales grupos dependiendo que es lo que queramos analizar. Desde los clicks, pasando por el movimiento del cursor, hasta el scroll que los usuarios hagan en nuestra web (opción interesante para scroll’s largos o infinitos, como tan de moda se han puesto).

Mapas de calor basados en los clicks (Clicks Heatmaps)

De largo, los más empleados. Permiten tomar decisiones para el corto plazo sobre la efectividad de elementos activos en nuestra web al registrar los clicks de los usuarios. De este modo, los elementos concretos que podemos modificar de manera rápida, son el centro de atención para los mapas de calor basados en los clicks. Además, al registrar las acciones de los usuarios, hacen que el grado de veracidad e importancia de estos mapas cobre más valor. Dan poco margen a datos confusos, porque analizan acciones concretas.

Mapas de calor basados en los movimientos del cursor (mouse movement heatmaps)

Este tipo de mapas funcionan muy bien en contraste y comparación con otros. Sobretodo por los estudios que existen en relación a que dónde el usuario coloca el cursor. Más de un 80% de las veces los ojos van hacia donde va el cursor. Y de igual modo más de un 80% de las veces la mirada del usuario no se acaba dirigiendo hacia dónde no ha ido el cursor. Esto significa que los datos sobre la atención del usuario, no son 100% exactos, al contrario de los clicks heatmaps. Sin embargo, son muy próximos a la realidad, y siguen resultando de grandiosa efectividad.

Mapas de calor basados en el scroll (scroll heatmaps)

Muy usados en páginas con mucho scroll o «infinito». De este modo, podemos analizar el nivel de profundidad del usuario al hacer scroll y qué zonas tienen más interés. Además, ayudan a determinar si está ocurriendo algún comportamiento inusual, como que los usuarios abandonan la página al ver un banner. Y es que depende el diseño y lo que se hable en un apartado, pueden llegar a interpretar que la página ha terminado y no hay más contenido. Algo que podemos evitar eliminando o cambiando el banner, por ejemplo.

Utilidades de los mapas de calor

El mayor beneficio que podemos sacar de los mapas de calor proviene de la interpretación que nosotros hagamos de ellos. Zonas que despiertan poco interés y queremos potenciar, o clicks en lugares como imágenes que no llevan a ningún lugar. Podemos extraer conclusiones de todos los comportamientos de los usuarios. En el caso de los clicks en banners o imágenes, que no llevan ningún enlace, se deduce que despiertan interés. Por lo tanto, sería interesante que ese click que los usuarios realizaron, les llevaran a algo más que se le podría ofrecer, añadiendo un enlace. En caso de no tener disponer de nada que hable o se relacione con ese elemento pasivo, se puede redirigir el click a algún otro elemento. La idea final gira entorno a evitar la frustración de clickar a algo sin efectos.

En el caso de los elementos activos hay que analizar que es lo que no funciona. Quizás un elemento no despierte interés o no se diferencie como un elemento activo y sea obviado. O bien porque se encuentra en una zona de otros elementos más atractivos que llaman la atención. En estos casos, o parecidos, se va a analizar para entender que es lo que está fallando, y remediar la situación.

• Ejemplo, resaltar un elemento: Quizás algún otro objeto está focalizando la atención. Por ejemplo, una llamada a la acción de colores poco llamativos situada al inicio de un post con una imagen despampanante. Sería interesante cambiar la tipología de la llamada la acción, cambiarla de lugar o ambas cosas.

Quiero tener mapas de calor, ¿dónde acudir?

Existen diversas plataformas que permiten incorporar un mapa de calor en nuestra web. Lo mejor de ellas es su efectividad, y lo malo es que mayormente son de pago. También pueden ayudar a la ralentización de carga de la web (sin ser una exageración), por lo de tener otro script instalado, además que convendrá modificar las cookies para advertir a los usuarios (algo sencillo de hacer).

• Yandex Metrica: En este caso es gratuita y se puede probar en su versión demo. Nos ofrecen mapas de calor de clicks y de scroll.
• Heatmap: Otra herramienta que es gratuita, eso sí, su interfaz es un poco complicada.

Existen otras herramientas que al ser pago no incluí, y que como las demás, podemos ver las valoraciones de ellas. Incorporar un mapa de color, sobretodo si tenemos una web donde ofrecemos servicios, cursos, suscripciones, productos o cualquier otra cosa, será una forma inteligente de optimizar su funcionamiento. De modo que al final, no solamente habremos mejorado la experiencia del usuario, sino los beneficios que nosotros mismos esperamos.