¿Qué son los mapas de calor web / Heat Maps? La Guia Definitiva

Los mapas de calor son una poderosa forma de entender lo que los usuarios hacen en las páginas de su sitio web: dónde hacen clic, hasta dónde se desplazan, qué miran o ignoran.

En esta guía, encontrará una introducción a los diferentes tipos de mapas de calor y cómo crearlos y analizarlos. También obtendrá estudios de casos reales y ejemplos prácticos, para que pueda ver por sí mismo lo valiosos y útiles que son los mapas de calor cuando se trata de mejorar y hacer crecer su sitio web.

¿Qué es un mapa de calor?

Un mapa de calor (o heatmap) es una representación gráfica de datos donde los valores se representan por colores. Los mapas de calor facilitan la visualización de datos complejos y su comprensión de un vistazo:

Se cree que la práctica que ahora llamamos mapas de calor 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 mapa de calor se registró por primera vez 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. Hoy en día, los mapas de calor pueden crearse a mano, con hojas de cálculo de Excel o con software especializado.

¿Qué es un mapa de calor de un sitio web?

mapa de calor sitio web

Los mapas de calor de sitios web visualizan los elementos más populares (calientes) y los menos populares (fríos) de una página web utilizando colores en una escala de rojo a azul.

Al agregar el comportamiento de los usuarios, los mapas de calor facilitan el análisis de los datos y permiten comprender de un vistazo cómo interactúan los usuarios con una página web concreta -en qué hacen clic, se desplazan o ignoran-, lo que ayuda a identificar tendencias y a optimizar la participación.

Los mapas de calor también suelen mostrar el pliegue medio, que es la parte de la página que los usuarios ven en su pantalla sin desplazarse en cuanto llegan a ella.

Tipos de mapas de calor

El mapa de calor es en realidad un término que engloba diferentes herramientas de mapas de calor: mapas de desplazamiento, mapas de clics y mapas de movimiento. Conocer la diferencia es útil, ya que cada tipo le ayuda a investigar un aspecto ligeramente diferente del rendimiento de su sitio web.

Mapas de desplazamiento

Los mapas de desplazamiento le muestran el porcentaje exacto de personas que se desplazan hacia abajo hasta cualquier punto de la página: cuanto más roja sea el área, más visitantes la vieron.

Mapas de clics

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

Mapas de Movimiento

Los mapas de movimiento registran los lugares en los que los usuarios de ordenadores de sobremesa mueven el ratón mientras navegan por la página. Los puntos calientes de un mapa de movimientos representan dónde han movido el cursor los usuarios en una página, y las investigaciones sugieren que existe una correlación entre dónde mira la gente y dónde está su ratón, lo que significa que un mapa de movimientos le da una indicación de dónde puede estar mirando la gente mientras navega por su página.

Mapas de calor para ordenadores y móviles

Los mapas de calor de escritorio y móvil le ayudan a comparar el rendimiento de su sitio web en diferentes dispositivos. Por ejemplo, el contenido que es prominente en una página de escritorio puede estar mucho más abajo del pliegue en un teléfono, y usted necesita ver si la interacción difiere, y cómo.

Las ventajas de utilizar mapas de calor en su sitio web

Los mapas de calor le ayudan a entender cómo interactúa la gente con las páginas de su sitio web, de modo que puede encontrar respuestas a preguntas críticas para el negocio como «¿por qué mis usuarios no convierten?» o «¿cómo puedo conseguir que más visitantes realicen una acción?». Gracias a los mapas de calor, podrá determinar si los usuarios:

  • Llegan al contenido importante o no lo ven
  • Encuentran y utilizan los enlaces principales, los botones, los opt-ins y los CTA de una página
  • Se distraen con elementos no clicables
  • Experimentan problemas en todos los dispositivos.

