¿Qué es un Heatmap?
Un heatmap o mapa de calor es una representación visual que muestra, mediante colores, dónde hacen clic, hasta dónde hacen scroll y cuánto tiempo se detienen los usuarios en una página web. En lugar de leer informes con cientos de filas de datos, ves de un vistazo las zonas "calientes" (mucha interacción) y las zonas "frías" (poco interés).
En el ecosistema DTC y e-commerce español, herramientas como Hotjar, Microsoft Clarity, Crazy Egg o Contentsquare se han convertido en estándar para auditar landings, fichas de producto y checkouts. Un heatmap no te dice *por qué* el usuario no compra, pero te señala *dónde* está el problema para que lo investigues.
En palabras simples: si tu web fuera una tienda física, el heatmap sería el mapa de huellas en el suelo. Donde más pisadas hay, más atención; donde el suelo está limpio, algo falla.
Analogía: el mapa de calor de un centro comercial
Imagina que tienes una tienda física en Gran Vía. Colocas sensores en el suelo y descubres que:
- El 90% de los visitantes se detiene frente al escaparate principal.
- Solo el 12% llega hasta la zona de caja.
- Hay un pasillo entero que nadie recorre.
Eso es exactamente un heatmap digital. Las zonas rojas son tu escaparate estrella; las azules, ese pasillo muerto que en tu web equivale a un CTA enterrado, una ficha de producto mal maquetada o un formulario que nadie ve.
Fórmula: cómo se calcula la intensidad
Los heatmaps de clics suelen usar una función de densidad de kernel (KDE) para suavizar los puntos de interacción:
$$
I(x,y) = \sum_{i=1}^{n} \frac{1}{2\pi\sigma^2} \, e^{-\frac{(x-x_i)^2 + (y-y_i)^2}{2\sigma^2}}
$$
Donde:
- $I(x,y)$ = intensidad de calor en la coordenada $(x,y)$
- $n$ = número de clics registrados
- $(x_i, y_i)$ = posición del clic $i$
- $\sigma$ = ancho de banda (controla el difuminado)
En la práctica no necesitas calcularlo: la herramienta lo hace por ti. Lo importante es entender que más clics en una zona = más calor, y que el color se normaliza respecto al máximo de la página.
Métricas clave asociadas
| Métrica | Definición | Benchmark e-commerce ES |
|---|---|---|
| Click-through rate (CTR) en CTA | Clics / impresiones del botón | 3% – 8% en home; 8% – 15% en ficha |
| Scroll depth | % de página recorrido | 50% en móvil, 70% en desktop |
| Rage clicks | Clics repetidos en zona no clicable | < 2% del total de clics |
| Time to first click | Segundos hasta el primer clic | 5 – 12 s |
| Dead clicks | Clics sin respuesta | < 3% ideal |
Heatmap vs. otras herramientas de analítica
| Herramienta | Qué mide | Cuándo usarla |
|---|---|---|
| **Heatmap** | Dónde interactúa el usuario | Detectar zonas ignoradas o sobrecargadas |
| **Session replay** | Cómo navega el usuario paso a paso | Entender fricción en checkout |
| **Funnel analysis** | Dónde abandona el usuario | Optimizar pasos de conversión |
| **A/B testing** | Qué variante convierte más | Validar hipótesis tras ver heatmap |
| **Scroll map** | Hasta dónde llega el scroll | Colocar CTAs y pruebas sociales |
Un flujo profesional típico sería: heatmap → hipótesis → A/B test → medir impacto en CR.
Aplicaciones concretas en DTC español
1. Ficha de producto
Coloca un heatmap sobre tu PDP y observa si los usuarios hacen clic en las fotos secundarias o si ignoran la tabla de tallas. En moda, por ejemplo, si el 65% de los clics se concentra en la primera imagen y solo el 4% abre el selector de talla, probablemente tengas un problema de información (o de UX en móvil).
2. Checkout
Un heatmap de clics en el formulario de pago revela rage clicks en campos que no responden o dead clicks en el botón "Aplicar cupón". Cada rage click en checkout puede costarte entre 0,5 y 2 puntos de conversión.
3. Landing de campaña
Si lanzas una promo de Black Friday y el heatmap muestra que el 80% del scroll se detiene antes del bloque de productos, tu hero ocupa demasiado espacio. Reduce altura y sube el grid.
4. Menú de navegación
En móvil, un heatmap sobre el menú hamburguesa te dice qué categorías se tocan más. Si "Ofertas" recibe 3x más clics que "Novedades", reordena.
5. Email → landing
Cruza el heatmap con la fuente de tráfico. Los usuarios que llegan desde email suelen tener un patrón de clic distinto al de paid social: más intención, menos exploración.
Errores comunes
1. Interpretar el heatmap como verdad absoluta. Un clic no es una conversión. Muchos clics en un botón pueden significar confusión, no deseo.
2. Ignorar el dispositivo. Un heatmap de desktop no se parece en nada al de móvil. Analízalos por separado.
3. No segmentar por fuente de tráfico. Mezclar paid, orgánico y email distorsiona el patrón.
4. Olvidar el scroll combinado. Un heatmap de clics sin scroll map te da una foto incompleta.
5. Tomar decisiones con pocos datos. Necesitas mínimo 1.000 sesiones por variante para conclusions fiables; idealmente 5.000+.
6. Confundir heatmap con eye-tracking. El heatmap mide interacción, no mirada. Un usuario puede mirar sin hacer clic.
Términos relacionados
- Scroll map: variante del heatmap que muestra hasta qué punto de la página llega el usuario.
- Click map: heatmap específico de clics.
- Move map: heatmap de movimiento del cursor (proxy de atención en desktop).
- Rage click: clics repetidos y rápidos en una zona no interactiva, señal de frustración.
- Dead click: clic en un elemento que no responde.
- Session replay: grabación de la sesión del usuario, complementaria al heatmap.
- Funnel analysis: análisis de pasos hasta la conversión.
- A/B testing: experimentación controlada para validar cambios surgidos del heatmap.
- CRO (Conversion Rate Optimization): disciplina que engloba todas estas técnicas.
Conclusión
El heatmap es la herramienta más rápida para ver la web con los ojos del cliente. No sustituye al análisis de datos ni al testing, pero acelera la detección de fricciones. En un mercado DTC español cada vez más competitivo, donde el CAC sube y el margen se estrecha, optimizar la conversión con heatmaps es una de las palancas con mejor ROI. Empieza por tu PDP y tu checkout: ahí está el dinero.