Mapas de calor

Cómo utilizar los mapas de calor para mejorar una web

Sí, lo sé, hay mil artículos acerca de cómo utilizar y sacar partido a los mapas de calor para mejorar las webs, pero he de confesar que me he leído unos cuantos, y la mayoría son refritos entre sí. Por lo que escribo este artículo con el objetivo de aportar mi granito de arena a la comunidad.

Y no, ni soy ningún gurú, ni pretendo serlo. Simplemente quiero aportar en base a mi experiencia. Aquí quiero aclarar un punto, el 95% de las veces que he trabajado mapas de calor, ha sido para clientes o marcas (entre las que se encuentran Royal Canin, Douglas, Viajes Carrefour…), y en una menor medida en el mundo nichos. Lo digo porque el tipo de análisis es muy diferente, en ambos casos el objetivo principal es aportar valor, y que se refleje en el negocio, pero si hablamos de marca, en ocasiones, ese valor no tiene un fin directo económico, a diferencia de quien trabaja nichos.

Vale, ahora que me he venido arriba, vamos al lío.

🔧 Herramientas de mapas de calor

  • Hotjar: mi favorita. Es el más usado en el mundo digital por su precio, facilidad de uso y por su versión gratuita. Si estás empezando, dale duro con Hotjar, si eres un experto… ¡no sé qué haces en este post! Es broma, sigue leyendo que sino me sube el % de rebote xD
  • CrazyEgg: la gran competencia de Hotjar. El mapa de calor es más completo que el de Hotjar, pero es de pago (tiene trial de 30 días).
  • AB Tasty: una de las herramientas más potentes del mercado, no sólo para heatmaps, sino para cualquier equipo de UX, CRO o Growth. Permite segmentar los mapas de calor, por ejemplo por usuarios recurrentes o nuevos usuario.

Hay más, pero con estas herramientas, ¡vas que chutas!

⛏ Cómo instalar herramienta de mapa de calor

Google Tag Manager es tu amigo. Si no lo usas, ¡ya estás tardando!. No es necesario que seas un crack de la analítica ni que tengas conocimientos técnicos para su uso. De hecho, te cuento por qué es una buena idea empezar con GTM:

  • No necesitas estar tocando código de la web, ¡así no la lías!
  • Puedes desactivar el script de la herramienta con un click desde Tag Manager.
  • Puedes segmentar y elegir en qué URLs quieres que se muestre el script, así evitas estar cargándolo en todas las URLs.
  • Centralizas en una herramienta todos los recursos y resto de herramientas, y es de la suite de Google, por lo que tendrás facilidad para conectarla con Optimize, Analytics, etc.
  • Aprendes el uso básico de Tag Manager y descubres todas sus posibilidades, que son infinitas.

Ahora, vamos a cómo meter Hotjar o cualquier otro script en tu web con Tag Manager.

  1. Tener instalado el contenedor de Google Tag Manager: para ello necesitarás crear una cuenta en GTM, e instalar los script que te da la herramienta. Uno en el <head> y otro, un noscript en el <body>. ¡No te olvides de los dos!
  2. Ir a «Etiquetas» y darle a «Nueva»: dentro de la etiqueta, pondremos el nombre que queramos, en «configuración de la etiqueta» buscaremos por Hotjar, y elegiremos esa opción:
Añadir etiqueta Google Tag Manager Hotjar
  1. ID de Hotjar: a continuación tenemos que ir a nuestra cuenta de Hotjar, y copiar el ID, que se encuentra dentro de «tracking». Sólo el ID, no es necesario copiar el script.
ID Hotjar
  1. Seleccionar activador: es decir, ¿cuándo queremos que se active Hotjar? Puedes crear un activador que sea «All pages» y se activará en todas las URLs. Si solo quieres trackear una URL concreta lo ideal es crear una condición para esa URL, y así evitamos la carga del script en todas las URLs. Aquí te dejo esta guía del gran Iñaki Huerta acerca de activadores en GTM.
activador URLs concretas Tag Manager
  • Publicamos contenedor: le damos a «Enviar» y publicamos la actualización del contenedor. Ahora, toca comprobar en el DOM de las URLS de nuestro site que se lanza el script, y luego verificar la instalación en Hotjar. ¡Ya estaría!

