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.
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:
#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.
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.
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.
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.
Configura tu heatmap hoy mismo
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.
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.
Configura tu heatmap hoy mismo
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.
Para crear un heatmap de un sitio web, puedes utilizar una herramienta de heatmap o un software como Hotjar. Regístrate en Hotjar, añade el código de seguimiento de Hotjar (un fragmento de JavaScript) a tu sitio web y, a continuación, accede al Dashboard de Hotjar. Haz clic en “Añadir heatmap”, selecciona la página a la que deseas dirigirte y, a continuación, haz clic en “Crear heatmap”.
Técnicamente hablando, cualquier script de heatmap que añadas a tu sitio web podría ralentizarlo, pero Hotjar ha sido diseñado para minimizar el riesgo de ralentizar tu sitio web tanto como sea posible.
El script de seguimiento de Hotjar se carga de forma asíncrona, lo que significa que se carga junto con todo lo demás en tu sitio web y utiliza una CDN (Content Delivery Network) y el almacenamiento en caché del navegador correspondiente para mantener la carga rápida de los elementos.
La mejor herramienta gratuita de heatmaps de sitios web que conocemos es el plan personal básico “Free Forever” de Hotjar, que permite recopilar datos de heatmaps de hasta 1050 sesiones de sitios web al mes.
Puedes utilizar heatmaps en cualquier sitio web WordPress autoalojado para averiguar dónde hacen clic los usuarios instalando el plugin de heatmap para WordPress de Hotjar o añadiendo manualmente el script de seguimiento de Hotjar a tu sitio WordPress.
Para cumplir con las normativas pertinentes sobre privacidad y el RGPD, debes utilizar una herramienta de heatmaps que te permita gestionar de forma responsable cualquier dato de usuario que recopiles. Hotjar incorpora funciones de cumplimiento que te permiten utilizar la herramienta de heatmaps de conformidad con el RGPD.
Toda la información de identificación personal se anonimiza automáticamente en el lado del usuario final en todos los heatmaps, y también puedes añadir filtros adicionales de supresión de formularios para bloquear cualquier elemento que quieras.
El objetivo principal de los heatmaps es visualizar el comportamiento de los usuarios de un sitio web. Si se observa un conjunto de todas las interacciones de los usuarios en una página web, resulta más fácil detectar problemas y oportunidades de mejora.
Un heatmap de un sitio web es una visualización agregada de los movimientos del ratón, los desplazamientos, los clics y las pulsaciones de los usuarios. Los diseñadores, los especialistas en UX y los profesionales del marketing utilizan los heatmaps para descubrir patrones de uso del sitio web y realizar optimizaciones basadas en datos para aumentar la tasa de conversión y los ingresos.
Un heatmap muestra una superposición codificada por colores de los movimientos del ratón (y de las pulsaciones) en una sola página del sitio web. La “popularidad” de los elementos de la página se muestra mediante una escala de colores que va del rojo (las partes más populares de la página) al azul (las partes menos utilizadas de una página).
Hotjar Heatmaps funciona creando una copia del código HTML de tu página y categorizando posteriormente cada elemento por su etiqueta, elementos padre e ID o clases donde sea relevante. Cuando los visitantes ven la página, Hotjar recopila el comportamiento de uso y mapea todos los elementos con los que interactúan los usuarios en el informe maestro del heatmap. Los datos del heatmap se clasifican en tres categorías para facilitar el análisis: mapa de clics, mapa de desplazamiento y mapa de movimientos.
Puedes leer cualquier heatmap de un sitio web de dos formas: mirando la visualización o revisando los puntos de datos sin procesar. Gracias a la codificación por colores de los heatmaps (rojo significa una mayor interacción; azul, una menor), podrás detectar de un vistazo las tendencias y los problemas relacionados con los clics. Las tablas de datos de heatmaps sin procesar revelarán información más específica, como los elementos HTML o las ubicaciones en píxeles de los clics y las visualizaciones por orden de popularidad.
El término “heatmaps” fue utilizado por primera vez (y registrado como marca) por el diseñador de software estadounidense Cormac Kinney a principios de la década de los 90, después de que este desarrollara un software para mostrarles a los operadores información de los mercados financieros en tiempo real de forma gráfica.
Para fines de experiencia de usuario, el seguimiento ocular mide hacia dónde miran los usuarios cuando visitan un sitio web, mientras que el seguimiento del ratón mide hacia dónde se mueven y hacen clic con el cursor (o pulsan en el móvil). La investigación con seguimiento ocular puede ser costosa, suele realizarse en un laboratorio y requiere que los participantes en la investigación lleven equipos especializados, mientras que el seguimiento con ratón (también conocido como seguimiento de clics) es muy asequible, incluso gratuito, y puede generar heatmaps similares.
Los estudios sugieren que existe una correlación positiva entre el seguimiento ocular y los mapas térmicos de movimientos, ya que las personas tienden a mirar hacia donde se encuentra el cursor.
Hotjar se fundó sobre la premisa de que, para comprender realmente a los usuarios, es necesario combinar análisis cualitativos y cuantitativos. Los datos de los heatmaps pueden combinarse fácilmente con los de Google Analytics (u otras herramientas de análisis) para obtener una imagen más precisa de cómo interactúan los usuarios con las páginas de tu sitio web.
Contentsquare's Content Team
Somos un equipo internacional de personas expertas en contenidos y redacción, a las que nos apasiona todo lo relacionado con la experiencia del cliente (CX), desde prácticas recomendadas hasta las últimas tendencias digitales. En nuestras guías encontrarás todo lo que necesitas saber para crear experiencias con las que conquistar a tus clientes.
![[Visual] Contentsquare's Content Team](http://images.ctfassets.net/gwbpo1m641r7/3IVEUbRzFIoC9mf5EJ2qHY/f25ccd2131dfd63f5c63b5b92cc4ba20/Copy_of_Copy_of_BLOG-icp-8117438.jpeg?w=1920&q=100&fit=fill&fm=avif)