¿Qué son los mapas de calor en UX y para que sirven?

1/11/2022 Author: Rafael Gallegos 4 min

Los mapas de calor, o heatmaps en inglés,  son una representación visual de cómo los usuarios interactúan con un sitio web o aplicación. A través de estas herramientas podemos saber en qué partes de nuestro sitio, los usuarios hacen clic, scrollean, mueven el mouse y se detienen a ver contenido.

Normalmente usan gamas de colores que van desde colores rojos como el amarillo y naranja, hasta colores como el verde y el azul para poder identificar aquellas partes con las que interactúa el usuario.

heatmap ejemplo

Revelan las partes más usadas y vistas por las personas, asimismo nos dicen cuáles son las secciones o elementos con los que menos interactúa el usuario.

De esta forma, puedes optimizar aquellos elementos de tu aplicación que simplemente no funcionan en la experiencia del usuario y detectar aquellas partes que sí hacen sentido para nuestro visitante.

Historia de los mapas de calor

Se cree que los mapas de calor se originaron en el siglo XIX, cuando se usaba el sombreado manual en escala de grises para representar patrones de datos en matrices y tablas.

primeros mapas de calor

Mapa de calor de densidad de población y sus características (nacionalidad, origen, profesión, edad, clase social, etc.) en Paris por distrito en el siglo 19.

El término mapa de calor que conocemos ahora, se registró oficialmente como marca a principios de la década de 1990, cuando el diseñador de software Cormac Kinney creó una herramienta para mostrar gráficamente información del mercado financiero en tiempo real.

Mapas de calor en UX Research

UX Research es el estudio sistemático de los usuarios para diseñar productos digitales que se ajusten a sus necesidades.

Básicamente, es investigar a tus usuarios para conocer sus comportamientos, necesidades y objetivos con la finalidad de diseñar la aplicación ideal para ellos. 

Los diseñadores e investigadores UX han adoptado los mapas de calor como una metodología de UX Research para conocer cómo los usuarios interactúan con una página web o aplicación móvil.

Cómo funcionan los mapas de calor

Existen distintas formas para generar mapas de calor de un sitio web. Sin embargo, casi todas las soluciones siguen el mismo proceso.

Crean una copia del código HTML de tu página, luego categoriza cada elemento por su etiqueta, elementos principales, ID o clases.

Cuando el usuario ve la página, se recopila su comportamiento y se mapean todos los elementos con los que interactuó. 

En el mercado existen múltiples aplicaciones para generar mapas de calor que puedes instalar en tu sitio web o aplicación. Más abajo veremos algunas de ellas.

Cómo leer un mapa de calor

Un mapa de calor nos dice a través de colores cuáles son los elementos con los que más interactúan los usuarios de un sitio web o aplicación móvil. 

gama-de-colores-de-mapa-de-calor

Mientras más rojo esté el elemento o sección, significa que los usuarios han tenido una alta interacción con ese elemento. 

Mientras más azul esté el elemento o sección, significa que los usuarios han tenido una baja interacción con ese elemento. 

Tipos de mapa de calor

Mapa de calor por clics

Detecta dónde hacen más clic los usuarios. Este mapa nos ayuda a saber  en qué vínculos, botones o CTA hacen clic los visitantes de nuestra aplicación.

clic mapa de calor

Mapa de calor por scroll

Detecta cuáles son las áreas donde el usuario hace más scroll. De esta forma podemos saber en qué secciones el usuario hace scroll y dónde se detiene. 

scroll mapa de calor

Este tipo de mapa ayuda especialmente a saber a partir de cuándo una página es muy larga y aburrida para el usuario. Ya que nos dice el momento en el que el usuario dejó de scrollear. 

Mapa de calor por mouse o movimiento

Identifica cuáles son las zonas por donde los usuarios pasan el mouse. La detección del mouse es una forma de saber qué partes está leyendo el usuario o dónde está enfocando principalmente su atención. Muchos usuarios usan el mouse para apuntar su lectura y avanzar dentro de un sitio. 

mouse mapa de calor

Mapa de calor por mirada

Reconoce en qué secciones se queda mirando más al usuario. Lo cuál nos ayuda a saber que partes del texto o imágenes del sitio son interesantes para el usuario y cuáles no.

mirada mapa de calor

Ventajas de usar mapas de calor

Detectar aquello que no está funcionando

