≡En resumen
- Un heatmap traduce números a colores: rojo o amarillo para mucha actividad, azul o verde para poca.
- «Mapa de calor» es la familia; el clickmap, el scroll map o el mapa de atención son tipos concretos.
- Cada tipo responde a una pregunta distinta: qué se pulsa, qué se llega a ver o en qué se detiene la mirada.
- Un mapa de calor muestra qué pasa, no por qué: hay que combinarlo con grabaciones, analítica y tests.
- Para que sea fiable necesita suficientes visitas y separar móvil de escritorio.
01 ¿Qué es un heatmap o mapa de calor?
El concepto no nació en el marketing. Los mapas de calor se usan en meteorología, genética, finanzas, deporte o demografía. En marketing digital el término se ha asociado a los informes de comportamiento sobre una web o una app, que es lo que busca quien quiere mejorar una página.
02 Origen e historia del mapa de calor
-
1
1873: la matriz de Loua
El estadístico Toussaint Loua usa una matriz sombreada a mano para comparar estadísticas sociales de los distritos de París. Es el primer ejemplo conocido.
-
2
1991: nace el término
El diseñador de software Cormac Kinney registra «heat map» como marca para un programa que mostraba en tiempo real datos de los mercados financieros.
-
3
1994: mapas de calor por ordenador
Leland Wilkinson crea en SYSTAT el primer programa que genera mapas de calor de clúster en color de alta resolución.
-
4
2006: término libre
La marca, que había pasado a SS&C Technologies, se anula y «heat map» queda como nombre genérico.
-
5
Años 2000-2020: la web
Las herramientas de analítica de comportamiento popularizan los mapas de clics y de scroll para diseño y conversión.
03 Tipos de mapas de calor en una web
| Tipo | Qué registra | Pregunta que responde |
|---|---|---|
| Mapa de clics (clickmap) | Dónde hacen clic o tocan los usuarios | ¿Qué elementos se pulsan y cuáles se ignoran? |
| Mapa de scroll | Qué porcentaje de visitantes llega a cada altura de la página | ¿Hasta dónde se lee el contenido? |
| Mapa de movimiento | Por dónde se mueve el cursor en escritorio | ¿Qué zonas recorre el usuario con el ratón? |
| Mapa de área | Clics totales dentro de una zona que eliges | ¿Cuánto rinde un bloque completo, como un menú? |
| Mapa de atención | Tiempo que se pasa en cada parte de la página | ¿Dónde se detiene el visitante? |
| Mapa de conversión | Qué clics se relacionan con compras o ingresos | ¿Qué elementos acaban generando ventas? |
| Mapa de eye tracking | Hacia dónde mira la persona, medido con cámaras | ¿Qué ve realmente y en qué orden? |
El más usado es el clickmap, que detalla tipos de clic como los clics de rabia o los clics muertos. El mapa de scroll marca además el pliegue medio, la altura visible antes de desplazarse, clave para decidir qué va above the fold. Y los mapas de mirada solo se obtienen con eye tracking, en estudios con equipos específicos o cámaras web.
04 Cómo se leen los colores de un mapa de calor
Rojo
Máxima concentración de clics, tiempo o visitas.
Naranja y amarillo
Actividad alta o media.
Verde
Actividad baja.
Azul
Actividad muy baja o nula.
05 Mapas de calor más allá de la web
| Tipo | Cómo es | Ejemplo en marketing |
|---|---|---|
| Heatmap espacial o geográfico | Colorea regiones de un mapa según un valor | Ventas por provincia o densidad de clientes alrededor de una tienda |
| Heatmap de matriz o cuadrícula | Tabla en la que cada celda se colorea según su valor | Tasa de conversión por día de la semana y hora |
| Heatmap de cohortes | Matriz de grupos de clientes por mes de alta y retención | Qué porcentaje de clientes de enero sigue comprando en junio |
| Heatmap de correlación | Matriz que muestra cuánto se relacionan varias variables | Relación entre inversión en canales y ventas |
| Heatmap de calendario | Cuadrícula de días coloreada por actividad | Publicaciones o pedidos diarios a lo largo del año |
Todos comparten la misma idea: convertir una tabla de números difícil de leer en un patrón visual que se entiende en segundos. Una hoja de cálculo con formato condicional por colores ya es, en la práctica, un mapa de calor de matriz.
06 Para qué sirve un heatmap en diseño y conversión
Detectar CTA invisibles
Si el botón principal queda en azul, no se ve, no se entiende o está demasiado abajo.
Encontrar falsos enlaces
Clics repetidos en imágenes o textos que parecen enlaces y no lo son.
Ordenar el contenido
Si el 70 % no pasa de la mitad, lo importante debe subir.
Revisar la versión móvil
Los patrones cambian por completo entre pantalla táctil y ratón.
Priorizar el rediseño
Cambias lo que los datos señalan, no lo que opina el comité.
Generar hipótesis para tests
Cada hallazgo se convierte en una hipótesis que validar.
Son una herramienta básica del diseño UX y de cualquier proyecto de optimización de la conversión. Si quieres pasar a la práctica, en nuestra guía de mapas de calor web comparamos Hotjar y Microsoft Clarity y explicamos cómo instalarlos cumpliendo el RGPD.
07 Cómo interpretar un mapa de calor sin sacar conclusiones falsas
-
1
Define la pregunta
Elige el tipo de mapa según lo que quieras saber: clics, lectura o atención.
-
2
Espera a tener datos
Con pocas visitas, un par de usuarios cambian todo el color. Espera a tener cientos de sesiones por página y dispositivo.
-
3
Separa dispositivos y fuentes
Un usuario de móvil que llega de un anuncio no se comporta como uno de escritorio que llega desde Google.
-
4
Contrasta con grabaciones
Mira sesiones reales para entender el porqué de un patrón extraño.
-
5
Convierte el hallazgo en test
Plantea un cambio concreto y valídalo con un test A/B antes de darlo por bueno.
El mapa de scroll de la landing de un curso muestra que solo el 30 % llega a la sección de precios. El de clics revela que muchos pulsan la foto del profesor, que no es un enlace. El equipo sube un resumen del precio al primer pantallazo y convierte la foto en un enlace a su biografía. Un test A/B confirma la mejora antes de publicarla para todos.
- ✓No confundas movimiento del ratón con mirada: se parecen, pero no son lo mismo.
- ✓Revisa si hay pop-ups o banners de cookies que tapen partes de la página.
- ✓Comprueba que la página no cambió durante el periodo analizado.
- ✓Informa a los usuarios y respeta el consentimiento de cookies cuando la herramienta lo requiera.
Preguntas frecuentes sobre Heatmap o mapa de calor
Es un mapa de calor: una visualización que representa la intensidad de un dato con colores, de fríos a cálidos. En una web muestra dónde hacen clic, hasta dónde bajan o dónde se detienen los usuarios.
En analítica web, los principales son de clics, de scroll, de movimiento, de área, de atención, de conversión y de eye tracking.
Heatmap es el término general; el clickmap es un tipo de mapa de calor que solo registra clics. Todo clickmap es un heatmap, pero no al revés.
Rojo y naranja indican mucha actividad; amarillo, media; verde y azul, poca o ninguna. La escala es relativa a la página y al periodo analizado.
Sí. Microsoft Clarity es gratuita e incluye mapas de clics, scroll, área, conversión y atención. Hotjar tiene un plan gratuito con límites.
El primer ejemplo conocido es de Toussaint Loua, en 1873. El término «heat map» lo registró Cormac Kinney en 1991.
No hay una cifra oficial, pero con pocas decenas de sesiones los colores engañan. Lo prudente es esperar a varios cientos por página y dispositivo.
Fuentes consultadas
Sobre el autor
Raúl Aránega Segura
CEO y especialista SEO en appyweb
Fundador de appyweb. Más de una década posicionando webs y tiendas online en Google y, ahora, en las respuestas de la IA.
Ver perfil en LinkedIn ↗