Como herramienta visual, los mapas de calor le ayudan a tomar decisiones informadas y basadas en datos para realizar pruebas A/B, actualizar o (re)diseñar su sitio web. Y también son útiles a una escala empresarial más amplia: los mapas de calor le permiten mostrar a los miembros del equipo y a las partes interesadas lo que está sucediendo y obtener su aceptación más fácilmente cuando se necesitan cambios: ¡es difícil discutir con un mapa de calor!

Ahora que ya sabe qué son los mapas de calor y por qué debería empezar a utilizarlos en su sitio web, amplíe sus conocimientos explorando los siguientes capítulos.

Los capítulos restantes de esta guía cubren los siguientes aspectos:

Ejemplos reales de mapas de calor

Una inmersión más profunda en los mapas de calor, con ejemplos reales y una visión general de los mejores casos de uso de mapas de calor para su sitio web

Cómo analizar un mapa de calor

Una lista de comprobación de 5 pasos que puede ejecutar para obtener información procesable de los mapas de calor.

Casos prácticos de mapas de calor

Casos prácticos de éxito de vendedores, diseñadores y gestores de comercio electrónico y productos que han utilizado los mapas de calor para mejorar sus sitios, aumentar las conversiones y hacer crecer sus negocios.

Creación de un mapa de calor

Los pasos de configuración de la herramienta y las herramientas gratuitas para siempre que puedes utilizar.

Información avanzada de los mapas de calor

Cómo potenciar su análisis combinando la analítica del mapa de calor con la analítica web tradicional y las herramientas de comportamiento y retroalimentación.

Una infografía del mapa de calor

Todo lo que necesita saber sobre los mapas de calor en formato infográfico.

Preguntas frecuentes sobre Mapas de Calor

¿Tienes alguna pregunta sobre los mapas térmicos? Hemos recopilado más de 10 de las preguntas más populares que la gente hace sobre los mapas de calor y las hemos respondido a continuación.

¿Qué es un mapa de calor de un sitio web?

Un mapa de calor de un sitio web es una visualización agregada del movimiento del ratón del usuario, el desplazamiento, los clics y los toques. Los diseñadores, los especialistas en UX y los especialistas en marketing utilizan los mapas de calor para descubrir los patrones de uso del sitio web y realizar optimizaciones basadas en datos para aumentar la tasa de conversión y los ingresos.

¿Qué muestra un mapa de calor?

Un mapa de calor muestra una superposición codificada por colores del movimiento del ratón (y del toque) 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 desde el rojo (las partes más populares de la página) hasta el azul (las partes menos utilizadas de una página).

¿Cómo funciona un mapa de calor?

Los mapas de calor funcionan creando una copia del código HTML de tu página, y luego clasificando cada elemento por su etiqueta, elementos padre, e IDs o clases cuando sea relevante. Cuando los visitantes ven la página, la aplicación recoge el comportamiento de uso y mapea todos los elementos con los que los usuarios interactúan en el informe del mapa de calor maestro. Los datos del mapa de calor se clasifican en tres categorías de mapas de calor para facilitar el análisis: mapa de clics, mapa de desplazamiento y mapa de movimiento.

¿Por qué utilizamos los mapas de calor?

El objetivo principal de los mapas de calor es visualizar el comportamiento de los usuarios del sitio web. Al observar 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.

Los mapas de calor son también un gran primer paso para la investigación del comportamiento del usuario, como la visualización de las grabaciones de la sesión y la recopilación de comentarios de la encuesta.

¿Cómo se crea un mapa de calor del sitio web?

Para crear un mapa de calor del sitio web, puede utilizar una herramienta de mapa de calor o un software como por Ejemplo Hotjar.

  • Regístrese en Hotjar
  • Añada el código de seguimiento de Hotjar (un fragmento de JavaScript) a su sitio web.
  • A continuación, vaya al panel de control de Hotjar.
  • Haz clic en «Añadir mapa de calor», selecciona la página a la que quieres dirigirte
  • Haz clic en «Crear mapa de calor».

