La guía completa de heatmaps

En esta guía, encontrarás una introducción a los diferentes tipos de heatmaps y cómo crearlos y analizarlos. También obtendrás casos prácticos reales y ejemplos prácticos para que puedas comprobar en persona lo valiosos y útiles que son los heatmaps a la hora de mejorar y hacer crecer tu sitio web.

¿Qué es un heatmap?

Un heatmap (o heat map) es una representación gráfica de datos en la que los valores se representan por colores. 

Son esenciales para detectar qué funciona y qué no funciona en un sitio web o en una página de producto. 

Al experimentar con la posición de determinados botones y elementos en tu sitio web, los heatmaps te permiten evaluar el rendimiento de tu producto y aumentar el compromiso y la retención de los usuarios a medida que priorizas las tareas pendientes que aumentan el valor para el cliente.

Los heatmaps facilitan la visualización de datos complejos y su comprensión de un vistazo:

Se cree que la práctica que ahora llamamos heatmaps se originó en el siglo XIX, donde se utilizaba el sombreado manual en escala de grises para representar patrones de datos en matrices y tablas.

El término heatmap se registró por primera vez a principios de los años 90, cuando el diseñador de software Cormac Kinney creó una herramienta para mostrar gráficamente información del mercado financiero en tiempo real. 

Hoy en día, los heatmaps pueden crearse a mano, con hojas de cálculo Excel o con herramientas de análisis de la experiencia de producto, como Hotjar. 

¿Qué es un heatmap de un sitio web y cómo puedes utilizarlo para informar sobre tu producto?

Los heatmaps de sitios web y de productos visualizan los elementos más populares (calientes) y menos populares (fríos) del contenido de la página web de tu sitio web utilizando colores en una escala que va del rojo al azul.

Pero, ¿quién utiliza los heatmapsy cómo funcionan? 

Los heatmaps ofrecen a los equipos de producto, a los responsables de marketing, a los analistas digitales y de datos, a los diseñadores de UX, a los especialistas en redes sociales y a cualquiera que venda algo online, información detallada sobre el comportamiento de las personas en su sitio, ayudándoles a descubrir por qué los usuarios no adoptan su producto, no utilizan los botones de llamada a la acción (CTA) o no convierten. 

Al agregar el comportamiento del usuario, los heatmaps facilitan el análisis de datos, combinando datos cuantitativos y cualitativos, y ofrecen una visión instantánea de cómo interactúa el público objetivo con un sitio web o una página de producto concretos: dóndehacen clic, por qué se desplazan o qué ignoran, lo que te ayuda a identificar tendencias y optimizar tu producto y tu sitio para aumentar la participación de los usuarios y las ventas.

Los heatmaps también suelen mostrar el pliegue medio, que es la parte de la página que la gente ve en su pantalla sin desplazarse en cuanto aterriza en ella.

 Las ventajas de utilizar heatmaps en tu sitio web

Los heatmaps ayudan a los gestores de productos y a los propietarios de sitios web a comprender cómo interactúan las personas con las páginas de su sitio web para encontrar respuestas a las preguntas y objetivos empresariales fundamentales como “¿por qué mis usuarios no convierten?” o “¿cómo consigo que más visitantes pasen a la acción?” Usar heatmaps te permite determinar si los usuarios:  

• Llegan a contenidos importantes o no los ven

• Encuentran y utilizan los enlaces principales, botones, opt-ins y CTA de una página

• Se distraen con elementos en los que no se puede hacer clic

• Tienen problemas en distintos dispositivos

Como herramienta visual, los heatmaps te ayudan a tomar decisiones informadas y basadas en datospara Pruebas A/B actualizar o (re)diseñar tu sitio web. También son útiles a una escala empresarial más amplia: los heatmaps te permiten mostrar a los miembros del equipo y a las partes interesadas lo que está sucediendo y obtener su aprobación más fácilmente cuando se necesitan cambios: ¡es difícil discutir con un heatmap!

Los heatmaps continuos de Hotjar te permiten filtrar datos y crear heatmaps especiales basados en atributos del usuario, como la función o el cargo del usuario, la fecha en que creó su cuenta, si está utilizando una versión de prueba de tu producto, etc., para que puedas encontrar rápidamente información específica. 

Por ejemplo, los equipos de producto pueden utilizar los heatmaps para comprobar cómo interactúan los usuarios con una nueva función o priorizar la corrección de errores, mientras que los diseñadores de UX y UI utilizarán los heatmaps para medir la popularidad o aversión al diseño de una página e implementar cambios que faciliten a los clientes la navegación por su sitio web.

Con la función Destacados de Hotjar, puedes “marcar como favorito” y compartir rápidamente perspectivas específicas de un heatmap con otros departamentos o personas de tu empresa, logrando así una colaboración interfuncional satisfactoria.

También puedes crear una “colección” de heatmaps para destacar elementos específicos a los que desees que tu empresa o equipo dé prioridad. 

Por ejemplo, un vendedor digital podría crear una colección de heatmaps para probar una página de destino y luego decidir mover un botón CTA por encima del pliegue medio, reduciendo la rotación y aumentando las inscripciones para su sitio web o producto.

¿Cuáles son los distintos tipos de heatmaps?

Heatmap es en realidad un término genérico que engloba distintas herramientas de heatmapping: mapas de desplazamiento, mapas de clics y mapas de movimientos. Conocer la diferencia es útil, ya que cada tipo te ayuda a investigar un aspecto ligeramente diferente del rendimiento de tu sitio web y tus productos.

1. Mapas de desplazamiento

Los mapas de desplazamiento te muestran el porcentaje exacto de personas que se desplazan hacia abajo hasta cualquier punto de la página: cuanto más roja es la zona, más visitantes la han visto.

2. Mapas de clics

Los mapas de clics te muestran un agregado de los lugares en los que los visitantes hacen clic con el ratón en los ordenadores y pulsan con el dedo en los dispositivos móviles (en este caso, se conocen como heatmaps táctiles). El mapa está codificado por colores para mostrar los elementos en los que más se ha hecho clic y se ha pulsado (rojo, naranja, amarillo).

3. Mapas de movimientos

Los mapas de movimientos siguen los movimientos del ratón de los usuarios de ordenadores mientras navegan por la página. Los focos de actividad de un mapa de movimientos representan los lugares por donde los usuarios han movido el cursor en una página. Las investigaciones sugieren que existe una correlación entre los lugares por donde mira la gente y la ubicación de su ratón, lo que significa que un mapa de movimientos te da una indicación de hacia dónde puede estar mirando la gente a medida que avanza por tu página.

4. Heatmaps para ordenadores y móviles

Los heatmaps para ordenadores y móviles te ayudan a comparar el rendimiento de tu sitio web en distintos dispositivos. Por ejemplo, el contenido que es prominente en una página que se muestra en un ordenador puede estar mucho más abajo del pliegue en un teléfono, y tú necesitas ver si la interacción difiere, y cómo lo hace.

¿Estás listo para crear un heatmap y mejorar la experiencia de tu sitio web?

Los heatmaps son fáciles de crear y entender y te permiten descubrir información procesable que te ayuda a mejorar el recorrido del usuario y tus páginas de productos para aumentar la retención y las inscripciones en tu sitio web.