Aprende / Guías / Guía de heatmaps
5 ejemplos de heatmaps reales: cómo interpretarlos y cómo aprovechar los insights
Los heatmaps o mapas de calor son representaciones visuales codificadas por colores de cómo interactúan los usuarios con una página online. Con cada tipo de heatmap se pueden adquirir insights muy díferentes.
En este capítulo de la guía de heatmaps, analizaremos cinco ejemplos de mapas de calor y explicaremos cómo utilizarlos para mejorar un 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.
1. Ejemplo 1: un mapa de desplazamiento vertical para averiguar qué contenido ignoran los usuarios
El heatmap anterior es un mapa de desplazamiento vertical. Muestra hasta qué punto de la página se desplazan hacia abajo los usuarios. Está configurado en la antigua página de empleo de Hotjar para analizar cómo los posibles candidatos interactúan con el contenido.
¿Cómo se puede interpretar este mapa de desplazamiento vertical?
Al observar el mapa de desplazamiento vertical, se aprecian inmediatamente dos cambios bruscos de color: uno en la parte superior de la página (de rojo a amarillo) y otro en la inferior (de verde a azul oscuro). En un mapa de este tipo, generalmente se produce una transición suave y progresiva entre los colores. Un cambio brusco te avisa de que un porcentaje significativo de usuarios ha dejado de desplazarse hacia abajo tras llegar a un punto concreto.
Centrémonos en el cambio de verde a azul de la parte inferior. Según la disposición del contenido, podemos suponer dos hipótesis:
Los visitantes creen que han llegado al final de la página en cuanto aparece la sección de vacantes actuales y, por lo tanto, la abandonan.
A los potenciales candidatos les interesan las vacantes y, por lo tanto, hacen clic para pasar a la siguiente página.
En cualquier caso, solo un 20 % del total de visitantes llega hasta el final de la página.
La valoración de Hotjar en Glassdoor de 5 sobre 5 (muy por encima de la media) es una fantástica prueba social para los posibles candidatos, pero el 80 % de las personas que visitan la página nunca lo sabrán.
¿Cómo se pueden aprovechar los insights que aporta este mapa de desplazamiento vertical?
Los datos del mapa de calor mostraron que el 80 % de los visitantes no llegaban al final de la página ni veían la sección de pruebas sociales.
A partir de estos insights, decidimos acortar (drásticamente) la página y colocar los testimonios de los empleados más arriba, justo debajo del límite visible medio.
Ahora, el 75 % de los visitantes ven la sección de testimonios y la friolera del 69 % llega al final de la página.
💡Consejo avanzado: Combina los datos numéricos de Heatmaps con los insights cualitativos de Feedback para averiguar qué más mejoras puedes hacer en tu página.
Por ejemplo, a nosotros un usuario nos señaló que no podía filtrar las vacantes por funciones o ubicación, así que añadimos esa opción:
Este tipo de insights de los usuarios son una mina de oro para tu sitio web, producto o servicio.
2. Ejemplo 2: un mapa de clics para descubrir que los usuarios ignoran un vídeo
El heatmap anterior es un mapa de clics. Muestra los puntos del sitio web en donde los visitantes hacen clic. Las partes en la que más hacen clic están indicadas con colores cálidos, y las que menos clics reciben, con colores fríos. Lo configuramos en la nueva versión de nuestra página de empleo para analizar la interacción de los usuarios con los elementos principales.
¿Cómo se puede interpretar este mapa de clics?
Como parte del rediseño de la página de empleo, incluimos un vídeo en la sección de testimonios de la parte superior. Supusimos que a los visitantes les gustaría saber cómo transcurrió nuestra última reunión de empresa y harían clic en el icono de reproducir. Pero no fue así.
Casi nadie hizo clic en este icono, porque solo se registraron 2 clics en 3300 sesiones (lo que supone un CTR del 0,02).
El mapa de clics aportó datos interesantes sobre nuestra hipótesis de que los usuarios prefieren ver ejemplos de la cultura de Hotjar en vídeo que leer sobre ella.
Este sencillo análisis de datos nos permitió formular dos hipótesis para explicar por qué los visitantes no reproducen el vídeo:
No les interesa.
No se dan cuenta de que es un vídeo y que se puede hacer clic en el botón.
¿Cómo se pueden aprovechar los insights que aporta este mapa de clics?
Para validar esas hipótesis, pudimos hacer una prueba A/B sobre el diseño o el contenido de esta sección para mejorar la experiencia de usuario.
💡Consejo avanzado: Haz entrevistas a usuarios con Hotjar Engage para preguntarles directamente lo que quieras saber. Nosotros incluimos este paso en nuestro proceso de investigación sobre el producto para saber por qué no hacían clic en el vídeo y averiguar qué tipo de cambio teníamos que hacer en esa sección antes de lanzar un experimento.
3. Ejemplo 3: un mapa de movimientos para averiguar por dónde mueven el ratón los usuarios
El heatmap anterior es un mapa de movimientos. Muestra por dónde mueven el ratón los usuarios cuando navegan por la página. Consciente o inconscientemente, los ojos de los usuarios van siguiendo los movimientos del ratón cuando hacen clic y pasan el ratón por encima de los distintos elementos de la página. Por tanto, los mapas de movimientos podrían utilizarse como una tecnología fiable de eye-tracking o seguimiento ocular.
¿Cómo se puede interpretar este mapa de movimientos?
Este mapa de movimientos correspondiente a la página de nuestra guía de heatmaps nos indica qué elementos captan la atención de los lectores en este contenido de formato largo. Un insight interesante que hemos descubierto es que los bloques de texto largos no consiguen mantener la atención de los lectores, como indica la combinación de colores fríos que aparece más abajo en el párrafo:
¿Cómo se pueden aprovechar los insights que aporta este mapa de movimientos?
Como pocos lectores movían el ratón por la parte inferior de esta sección de texto, cabe suponer que la mayoría empieza a leer el contenido, pero acaba simplemente escaneándolo.
Según esta información, podemos formular dos hipótesis:
El contenido en sí no les resulta lo suficientemente atractivo.
El contenido que necesitan los usuarios está al principio de la sección.
Si la primera hipótesis fuera cierta, deberíamos cambiar el texto para que la lectura hasta el final resulte más atractiva. Si nos encontráramos ante el segundo caso, deberíamos plantearnos acortar la sección por completo.
Pero, antes de tomar una decisión, es posible que necesitemos comprender el contexto de este comportamiento y validar nuestra hipótesis. En ese caso, el mapa de movimientos es un excelente punto de partida para hacer una investigación más avanzada y profunda.
💡Consejo avanzado: Una encuesta de opinión sobre el contenido también puede ayudarnos a determinar si a los lectores les parece suficiente el contenido de la página, si creen que falta algo o si el diseño no es de su agrado.
4. Ejemplo 4: un mapa de zonas de interacción para saber cómo interactúan los usuarios con la página
Los mapas de zonas de interacción combinan en una única vista conjuntos de datos de los mapas de clics, movimientos y desplazamientos verticales en ordenadores (o toques y desplazamientos verticales en móviles y tabletas). Es la herramienta de análisis de heatmaps por excelencia para visualizar datos.
¿Cómo se puede interpretar este mapa de zonas de interacción?
Al examinar la sección de testimonios incluida en la página sobre nuestra empresa, la herramienta de mapas de calor muestra que los usuarios interactúan con las tarjetas (¡bien!).
Los elementos con los que más interactúan los usuarios son el logotipo de Glassdoor y el texto “Current Hotjar employee”. Parece como si los usuarios quisieran hacer clic para ver la reseña en Glassdoor…, pero ninguno de estos componentes es clicable (¡ups!).
Sin embargo, ignoran por completo el texto “Read the review”, en el que sí se puede hacer clic (Hum…).
¿Cómo se pueden aprovechar los insights que aporta este mapa de zonas de interacción?
El comportamiento de los usuarios en esta sección apunta a que quieren comprobar la autenticidad de las opiniones de Glassdoor. Al fin y al cabo, podrían suponer que una empresa que no enlaza los testimonios es porque se los ha inventado.
Bajo ningún concepto queremos que los usuarios tengan esa impresión, sobre todo porque sí que enlazamos las opiniones de Glassdoor…
Los mapas de zonas de interacción han puesto de manifiesto una posible fuente de desconfianza. A partir de esta información, podríamos darle una vuelta al diseño de nuestras tarjetas de testimonios y probar a aplicar algunos cambios, como:
Hacer que el logotipo de Glassdoor y el elemento inferior izquierdo sean clicables.
Mejorar la visibilidad del texto “Read the review”.
💡Consejo avanzado: Antes de hacer ningún cambio, convendría hacer una encuesta de prueba de concepto para averiguar cuál de los dos (o más) diseños funcionaría mejor entre los usuarios.
Un ejemplo de una prueba de preferencia sobre el logotipo de Hotjar.
5. Ejemplo 5: un mapa de clics con rabia para determinar exactamente en qué parte de la página se frustran los usuarios
Como habrás adivinado, un mapa de clics con rabia muestra en qué puntos concretos de la página se registran clics con rabia. Los clics con rabia se producen cuando los usuarios hacen clic repetidamente en una determinada área o en un elemento específico de un sitio web en poco tiempo. En definitiva, identifican puntos de fricción que dificultan la conversión.
¿Cómo se puede interpretar este mapa de clics con rabia?
En la siguiente tabla de precios, se observa que hay determinadas funciones de cada plan que registran clics con rabia.
Según este dato, se pueden formular las hipótesis de que los usuarios no entienden qué significan esas funciones, que les gustaría tener más información sobre ellas o que esperan un enlace en el que hacer clic para obtener más información sobre ellas, en esa página o en otra.
¿Cómo se pueden aprovechar los insights que aporta este mapa de clics con rabia?
En función de las hipótesis formuladas, se pueden tomar varias medidas para mejorar la experiencia de usuario con esta tabla de nuestra página de precios. Por ejemplo:
Hacer más visibles las burbujas de información.
Mostrar el contenido de las burbujas de información cuando los usuarios pasan el ratón por encima del texto (y no solo de las burbujas).
Sustituir las burbujas de información por un componente desplegable.
Cambiar el nombre de las funciones para hacerlas más explícitas.
Añadir un enlace a las funciones que dirija a los usuarios a una parte inferior de la página, donde encontrarán una explicación más detallada.
Al identificar elementos que frustran a los usuarios, el mapa de clics con rabia nos ha proporcionado oportunidades para mejorar la experiencia de usuario. Ahora podemos hacer pruebas A/B para determinar qué opción tiene una mejor acogida entre nuestros usuarios.
💡Consejo avanzado: Los mapas de clics con rabia también pueden mostrar dead clicks o clics fallidos en tu página. Este tipo de clics se producen cuando los usuarios hacen clic en una página o elemento sin ningún efecto. Si observas que se registran clics con rabia en un CTA o en un hipervínculo, podría ser señal de que los usuarios no pueden hacer clic en ese enlace. Por lo tanto, la tasa de conversión seguramente disminuirá. En ese caso, te recomendamos:
Consultar la página publicada.
Comprobar las tasas de conversión en Funnels.
Ver grabaciones de sesiones filtradas por "errores" en esta página.
Si confirmas que efectivamente esos clics son fallidos, arregla el problema y verás como tus métricas se dispararán. 🚀
Consigue más insights con los diferentes tipos de heatmaps
Ahora que ya sabes cómo utilizar cada tipo de mapa de calor, es el momento de que empieces a recopilar información útil sobre el comportamiento de tus usuarios. Consigue los datos que necesitas para mejorar la experiencia de usuario en tu sitio web y aumentar las conversiones.
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.
