Mapas de calor y grabaciones de sesión: qué mirar y qué conclusiones sacar

La primera vez que un cliente ve grabaciones de su propia web suele quedarse callado un buen rato. Me pasó hace poco con la dueña de una tienda online de productos gourmet. Llevaba meses convencida de que su web «funcionaba bien» y, en diez minutos, vio a tres personas distintas pulsar una y otra vez sobre la foto de un producto que no llevaba a ninguna parte, y a otra subir y bajar buscando los gastos de envío. Nadie se lo había contado nunca, porque quien se frustra en una web casi nunca escribe para decirlo: simplemente se va.

Los mapas de calor y las grabaciones de sesión son eso: una ventana a lo que pasa cuando nadie del equipo está mirando. Son de las herramientas más reveladoras que existen para mejorar una web, y también de las más fáciles de malinterpretar. Una mancha roja en un mapa invita a sacar conclusiones rápidas, y algunas son equivocadas.

En esta guía te cuento cómo los usamos en el estudio: qué configurar, qué mirar, qué conclusiones son fiables y cómo convertir lo que ves en cambios que mejoran la experiencia.

01Qué son y qué te cuenta cada tipo de mapa

Un mapa de calor (heatmap) superpone sobre una página el comportamiento agregado de muchas visitas, con colores cálidos donde hay más actividad. Una grabación de sesión reproduce, de forma anónima, lo que hizo una persona concreta: dónde pulsó, cómo se movió, hasta dónde bajó, dónde dudó. Los mapas te dan el patrón; las grabaciones, la historia.

Las señales automáticas de frustración

Las herramientas actuales detectan solas algunos comportamientos que merecen atención. Merece la pena conocerlos por su nombre:

• →Clics de rabia (*rage clicks*): varios clics rápidos en el mismo punto. Casi siempre indican algo que no responde o que tarda demasiado.
• →Clics muertos (*dead clicks*): clics sobre algo que no hace nada, como una imagen, un icono decorativo o un texto subrayado que parece un enlace.
• →Scroll excesivo: subir y bajar repetidamente, señal de que la persona busca algo que no encuentra.
• →Retroceso rápido (*quick back*): entrar en una página y volver atrás enseguida, porque no era lo que esperaba.
• →Errores de JavaScript asociados a la sesión, que ayudan a encontrar fallos técnicos que solo ocurren en ciertos dispositivos.

02Cómo configurarlos bien desde el principio

Una buena lectura empieza por una buena configuración. Estos son los pasos que seguimos al instalar una herramienta como Microsoft Clarity (gratuita y sin límite de tráfico) o Hotjar:

1. 01Instala el código en todas las páginas o a través de Google Tag Manager, y comprueba que registra visitas de escritorio y de móvil.
2. 02Conecta el consentimiento. La herramienta debe activarse solo cuando la persona acepta las cookies correspondientes. Clarity y Hotjar ofrecen integración con las plataformas de gestión del consentimiento habituales. Lo explicamos con más detalle en RGPD y cookies en tu web.
3. 03Revisa el enmascaramiento de datos. Por defecto, ambas ocultan lo que se escribe en los campos de formulario. Comprueba también zonas con datos personales visibles, como el área de cliente o la página de confirmación de pedido.
4. 04Conecta con tu analítica si la herramienta lo permite (Clarity se integra con GA4), para poder filtrar grabaciones de quienes abandonaron un embudo concreto.
5. 05Etiqueta eventos clave, como «añadir al carrito» o «enviar formulario», para filtrar sesiones por lo que hicieron.
6. 06Excluye el tráfico interno del equipo, que distorsiona los mapas de las páginas que más se revisan.

Para enmascarar zonas concretas basta con un atributo en el HTML. Así se hace en las dos herramientas más usadas:

<!-- Microsoft Clarity: oculta el contenido de este bloque en grabaciones y mapas -->
<section class="datos-pedido" data-clarity-mask="True">
  <p>Envío a: María López, calle Real 12, Estepona</p>
</section>
<!-- Hotjar: suprime el contenido de este elemento -->
<div class="area-cliente" data-hj-suppress>
  <p>Saldo de puntos: 1.240</p>
</div>

03Qué mirar: un recorrido por las páginas clave

Con la herramienta funcionando unas semanas, toca mirar. La clave es hacerlo con preguntas, no con curiosidad sin rumbo. Esta es la secuencia que solemos seguir.

En la portada y las páginas de entrada

• →¿Dónde se concentran los clics? ¿Coinciden con lo que queremos que la gente haga?
• →¿Hay clics en elementos que no son enlaces, como fotos, iconos o titulares? Cada uno es una petición: la persona quería ir ahí.
• →En el mapa de scroll, ¿qué porcentaje llega a la propuesta de valor, a las pruebas de confianza y a la llamada a la acción principal?

En fichas de producto o servicio

• →¿Se pulsa la galería, las pestañas de información, la tabla de tallas o de tarifas?
• →¿Aparece scroll excesivo antes de añadir al carrito? Suele indicar que falta información (plazos, envíos, garantías) cerca del botón.

En formularios y procesos de compra