🔥 Y a todo esto… ¿Qué es un mapa de calor?

Un mapa de calor o heatmap es una herramienta cualitativa que permite representar de forma visual el comportamiento de los usuarios de:

  1. Dónde hacen click: mapas de clicks que representan dónde hacen clicks los usuarios según dispositivo.
  2. Cómo mueven el ratón: sin eyetracking detrás, son los menos fiables. Miden, en desktop, por dónde pasa el usuario el ratón.
  3. Hasta dónde hacen scroll: detectan en qué punto abandonan los usuarios la página.

Estos son los 3 tipos de mapas de calor más frecuentes, pero no los únicos. Y ¡ojo! La aplicación no es solo web o App, sino como viene diciendo desde hace tiempo Natzir, puede ser útil, por ejemplo, analizar desde el punto de vista de mejora del CTR con los titles en la SERP.

heatmap Google
Fuente: https://twitter.com/natzir9/status/1268464297379848194

No confundir los mapas de calor con las grabaciones de usuarios o recordings, ya que muchos software, como Hotjar, las ofrecen también, y aunque son herramientas cualitativas que pueden ser complementarias, tienen diferente uso.

¿Cómo se interpretan los heatmaps? Cuánto más cálido (rojo) es el color, indica mayor interacción por parte de los usuarios. De ahí su nombre. Esto nos va a permitir a golpe de vista sacar varias conclusiones, pero es importante que la muestra sea representativa.

📋 Uso de los mapas de calor

Están muy chulos, sí, pero no por ello hay que usarlos sin sentido. Cada herramienta tiene un fin que puede valer para sacar insights de valor o reafirmar otros. ¿Qué partido le podemos sacar a los mapas de calor?

Nos tenemos que preguntar…

Antes de empezar a usar la herramienta deberíamos tener dudas, y preguntas que la herramienta nos va a ayudar a resolver. Aquí va un batiburrillo de posibles preguntas:

  • ¿Llegan a ver todos los productos de una categoría?
  • ¿En qué momento abandonan la ficha de producto?
  • ¿Las interacciones de crosseling tienen la suficiente visibilidad?
  • ¿Leen todo el contenido de mi artículo?
  • ¿El CTA se lleva la mayoría de los clicks?
  • ¿Entienden este elemento de diseño como una interacción?
  • ¿Los usuarios se están atascando en el algún campo de un form?
  • ¿Dónde debería poner el contenido o copy más importante?
  • ¿Reciben clicks las lineas de negocio más importantes en el menú? (descubre aquí: cómo hacer la arquitectura informacional de una web)
  • ¿No se ven los USP de mi marca? (echa a un ojo a este caso de estudio donde se hizo test A/B con insights en base a los mapas de scroll)

¿No sabes cómo sacar más ideas o ver si hay más fricciones? Utiliza la regla de los 5 ¿por qué?, una técnica para realizar preguntas y explorar las relaciones de causa y efecto de un problema particular.​

Es probable que no tengas dudas, y simplemente estés en la fase de research cualitativo y hayas elegido esta herramienta, entre otras, para detectar problemas. Bien, aquí mi consejo es tener muy claro cómo utilizar la herramienta, eso os lo cuento más adelante en el artículo, pero antes, vamos a ver los problemas más frecuentes que podremos detectar con los mapas de calor.

Problemas de diseño y usabilidad

  • Clicks inválidos: hacen click en secciones o elementos de diseño que no permiten interacción. Por lo tanto, se detecta un diseño que no está pensando en el usuario, ya sea porque no sigue los modelos mentales comunes, o porque incita al click cuando es tan solo un elemento decorativo. Por ejemplo: cuando se utilizan carruseles con logos de las marcas y no se enlaza a nada, ahí se pierden clicks de usuarios que quiere conocer más.
  • Priorizar y ordenar elementos: si tenemos una serie de elementos clicables juntos para que el usuario elija a dónde ir, podemos observar cuáles son los más frecuentes a nivel de click y cambiar la disposición en base al interés. Especialmente importante a la hora de mostrarlos en móvil, ya que suelen presentarse en vertical. En este punto hay que muy de la mano de negocio (qué se vende y qué interesa vender).
  • Elementos de información poco efectivos: elementos visuales que pueden no ser claros para todos los usuarios, especialmente si trabajamos con diferentes tipos de buyer personas, y pueden pasar desapercibidos al no estar representados de forma clara (suele pasar al querer ahorrar espacio y hacer diseños más limpios en móvil). Por ejemplo: los tooltips de determinados campos como los de gastos de envío, o de determinados campos de un formulario que se despliegan solo con mouseover o haciendo click.
  • Diferencias entre dispositivos: aunque hayamos hecho diseño pensando en MFI, según negocio puede que el comportamiento y el journey sea diferente. Aquí vamos a analizar clics y scroll en los diferentes dispositivos para ver diferencias.

