Seguramente que cuando nos planteamos realizar un mapa de calor o Heatmap, ya disponemos de datos sobre la navegación que realizan los usuarios por las páginas del sitio web habiendo utilizado diferentes técnicas de investigación UX. Datos como por ejemplo la tasa de rebote, visitas a la página, conversiones, etc.
Los mapas de calor ayudan a recopilar datos sobre cómo las personas o usuarios interactúan con el sitio web y revelan ciertos aspectos de su experiencia.
¿Qué es un Mapa de Calor?
Un mapa de calor se puede definir como una visualización de datos que determina cómo los usuarios del sitio web hacen clic en las diferentes páginas que lo componen. El término calor, en el nombre de este tipo de test o prueba de UX, viene dado por la escala de colores que se utiliza para representar los datos.
El color rojo (caliente), representa la zona con más clics mientras que el color azul (frío), son las zonas menos populares por decirlo de alguna manera.
Tipos de Mapas de Calor
Existen diferentes tipos de mapas de calor. Cada uno de los tipos representan datos parecidos pero diferentes.
Todos los mapas de calor representan donde los usuarios muestran su atención en una página web. Cada tipo de mapa de calor, dirá cosas diferentes.
1. Mapas de Clic
Este tipo de mapa se utiliza para visualizar dónde clican los usuarios en una página web. También puede arrojar datos sobre el número de usuarios que visitan la página y el porcentaje de usuarios que interactúan con un botón o enlace determinado.
Este tipo de mapas es muy útil puesto que son capaces de recoger si los usuarios hacen clic en algo que no es interactivo. Este hallazgo, puede suponer no tanto una debilidad como una oportunidad. Podemos detectar parte de un mal diseño de algo que parece interactivo pero no lo es o colocar algo realmente interactivo en esa zona.
2. Mapas de desplazamiento o Scroll
Estos mapas representan hasta qué punto los usuarios se desplazan o mueven por las páginas del sitio web tanto si hacen scroll como si desplazan con el dedo en un dispositivo móvil.
La visualización de los datos se realiza a través de bandas horizontales que muestran el porcentaje de usuarios que llegaron a cada parte de la página.
Con este tipo de mapas podemos descubrir varias cosas, como por ejemplo, si existe un enlace en la parte superior que clican los usuarios sacándoles de esta página y no llegan a visualizar la partes o contenidos por debajo de los primeros 670px de la página o si hay una mezcla de mal contenido y diseño, en algún punto, que hace que los usuarios abandonen la página.
3. Mapas de movimiento o ratón
Los mapas de calor de movimiento del ratón indican por qué partes de la página pasan el ratón los usuarios y ayudan a descubrir qué elementos generan más interés.
El seguimiento del ratón es una buena manera para determinar donde miran los usuarios. Numerosos estudios indican que los usuarios suelen mirar donde se posiciona el cursor del ratón, aunque para tener datos relevantes y concluyentes es mejor utilizar la técnica de Eye Tracking.
Ventajas de usar Mapas de Calor en UX
Los mapas de calor nos permiten validar las ideas de diseño y detectar oportunidades para optimizarlos.
Algunas de las ventajas son estas:
- Ayudan a presentar un diseño y cerciorarnos de que funciona correctamente.
- Nos permite comprobar la efectividad de los botones y otros CTA o llamadas a la acción.
- Seremos capaces gracias a los mapas de calor de medir hasta que punto llegan a visualizar el contenido los usuarios en una página del sitio.
- Detectaremos clics en zonas que no son clicables, lo que supone una detección de nuevas oportunidades.
- Optimización teniendo en cuenta a los usuarios tanto en la versión de escritorio como en dispositivos móviles.
¿Cómo hacer un Mapa de Calor?
Existen numerosas herramientas para poder realizar mapas de calor en nuestros sitios. Particularmente, recomiendo dos herramientas: Hotjar y Crazyegg.
Ambas herramientas son muy sencillas de utilizar y de implementar en nuestros sitios.
1. Hotjar
Esta herramienta dispone de numerosas funcionalidades a parte de los mapas de calor. Tienen una cuenta Free o gratuita con ciertas limitaciones pero que para pruebas pequeñas es realmente útil.
2. CrazyEgg
Crazyegg también dispone de una cuentra Free con todas las opciones durante 30 días.
3. Clarity
Clarity es una herramienta gratuita y fácil de usar que indica cómo la gente utiliza un sitio. Es de fácil configuración y empezarás a obtener datos en cuestión de minutos.
Créditos
How to analyze a heat map
Website heatmaps: your complete guide
Heatmaps for UX: Quantifying Interaction for Better Website Experiences
Understanding heatmaps for better UI design