Los mapas de calor son una forma sencilla y eficiente de analizar la interacción del usuario y su comportamiento en la web.

Si estás en un proyecto de optimización de la conversión (también conocido ahora como CRO) es indispensable ejecutar algunos mapas de calor como el de clic, el movimiento del ratón o los de desplazamiento.

¿Cómo funciona un mapa de calor?

Un mapa de calor se crea mediante la grabación de todos los clics y movimientos que los usuarios hacen en una web. Es una de mis partes preferidas de la analítica porque no todo son números y esta nos permite validar suposiciones e iniciar investigaciones de una forma rápida.

Os cuento, se divide en una escala de colores que van desde el rojo al azul. El color rojo es el “más caliente”, el punto más frecuentado. En el otro extremo, el azul, es la parte “más fresca”, la menos frecuentada. Es un formato de visualización agradable y fácil de interpretar, que te ayuda a entender qué parte de tu página atrae la mayor atención del usuario.

Herramientas de mapas de calor

He probado cada una de las herramientas de mapas de calor que hay actualmente. Entre ellas están Hotjar, CrazyEgg, Smartlook, Mouseflow, Clicktale, e incluso Google Analytics. De entre todas ellas, mis preferidas son Hotjar y Smartlook. Me encantan esas herramienta. Ofrecen muchas características interesantes para un precio muy competitivo.

mapas de calor smartlook

¿Qué nos ofrece un mapa de calor?

Dentro de un mapa de calor hay varias opciones.

1. Mapa de calor de clic

Imagina por ejemplo que tienes una landing page con cuatro botones. Un mapa de calor de clic puede enseñarte dónde se hicieron más clics para que tengas un indicio por el que investigar y empezar los test A/B. Se representan mediante la escala que os he comentado antes de rojo a azul. Los puntos rojos son dónde se han hecho más clics.

2. Movimiento de ratón

Hay quienes defienden que existe una correlación de entre el 80-90% entre los movimientos de los ojos y el ratón. ¿Cuándo tenemos que usar este mapa de calor? Por ejemplo en las páginas de producto, en las que los usuarios pasan mucho tiempo leyendo descripciones y mirando imágenes de productos sin que lleguen a hacer clic.

Basándonos en dónde mueven el cursor podemos concluir qué parte de la página estaban viendo y obtener una buena estimación de que parte de texto han leído y que parte no han leído.

3. Profundidad del scroll

Te sorprenderías si supieras cuánta gente no se desplaza nada por la página. A lo largo de los últimos meses he analizado muchísimas páginas y muy diferentes, y apenas he visto una en la que más del 60% de los usuarios se hayan desplazado por debajo de la mitad.

Con esta opción es muy fácil saber por ejemplo, cuánto porcentaje de usuarios llegan al final de tus artículos. Algo importante aquí es el cambio entre desktop, mobile y tablet, ya que estos dos últimos dispositivos son más propensos a provocar el desplazamiento.

Este mapa se representa mediante una graduación de rojo, parte superior de la página, a azul, que debería estar más allá de la mitad de la página.

4. Grabación de la sesión

Da un poco de cosa pero me encanta esta opción de los mapas de calor. Esta parte son vídeos que nos muestran todo en uno, dónde se hizo clic, hasta dónde bajaron el scroll, si luego subieron, y en definitiva todo lo que hayan hecho en nuestros dominios.

Importante aquí, aunque las herramientas lo elimina por política de derechos, si tienes una tienda revisa que no te quedas con los datos de la tarjeta de crédito.

 

¿Cómo implementar un mapa de calor?

Muy fácil. Obviamente primero tienes que usar alguna de las herramientas que te he citado antes. Cuando lo hagas, tienes que implementar un código javascript que puedes hacer mediante Google Tag Manager.

Hotjar lo explican muy bien en su blog. Y qué mejor que ellos, con vídeos y un chat interactivo en el que puedes preguntarles.

Mapas de calor como parte de la estrategia de análisis

Yo personalmente uso los mapas de calor cuando tengo una suposición y quiero optimizar algún proceso o alguna parte de la web. Es un primer paso en el que también incluyo tests de usabilidad con usuarios reales en los que puedo ver con mis propios ojos sus interacciones.

Esto ayuda a que tengamos más claro dónde queremos hacer el análisis con los mapas de calor, que aunque puedes hacerlo en todo el site, en los que son muy grandes corres el riesgo de perder algunos datos o no centrar el foco dónde está el problema.

Como segundo paso después de los tests de usabilidad me gusta ir a Google Analytics y ver en Comportamiento – Contenido del sitio – Páginas de Aterrizaje las que tienen un mayor tráfico e impacto en los resultados de conversión.

Una vez que hemos terminado con los anteriores, por lo general es de esperar que tengas una lista de unas 10-12 páginas susceptibles de poner un mapa de calor. En esta fase es necesario que planteemos alguna hipótesis como “quiero tener el 10% de los clics en este CTA” o “espero que el 50% de los usuarios hagan scroll hasta tal punto” como ejemplos.

Destacar que un mapa de calor no es una técnica definitiva sino que tienes que validarlo con más datos. ¿Recuerdas cuándo escribí un artículo sobre analítica y usabilidad? Pues algo parecido porque después de todo siguen los test A/B.

Beneficios de un mapa de calor

Una vez más: si haces un análisis, lo haces con un propósito determinado. En este caso, como ya he citado, el siguiente paso a todo esto son los test A/B.

Un test que con datos sólidos son mucho más fáciles. Y aunque no hay directrices exactas sobre cómo leer los datos de los mapas de calor sin conocer el contexto, te dejo cuatro cosas que he aprendido en estos años:

  1. Si ves más del 75% de los clics en el menú principal: en algunas páginas he visto como los usuarios interactúan con el menú superior cuando llegan a la portada. En este caso, si el menú no está adherido a la parte superior es una buena idea probar con un test A/B. He tenido casos en los que con solo ese detalle incrementas las conversiones.
  2. Si ves que menos del 30% de los usuarios se desplaza: intenta poner el contenido más importante en zonas dónde puedan verlo a la primera por encima de la mitad superior de la página.
  3. Análisis de formularios y embudos: una forma muy fácil de entender los embudos de conversión, por ejemplo el de registro, es hacerlo contando los clics reales en los diferentes campos. Los mapas de calor nos pueden dar aquí muchas ideas.
  4. Si ves que nadie hace clic en tus CTA: los CTA son una de las partes más importantes de una web. Primero define que significa que los usuarios no hagan clic ahí. ¿Es que no están interesados? No lo sabes, tal vez sea el mensaje o su ubicación. Intenta comprender las necesidades y la lógica por las que no se hace clic ahí, y esto no puede ser otra cosa que más análisis.

Como ya he dicho, estoy generalizando mucho con cuatro ejemplos muy sencillos. Los habrá muchos. No los utilices sin un objetivo ni contexto y recuerda que después de ellos tienes que validar hipótesis con más datos e incluso con tests A/B.

La conclusión aquí es que un mapa de calor es muy fácil para los datos de utilidad que nos pueden dar. Por último recuerda que el proceso es hacer estudios previos (por ejemplo, tests de usabilidad e informes personalizados de Analytics) para entender lo que está pasando y preparar el mejor test A/B posible.