¿Cómo puedo leer un mapa de calor?

Puedes leer cualquier mapa de calor de un sitio web de dos maneras: mirando la visualización y revisando los puntos de datos en bruto. Gracias a la codificación por colores de los mapas de calor (el rojo indica la mayor interacción y el azul la menor), puede detectar las tendencias de los clics y los problemas de un vistazo. Las tablas de datos en bruto de los mapas de calor revelan información más específica, como los elementos HTML o las ubicaciones en píxeles de los clics y las visualizaciones en orden de popularidad.

¿Quién inventó los mapas de calor?

El término «mapa de calor» fue utilizado por primera vez (y registrado) por el diseñador de software estadounidense Cormac Kinney a principios de la década de 1990, después de que desarrollara un software para mostrar gráficamente la información del mercado financiero en tiempo real para los operadores.

¿Puedo utilizar un mapa de calor en mi tienda de Shopify?

Puedes configurar un mapa de calor en Shopify y ver exactamente dónde hacen clic los clientes en tus páginas instalando la aplicación diseñada para Shopify o añadiendo manualmente el código de seguimiento de una aplicacion como Hotjar a tu tema de Shopify.

¿Puedo utilizar un mapa de calor en WordPress?

Puedes utilizar mapas de calor en cualquier sitio web de WordPress autoalojado para saber dónde hacen clic los usuarios instalando el plugin de mapas de calor para WordPress. Es muy parecido a hacerlo con Shopify.

¿Cuál es la diferencia entre las herramientas de seguimiento del ratón y del ojo?

A efectos de la experiencia del usuario, el seguimiento ocular mide dónde mira la gente cuando ve un sitio web, mientras que el seguimiento del ratón mide dónde mueve y hace clic el cursor (o toca en el móvil). La investigación con eye-tracking puede ser costosa, suele realizarse en un laboratorio y requiere que los participantes en la investigación lleven un equipo especializado, mientras que el mouse-tracking (también conocido como click-tracking) es muy asequible -incluso gratuito- y puede generar mapas de calor 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.

¿Cómo debo utilizar los mapas de calor con otras herramientas de análisis?

El Mapa de Calor se basa en la premisa de que para entender realmente a los usuarios, es necesario combinar el análisis cualitativo y cuantitativo. Los datos de los mapas de calor 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 su sitio web.

¿Dónde puedo encontrar un mapa de calor gratuito?

La mejor herramienta gratuita de mapas de calor de sitios web que conocemos es el plan personal básico «Free Forever» de Hotjar, que permite recopilar datos de mapas de calor de hasta 2.000 páginas vistas. (Por los momentos la página solo esta en Ingles).

¿Los mapas de calor ralentizarán mi sitio web?

Técnicamente hablando, cualquier script de mapa de calor que añada a su sitio web podría ralentizarlo, pero estas aplicaciones han sido diseñado para minimizar el riesgo de ralentizar su sitio web tanto como sea posible.

El script de seguimiento se carga de forma asíncrona, lo que significa que se carga junto con todo lo demás en su sitio web, y utiliza una CDN (Red de Entrega de Contenido) y el almacenamiento en caché del navegador correcto para mantener las cosas cargando rápidamente.

¿Puedo utilizar los mapas de calor y cumplir con la normativa de privacidad y GDPR?

Para cumplir con las regulaciones de privacidad y GDPR relevantes, necesitas utilizar una herramienta de mapa de calor que te permita gestionar responsablemente cualquier dato de usuario que recopiles. Muchas aplicaciones de mapa de calor cuentan con funciones de cumplimiento integradas que le permiten utilizar la herramienta de mapas de calor de forma compatible con el GDPR.

Toda la información de identificación personal se anonimiza automáticamente en el lado del usuario final en todos los mapas de calor, y también puedes añadir filtros adicionales de supresión de formularios para bloquear cualquier elemento que necesites.

Presets Color