Problemas de negocio y conversión

  • Estacionalidad en el menú de navegación: desde negocios que son generalistas y estacionales, hasta más nichos donde vemos que la mayoría de de clicks se van a secciones que no mostramos en el menú principal y está en otro menú secundario. Por ejemplo: si tenemos una web de viajes, tiene sentido entender necesidades de usuarios y saber dónde hacen clicks en el menú de navegación principal, que será diferente en enero y en agosto, y adaptarnos según el momento.
  • En qué sección de la página abandona el usuario: gracias a conocer la media del scroll, podemos detectar si llegan a ver lo que nos interesa, si debemos utilizar elementos visuales o de copy para mejorar la retención, o simplemente cambiar de ubicación secciones. Por ejemplo:
  • Hacen click en el CTA: sí, sabemos que esto se puede hacer con Test A/B, pero sabiendo qué secciones de la página reciben más clicks, o donde pone el foco de atención el usuario, nos ayudará a ver si nuestros CTA son suficientemente visibles.
  • Mejor ubicación para mejorar la conversión: de la mano de saber si hacen clicks en nuestros CTA, podemos saber cuáles son los sitios más propicios para poner publicidad (en el caso de blogs), CTA o formularios.

🔎 Cómo analizar un mapa de calor

Os cuento cómo lo hago yo, que varía en función de la necesidad, contexto y cliente. A veces, esta herramienta la he usado para reafirmar insights obtenidos con otras herramientas, a veces como herramienta principal para confirmar ideas, a veces con foco en una página muy concreta, otras veces analizando varias plantillas… En definitiva, que según el objetivo que tengamos cambiará la forma de analizar. Os dejo los casos más comunes:

Análisis de URL concreta

¿Cuándo se suelen analizar URL concretas? Cuando ya hemos detectado problemas concretos (por ejemplo, caídas en el funnel), como puede ser en la URL del carrito, o cuando queremos entender comportamientos concretos en URLs concretas.

Para hacer el setup de este tipo de análisis tan solo tienes que poner le URL concreta que quieres analizar:

Análisis de URL concreta Hotjar

Sobre el mismo documento vamos a ordenar los resultados del mapa de calor ordenando de más clicks a menos. Por un lado plasmamos datos objetivos, y luego analizamos y detallamos problema y posibles soluciones (hipótesis). Siguiendo con el ejemplo del análisis de la URL del carrito: si del 100% de clicks, un 12% de clicks (mayor %) se lo llevan el título de un campo y su placeholder, el cuál es muy superior al resto de campos, habrá que detenerse ahí y:

  1. Analizar si hay algún problema que nosotros (equipo/product managers/etc) mismos podamos detectar.
  2. Llevar a test de usuario, entrevistas u otras herramientas cualitativas, para poder entender qué está pasando, si es que hay algún problema.
heatmap como analizarlo
Puedes descargar la plantilla aquí: https://drive.google.com/file/d/1PvOruOMOi5l3F_vvOZXZQG2VWU8HPWHY/view?usp=sharing

Análisis por plantillas

Especialmente recomendable si tienes ecommerce o sites grandes que utilizan mismas plantillas por ejemplo en fichas de productos o categorías.

Para hacer el setup de plantillas tendrás que tener en cuenta la estructura de URLs de tu dominio, y ahí podrás jugar con patrones, expresiones regulares (aquí tienes una guía by Hotjar), etc:

analisis heatmaps

A la hora de hacer el análisis podéis seguir la misma plantilla que usarías si fuera un análisis de una única URL. La diferencia es que aquí tenéis una muestra mayor de un conjunto de páginas que tienen estructura muy similar o idéntica. Es decir, si analizáramos URL por URL todas las fichas de producto, veríamos las particularidades de cada una, y luego tendríamos que hacer un trabajo enorme de unificar conclusiones, de esta manera tenemos conclusiones más genéricas.

Análisis de diferentes URLs

Analizamos varias URLs relacionadas de manera independiente pero dentro de un conjunto más amplio. Aquí no tiene sentido analizar como conjunto, sino analizar cada URL de forma individual, y luego sacar conclusiones concretas por cada URL, y también de forma genérica, al ser URL «similares».

Por ejemplo, un negocio de venta se seguros que tiene 10 URLs tipo seguro de viajes, seguro de coches, seguro del hogar, etc, y que cada una tiene su propia estructura y objetivo.

  1. Por un lado analizamos cada URL en una sola fila, con datos objetivos, y con posibles problemas detectados.
  2. Por otro lado, en otra pestaña (Insights e hipótesis) establecemos hipótesis que puedan afectar al conjunto de URL o de forma individual. Y las priorizamos.
Mapa de calor análisis
Puedes descargar la plantilla aquí: https://drive.google.com/file/d/1PvOruOMOi5l3F_vvOZXZQG2VWU8HPWHY/view?usp=sharing

🔦 Ejemplos de uso de heatmaps

Vamos a ver algunos ejemplo (ojalá pudiera dar más, pero por cuestión de confidencialidad…)

No se ven los beneficios de comprar en un ecommerce

Cuento y detallo el caso, con experimento incluido, en este artículo: Test A/B above the fold.

Resumen: se observó como en móvil los usuarios no veían los beneficios USP (Unique Selling Proposition) de un ecommerce. Es decir, esta sección en móvil estaba ubicada justo antes del footer, por lo que los usuarios no llegaban a ver que había gastos de envío gratis, servicios posventa, etc cuando aterrizaban por primera vez en la home, o en cualquier otra página. Se hizo un test cambiando la posición de esta sección para validar la hipótesis.

Mapas de calor

Mejorar ingresos de un blog con afiliación y/o publicidad

Si eres propietario de un blog seguramente quieras aumentar los ingresos por afiliación o por publicidad, y aquí entender el comportamiento de los usuarios es fundamental, además de los datos.

Se pueden utilizar test A/B y obtener conclusiones cuantitativas más finas, pero sabiendo donde ponen foco los usuarios, es decir, donde hacen click, nos van a guiar para optimizar y mejorar la conversión. En el caso del ejemplo de abajo, tenemos un enlace de afiliación con un fondo resaltado recomendando un hotel concreto (arriba está la foto) y abajo un script enorme de Booking con las ofertas de los hoteles. Fijaros donde se va el click, a la recomendación, y no a Booking. UX copyrighting, persuasión o como lo queramos llamar.

heatmap blogs

(Ya iré actualizando con nuevos ejemplos 😉 )

✌️ Tips para usar los mapas de calor

  • Bloquea las diferentes IPs: la tuya, la de tu casa, oficina, y la de cualquier persona que trabaje para la web. Imagina que trabajas en agencia, ahí habría que bloquear las IPs de: oficina agencia, oficina cliente, casas de personas que teletrabajen y estén relacionadas con el proyecto.
  • Mejor en equipo: a la hora de analizar los mapas de calor mejor trabajar en equipo que tú solo. Y es que la subjetividad es el peor aliado del research cualitativo. Un equipo de 2-4 personas es suficiente.
  • Verifica: aunque trabajéis en equipo es posible que hagáis falsas hipótesis si solo os basáis en esta herramienta. Lo ideal es que sea un complemento de otras cualitativas (entrevistas, test de usuarios, etc) y de cuantitativas.

5 / 5 (2 votos)

¡no hay votos!. Sé el primero en puntuarlo

Escrito por
Miguel Palau
Únete a la discusión

«La única forma de hacer un gran trabajo, es amar lo que haces» Steve Jobs.