¡Hola! Ahora puedes usar Hotjar en español 🇪🇸 Empieza gratis.

Aprende / Guías / Guía de heatmaps

Volver a las guías

La guía completa de heatmaps

Los heatmaps son una forma eficaz de comprender lo que hacen los usuarios en las páginas de tu sitio web: dónde hacen clic, hasta dónde se desplazan, qué miran o qué ignoran.

Última actualización

23 oct 2023

Tiempo de lectura

6 min

Compartir

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.

Regístrate para obtener una cuenta gratuita de Hotjar, añade el código de seguimiento a tu sitio web y empieza a utilizar heatmaps hoy mismo.

¿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:

#Los datos de la izquierda son los mismos que los de la derecha, pero uno de los formatos es mucho más fácil de entender.
Los datos de la izquierda son los mismos que los de la derecha, pero uno de los formatos es mucho más fácil de entender.

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.

#Un antiguo mapa de calor que muestra la densidad de población en los distritos parisinos del siglo XIX.
Un antiguo mapa de calor que muestra la densidad de población en los distritos parisinos del siglo XIX.

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.

#Un mapa de desplazamiento vertical (izquierda) y un mapa de movimientos (derecha) en la página de inicio de hotjar.com.
Un mapa de desplazamiento vertical (izquierda) y un mapa de movimientos (derecha) en la página de inicio de hotjar.com.

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!

#Un usuario de Hotjar comparte un mapa de calor con un miembro de su equipo para elaborar un caso de negocio que les ayude a conseguir una mayor aceptación.
Un usuario de Hotjar comparte un mapa de calor con un miembro de su equipo para elaborar un caso de negocio que les ayude a conseguir una mayor aceptación.

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.

Utilizamos los datos de Hotjar para reducir las posibles causas de la caída. Nos permitió centrarnos en algunas soluciones reales y probarlas, en lugar de buscar soluciones hipotéticas basadas en conjeturas.

Piriya Kantong
Analista senior de marketing online, Zenprint, Gogoprint

Regístrate para obtener una cuenta gratuita de Hotjar, añade el código de seguimiento a tu sitio web y empieza a utilizar heatmaps hoy mismo.

¿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.

#An infographic displaying the different types of heatmaps
An infographic displaying the different types of heatmaps

1. Mapas de desplazamiento

#Un ejemplo de un mapa de desplazamiento vertical.
Un ejemplo de un mapa de desplazamiento vertical.

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

#Un ejemplo de un click map.
Un ejemplo de un click map.

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

#Un ejemplo de mapa de movimientos.
Un ejemplo de mapa 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

#Un click map para ordenador (izquierda) y móvil (derecha).
Un click map para ordenador (izquierda) y móvil (derecha).

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.

Configura el mapa de calor en tu sitio web hoy mismo

Crea una cuenta gratuita de Hotjar, añade el código de seguimiento a tu sitio web y empieza a utilizar Heatmaps hoy mismo.

Preguntas frecuentes sobre heatmaps