• →Filtra las grabaciones de quienes empezaron y no terminaron.
• →Observa en qué campo se detienen, cuál borran y reescriben, qué error aparece.
• →Fíjate en el móvil: teclados que tapan el botón, selectores de fecha difíciles, campos que no admiten el formato que la persona escribe.

Cómo ver grabaciones sin perder la tarde

Ver grabaciones engancha y consume horas. Lo que funciona es un protocolo sencillo: elige una pregunta («¿por qué se abandona el paso de envío?»), filtra 20 o 30 sesiones relevantes, míralas a velocidad doble saltando la inactividad y anota en una hoja cada comportamiento repetido. Al final cuenta cuántas veces aparece cada uno. Un problema que ves en 8 de 25 sesiones es una prioridad; uno que ves en una sola es una anécdota.

Clave: un mapa de calor te dice dónde mirar; las grabaciones te dicen qué está pasando ahí; solo la investigación o un test te dice por qué y si tu solución funciona.

04Qué conclusiones son fiables (y cuáles conviene matizar)

Aquí es donde se juega todo. Estas son las lecturas que en el estudio consideramos sólidas y las que preferimos tratar como hipótesis.

Conclusiones sólidas

• →Un clic muerto repetido en el mismo elemento indica que parece interactivo. O lo haces interactivo, o cambias su aspecto.
• →Clics de rabia en un botón o un selector apuntan a un fallo, a una respuesta lenta o a una falta de feedback visual tras pulsar.
• →Una caída brusca en el mapa de scroll en un punto concreto suele indicar un «falso final»: una franja que parece el pie de página o un bloque que corta la lectura.
• →Un patrón repetido en muchas grabaciones en el mismo paso de un proceso es un problema real de diseño.

Lecturas que conviene contrastar

• →«Nadie llega al final de la página». Es normal y no siempre es un problema; a menudo quien quiere actuar lo hace antes. Según la investigación de Nielsen Norman Group sobre la mirada en la web, la mayor parte del tiempo de visualización se concentra en la primera pantalla, y la atención decrece a medida que se baja. Lo importante es que lo esencial esté arriba y que lo de abajo responda a quien sigue buscando.
• →«El cursor se mueve por aquí, así que la gente mira aquí». La correlación entre cursor y mirada es parcial y varía mucho entre personas. Para eso existe el eye tracking, que tratamos en patrones de lectura y eye tracking.
• →«Esta zona está roja, así que funciona». Muchos clics pueden indicar interés o confusión. Las grabaciones te dirán cuál de las dos.
• →Conclusiones con pocos datos. Espera a tener un volumen razonable por página y analiza móvil y escritorio por separado; son experiencias distintas con mapas distintos.

05Un ejemplo resuelto: la tienda gourmet

Vuelvo a la tienda del principio para enseñarte cómo pasamos de observar a mejorar.

Lo que vimos en cuatro semanas de datos, con varios miles de sesiones en móvil:

1. 01Clics muertos en las fotos de los productos de la portada, que no enlazaban a su ficha.
2. 02Scroll excesivo en la ficha de producto: mucha gente subía y bajaba antes de añadir al carrito o de irse.
3. 03En las grabaciones del carrito, un patrón repetido: la persona veía los gastos de envío en el último paso y volvía a la tienda o cerraba la pestaña.
4. 04Clics de rabia en el selector de cantidad del móvil, cuyos botones de más y menos medían unos 20 píxeles.

Lo que cambiamos.

1. 01Todas las fotos de producto pasaron a enlazar con su ficha. Era una corrección directa, sin necesidad de test.
2. 02Añadimos junto al botón de compra un bloque breve con el plazo de entrega, el coste de envío y el importe para envío gratuito.
3. 03Mostramos los gastos de envío estimados desde el carrito, no solo en el último paso.
4. 04Agrandamos los controles de cantidad hasta 44 píxeles, la referencia que usamos para objetivos táctiles importantes.

Cómo lo validamos. Los cambios 1 y 4 eran correcciones de usabilidad evidentes y se implantaron sin más. El 2 y el 3 afectaban a la propuesta y los planteamos como hipótesis medibles; cuando el tráfico lo permite, ese es el momento de un test A/B bien planteado. Un mes después, los clics muertos y de rabia en esas zonas prácticamente habían desaparecido y el abandono en el carrito había bajado de forma visible en la analítica.

06De la observación a la mejora continua

Lo más valioso de estas herramientas llega cuando se integran en una rutina. Te propongo una muy sencilla:

• →Cada mes: media hora revisando los mapas de las cinco páginas con más tráfico y las alertas de frustración.
• →Tras cada cambio importante: dos semanas de datos y una sesión de grabaciones centrada en lo que ha cambiado.
• →Cuando una métrica se mueve: grabaciones filtradas por el segmento afectado para entender qué ha pasado.
• →Siempre: una hoja con lo observado, la hipótesis, la decisión tomada y su resultado. Si quieres conectar estas observaciones con indicadores de experiencia, mira la guía de métricas de UX.

En SIMA usamos mapas de calor y grabaciones como parte del diseño web y la experiencia digital, antes de un rediseño para entender qué pasa y después del lanzamiento para afinar. Si quieres que miremos juntos cómo se usa tu web de verdad, escríbenos y lo vemos.