Los mapas de calor nos dicen con qué elementos y secciones el usuario no está interactuando. Nos ayudan a saber qué elementos son poco vistos, clickeados y leídos por los usuarios.

Aquellos elementos que aportan poco o nada a la experiencia del usuario pueden ser optimizados, reemplazados e inclusive eliminados.

Por ejemplo, si hay un botón en el que quieres que los usuarios hagan más clic, pero el mapa de calor detecta que es poco utilizado, puedes avanzar a realizar nuevas propuestas de diseño para ese botón. Podrías hacerlo más grande, cambiarlo de color, moverlo de posición, cambiar el copy o ponerlo en otra sección.

Detectar aquello que sí está funcionando

Los mapas de calor no solo nos dicen que no funciona. También nos dicen que si funciona.

Una de las partes más difíciles en el diseño UX es saber qué elementos y secciones son de valor para la experiencia del usuario.

Al saber cuáles son esos elementos con los que si interactúa el usuario y que sí hacen sentido dentro de la experiencia, podrás tomar la decisión de optimizarlos todavía más o no hacerles ningún solo cambio.

Por ejemplo, podrías descubrir que el banner que no te convencía porqué “se veía feo”, en realidad funciona muy bien, y  los usuarios se detienen a verlo y hacen clic en él constantemente. 

Lo que te dice el mapa de calor en este caso, es que ese banner funciona dentro de la experiencia de tu plataforma y tal vez no deberías hacer ningún cambio.

Diseña de acuerdo a datos

Una mala práctica en el diseño web es realizar cambios en el sitio sin saber porqué se están realizando estos cambios. 

Muchas veces se realizan cambios de diseño por qué “se ven más bonitos”, por qué un manager tomó la decisión, o simplemente por que así alguien lo diseñó. 

Sin embargo estas justificaciones son muy débiles y podrían terminar afectando significativamente tu experiencia y conversión a largo plazo. 

Recuerda que nadie sabe exactamente lo que quieren o buscan los usuarios. Por eso, a la medida de lo posible, el diseño de tu sitio debe estar basado en datos. 

Mejora tus métricas

Al optimizar, reemplazar y eliminar elementos en el diseño de tu plataforma de acuerdo a datos de tus usuarios, aumentarás las métricas claves de tu negocio.

Al diseñar una experiencia de acuerdo a datos aumentarás: los registros, páginas vistas por sesión, click through rate, hasta tiempo por sesión.

Impulsa tu conversión a venta

Al optimizar el diseño de tu plataforma a través de los datos de los mapas de calor:

  • Mejorarás la experiencia del usuario

  • Harás que tus clientes regresen por sí solos

  • Y como consecuencia, aumentarás las ventas de tu negocio.

Herramientas para hacer un mapa de calor

Existen múltiples herramientas para realizar mapas de calor dentro de tu plataforma digital. Aquí repasamos algunas de ellas. 

Smartlook

smartlook mapa de calor

Smartlook es una plataforma de análisis de productos e información visual del usuario. Viene con cuatro características clave que te ayudan a ver lo que hacen tus usuarios y descubrir por qué lo hacen: mapas de calor, grabaciones de sesiones, eventos y embudos.

Crazyegg

crazyegg mapa de calor

Crazy Egg es una herramienta de análisis web y optimización de la tasa de conversión (CRO). Ofrece mapas de calor, informes de superposición, grabaciones de usuarios, pruebas A/B y funciones para rastrear el tráfico de anuncios en su sitio web.

Hotjar

hotjar mapa de calor

Hotjar es una herramienta de mapa de calor de sitios web que también ofrece grabaciones de sesiones, widgets de comentarios de los usuarios y funciones de encuestas. Es una herramienta para principiantes adecuada para especialistas en marketing, gerentes de productos y profesionales de UX.

Lucky Orange

mapa de calor lucky orange

Lucky Orange tiene funciones tanto para el análisis del comportamiento de los visitantes (mapas de calor y grabaciones de sesiones) como para CRO (embudos, análisis de formularios y chat en vivo).

Mouseflow

mouseflow mapa de calor

Mouseflow es una herramienta de grabación de sesiones para sitios web que también ofrece mapas de calor, embudos de conversión y más.

Integrando las mejores tecnologías

¡Regístrate al siguiente Gluo Talks!

Search Experience: Optimizando la experiencia del usuario

Jueves 8 de diciembre 11:00 am CST