¿Qué es un mapa de calor y cómo hacer uno?
Ya sea para un sitio web o para una aplicación móvil, la experiencia del usuario (UX) debe estar siempre en el centro de las preocupaciones de diseñadores, desarrolladores y otros profesionales del marketing, y en este contexto, la utilidad de los mapas de calor o heatmaps es innegable.
En este post, te contamos qué es un mapa de calor y por qué deberías usar uno, no solo para optimizar tu página web, sino también para aumentar tus posibilidades de conversión. Te explicamos los diferentes tipos de mapas de calor que existen y compartimos contigo los nombres de algunas de las mejores herramientas para crear un mapeo de calor.
¡Comenzamos!
¿Qué es un mapa de calor web o heatmap?
Un heatmap, o mapa de calor en español, es una representación visual de datos sobre una interfaz.
Sin embargo, esta herramienta no es un invento del marketing digital o del diseño UX, sino que se utiliza desde el siglo XIX. Se utilizó por ejemplo para ilustrar datos estadísticos en los mapas de la ciudad de París.
Dicho esto, en el contexto de la UX, el mapa de calor te permite registrar y cuantificar el comportamiento del usuario en tu página web.
Un mapa de calor utiliza un código de colores asociado a las temperaturas que van del azul al rojo:
- los colores cálidos representan las zonas más visitadas por los usuarios
- los colores fríos representan las zonas menos visitadas, donde hubo menos interacción
¿Para qué sirve un mapeo de calor?
¿Merece la pena examinar estos datos? ¿Qué información puedes obtener? Y sobre todo, ¿qué puedes hacer con ella?
Destacamos tres beneficios de los mapas de calor.
Evaluar la eficacia de una CTA
Un mapa de calor no solo te permite ver si tus usuarios hacen clic en el CTA, sino también los elementos que desvían su atención. Además, gracias a los scroll maps, es posible identificar el lugar que capta la mayor atención de tus usuarios. Esto facilita el reposicionamiento de los botones CTA para mejorar la tasa de clics y la experiencia del usuario.
Identificar las diferencias de navegación entre dispositivos
La navegación de un usuario puede ser diferente de un móvil a un ordenador, por lo que el mapa de calor puede ser una herramienta interesante. Por ejemplo, te permite ver si a un usuario le falta información en función del dispositivo en el que navega. Por lo tanto, el proceso de optimización de la UX se simplifica.
Si quieres descubrir las especificidades de la navegación móvil, no te pierdas nuestro post sobre el diseño responsive en el que te damos las claves para hacer que tu sitio web sea responsive.
Determinar el mejor lugar para colocar tus contenidos
Los scroll maps ayudan a identificar dónde dejan de desplazarse tus usuarios. De este modo, puedes elegir estratégicamente la altura de determinados contenidos en función de su importancia.
En conclusión, gracias a los heatmaps es posible destacar los efectos positivos de tu trabajo en el diseño de tu web o app con el fin de mejorar la experiencia del usuario.
Tipos de mapas de calor
Veamos a continuación los cuatro métodos que utilizan mapas de calor: el eye-tracking, el click tracking, el scrolling y el mouse tracking.
Eye-tracking
El eye-tracking es un método de registro de los movimientos oculares mediante dispositivos, pero también de los momentos en que el ojo permanece fijo. Así, estudiando el tiempo que se pasa en una zona y la frecuencia de la mirada el software creará el mapa de calor.
Por ejemplo, durante un análisis de eye-tracking, si hay zonas rojas oscuras, significa que las personas centran su mirada en esta parte de tu web durante un determinado período de tiempo. Por otra parte, las zonas de color azul oscuro indican las áreas que no fueron vistas por los usuarios.
Click tracking
El click tracking es un método muy eficaz para evaluar el comportamiento de tus usuarios. Analizando los clics del ratón, te permite saber en qué enlaces hacen clic tus visitantes.
De hecho, gracias a este método, se puede observar muy a menudo que muchos visitantes de un sitio web hacen clic en áreas que no son clicables. Esto plantea la cuestión de lo que los usuarios esperan de esta zona, y si conduce a cierta confusión. Al identificar estos elementos, podrás modificar el diseño o emplazamiento de un elemento para asegurar una mayor legibilidad y mejor tasa de conversión.
Scrolling
El scrolling te permite conocer el tiempo que pasa un usuario en tu página web. Esto te ayuda a saber si estás ofreciendo un contenido de calidad. De hecho, los resultados de este análisis te permitirán revisar el posicionamiento de ciertos elementos en tu página.
Y es que, como sabes, la atención de tu usuario es esencial, y muy a menudo te habrás preguntado si tu contenido ha captado su atención y, si es así, durante cuánto tiempo. Gracias al scrolling, es posible determinar esta duración. Hasta te permite medir dónde ha llegado el usuario en tu web y, por tanto, ver el compromiso de tus visitantes con tu página.
Mouse tracking
El mouse tracking es un método de seguimiento de los movimientos de los ratones de tus usuarios a través de un mapa de calor. Esto permite analizar con precisión las zonas observadas por el usuario en un momento dado.
Así, es posible identificar qué partes de tu página web captan más atención y qué partes, por el contrario, llevan a los usuarios a abandonar tu página.
En definitiva, estos cuatro métodos pueden utilizarse para determinar qué áreas de tu sitio web deben optimizarse. ¿Te animas a probarlos?
Herramientas para crear un heatmap de tu sitio web
Para ayudarte a hacer un mapa de calor, hemos recopilado cuatro plataformas que satisfarán tus necesidades de análisis y optimización.
Sigue leyendo para descubrir algunas de las herramientas más importantes del mercado para crear un heatmap de tu sitio web.
Hotjar
Hotjar es una de las herramientas más conocidas y utilizadas en la optimización de UX y CRO. La herramienta ofrece, entre otros servicios, mapas de calor, realización de encuestas y análisis del embudo de conversión. La herramienta Hotjar es gratuita por debajo de un determinado número de páginas vistas, lo que lo convierte en una herramienta de nivel básico que se puede probar fácil y rápidamente.
Mouseflow
Mouseflow es una plataforma que analiza el comportamiento de tus usuarios para optimizar la experiencia del usuario en tu página web y mejorar tus conversiones. También te permite observar las sesiones de tus visitantes en tiempo real y establecer embudos para saber cuándo y por qué tus visitantes abandonan tu página web.
Heap
Heap es una alternativa interesante si quieres testear tu sitio web rápidamente. Es una herramienta bastante sencilla de configurar e implementar. De hecho, captura automáticamente todos los eventos y acciones sin necesidad de configuración. Esto lo convierte en una poderosa herramienta de seguimiento y análisis del rendimiento de los funnels de ventas y de conversiones.
CrazyEgg
Con CrazyEgg puedes, entre otros, crear mapas de calor y analizar el comportamiento de tus usuarios en tu página web.
Sin embargo, la herramienta no ofrece ninguna solución para reproducir sesiones de vídeo y está limitada en cuanto a filtros y segmentación.
Ejemplos de mapa de calor
Veamos ahora algunos ejemplos de mapa de calor.
En su artículo Understanding heatmaps for better UI design, Fio Dossetto, nos permite relativizar nuestro lado más perfeccionista. Nos dice:
No existe una interfaz perfecta, y si la hubiera, no puedes salirte con la tuya si la diseñas y no la vuelves a mirar.
También nos enseña un ejemplo de scroll map (izquierda) y un click map (derecha) de la misma landing page.
Más adelante en el artículo, nos invita a hacernos las preguntas adecuadas: ¿Dónde dejan de desplazarse los usuarios? ¿Hay información importante por debajo de ese punto?
Gracias a este scroll map (ver abajo), destaca puntos que mejorar. Por ejemplo, aconseja mover los elementos esenciales por encima del pliegue central y eliminar cualquier distracción o elemento confuso que desanime a los usuarios a seguir desplazándose.
Otro ejemplo de mapa de calor marketing se puede encontrar en el blog de Hotjar. Plantea la pregunta siguiente: ¿los usuarios hacen clic en los elementos clave de la página (enlaces, botones y CTA)?
Y para responder a esta pregunta, nada mejor que un click map para confirmar la viabilidad de tus CTA.
De hecho, Hotjar aconseja utilizar:
esta información sobre la experiencia del producto para realizar cambios rápidos en el diseño o para justificar la necesidad de una investigación más profunda de los usuarios. Cuando acabes cambiando la página del producto, consultar el mapa de clics te ayudará a comparar comportamientos y a comprender si tu nuevo diseño tiene éxito.
En la página web de CrazyEgg también puedes encontrar diferentes heatmaps, así como una explicación muy completa de los entresijos de un mapa de calor UX para conocer todos los tecnicismos que se esconden detrás.
En conclusión
En definitiva, los heatmaps son herramientas de análisis muy interesantes para todos los profesionales del marketing digital en general y de la UX en particular. Y es que un mapa de calor permite localizar las zonas que son importantes para los visitantes de un sitio web. Con estos datos, es más fácil deducir el contenido que atraerá y mantendrá la atención de los usuarios y, por tanto, obtendrá una mayor tasa de clics.
Además, esta herramienta ayuda a mejorar la usabilidad de un sitio web y a que la experiencia del usuario sea más fluida y agradable. De hecho, los mapas de calor ofrecen información muy valiosa sobre el uso y la percepción de los usuarios en tu sitio web.
¿Ya has realizado un heatmap de tu página web? ¡Cuéntanoslo en los comentarios, estaremos encantados de leerte!