8 Ejemplos de Mapas de Calor para una Gestión de Productos basada en Datos
Probablemente la característica más importante de un buen product manager es la capacidad de empatizar con los usuarios. Para desarrollar esa habilidad, los PMs pasan horas en entrevistas con usuarios y profundizando en los datos detrás del comportamiento de los usuarios.
Pero hay otra manera de agudizar tu intuición sobre el usuario: analizando cómo interactúan los usuarios con tu producto mediante mapas de calor.
Los mapas de calor son solo una de muchas herramientas de investigación de usuarios que ayudan a descubrir puntos de fricción, intención y oportunidades a lo largo del recorrido del usuario. También forman parte de la analítica de producto, ayudándote a ir más allá de las métricas de vanidad y ver lo que realmente hacen los usuarios.
Want more from The CPO Club?
Sign up for a free membership to complete reading this article:
Have an account? Log In
Si has llegado hasta aquí, probablemente ya tienes curiosidad sobre los beneficios de los mapas de calor, o buscas ejemplos reales para justificar la inversión.
De cualquier manera, estás en el lugar correcto. Vamos a desglosar los diferentes tipos de mapas de calor y cómo puedes usarlos para alcanzar tus objetivos de producto.
#1: Mapas de clics y mapas de toques
Empezamos con el más popular de todos: el mapa de clics (para interfaces de escritorio) o de toques (para interfaces móviles).
Los mapas de clics son la representación visual de cómo los usuarios hacen clic en objetos dentro de tu interfaz. Básicamente, es una captura de pantalla de tu interfaz de usuario con partes resaltadas en distintos colores.
Si tu herramienta de mapas de calor resalta un determinado elemento de tu interfaz, significa que un usuario (o varios) ha hecho clic sobre él. El color, por otro lado, te mostrará la cantidad de clics que ha recibido ese elemento en particular.
Las herramientas de mapas de calor suelen utilizar colores de la escala de temperaturas.
Verás colores más cálidos de este degradado en las áreas que reciben muchos clics y colores más fríos en aquellas que apenas reciben atención.
Así es como se ve la visualización de datos de un mapa de toques para una app móvil que permite gestionar tus finanzas.
Podemos ver que las áreas que muestran el monto gastado en cada transacción están resaltadas en rojo. Esto significa que muchas personas hacen clic allí (probablemente para expandir la transacción y ver los detalles).
Por otro lado, el saldo de la cuenta que está arriba aparece resaltado en verde, lo que indica que pocas personas terminan haciendo clic ahí.
Cómo usar un mapa de clics
Los mapas de clics brindan muchos datos útiles. Puedes aprender mucho sobre el comportamiento de tus usuarios observando las áreas donde hacen clic.
Por ejemplo, si gestionas una app de refugio de perros que tiene una página de donaciones donde los usuarios pueden apoyar económicamente, puedes usar un mapa de clics para ver qué opción de donación es la más popular.
Al observar el mapa de toques anterior, vemos que las opciones de $10 y "Other" (“Otra”) son las elecciones más populares a la hora de seleccionar el monto de la donación.
Una información importante que obtenemos aquí es que probablemente hay un monto de donación que no está presente en la lista (por ejemplo, $1) y la gente hace clic en "Other" para introducir ese importe.
Por eso, lo conveniente sería ver qué montos introduce la gente en la sección "Other", identificar los más comunes y añadirlos a nuestra lista.
#2: Mapas de scroll
Como su nombre indica, este tipo de mapa de calor te permite analizar el comportamiento de desplazamiento de los usuarios.
Los mapas de scroll también están codificados por colores usando la escala de temperatura. Sin embargo, en lugar de resaltar puntos específicos de la interfaz donde la gente ha hecho clic, resaltan secciones completas en la página según la cantidad de personas que han hecho scroll hasta ese punto y han visto esa sección.
Al igual que en otros mapas de calor, encontrarás colores cálidos si mucha gente llega y ve esa sección, y colores fríos cuando son pocos quienes lo hacen.
Cómo usar un mapa de scroll
Los mapas de desplazamiento son excelentes para optimizar la posición de ciertos elementos o secciones en tu página y para solucionar problemas de uso e interacción con estas secciones.
Veamos un caso típico de resolución de problemas examinando el mapa de desplazamiento de la página de precios de un servicio SaaS llamado Nelio.
Imagina que tienes problemas de competitividad. Por alguna razón, las personas prefieren registrarse en tus competidores. Cuando les preguntas por qué, dicen que la otra herramienta tenía una función de seguimiento de múltiples objetivos y tú no.
Bueno, el problema es que sí tienes esta característica, así que ahora necesitas entender por qué la gente no la encuentra.
Al observar el mapa de desplazamiento de tu página de precios, ves que la gran mayoría de los usuarios no se desplazan por la página en absoluto. Entonces te das cuenta de que la descripción de tu función de seguimiento de múltiples objetivos está debajo del pliegue y en la zona azul. Esto significa que solo algunos de tus usuarios se desplazan y leen sobre ella, lo cual puede ser cierto para la mayoría de los comportamientos de usuario relacionados con el desplazamiento.
¡Problema identificado! Ahora, para solucionar esto, puedes considerar agregar las funciones en tu sección “Todos los planes incluyen” como elementos extra en tus listas de planes de precios, asegurándote de que aparezcan por encima del pliegue y que la gente las vea sin desplazarse.
#3: Mapas de calor por desplazamiento del cursor
También conocidos como mapas de movimiento, este tipo de mapa de calor rastrea la posición del ratón, permitiéndote visualizar el comportamiento de “movimiento” de tus usuarios a través de una interfaz.
En la mayoría de los casos, al utilizar mapas de calor por desplazamiento del cursor, se asume que los usuarios probablemente están mirando el elemento sobre el que colocan su cursor. Así, al rastrear el movimiento del ratón, estamos correlacionando eso con lo que las personas ven cuando navegan por la interfaz.
Visualmente, consiste en puntos resaltados (nuevamente, usando una paleta de colores de temperatura) en las partes de tu interfaz donde el cursor del usuario ha permanecido más tiempo. Además, algunas herramientas de mapas de calor también te mostrarán una “traza” de por dónde empiezan tus usuarios y cómo se mueven a lo largo de la interfaz.
Así es como se ven estas trazas.
Este es el mapa de calor de seguimiento del cursor probablemente de una de las interfaces con mejor experiencia de usuario del mundo: el sitio web de Apple (después de todo, son pioneros en el diseño de UX). Estas trazas muestran que las personas comienzan explorando la página de inicio de MacOS Snow Leopard primero examinando al felino fascinante, antes de leer el título y continuar con los demás elementos de la página.
Cómo utilizar un mapa de movimiento del ratón
Una de las formas interesantes en que puedes usar un mapa de movimiento es para identificar distracciones de usuario.
Por ejemplo, si eres responsable de optimizar la página de resultados de búsqueda de Amazon (y tu objetivo es que los usuarios hagan clic en un producto que Amazon les mostró), puedes mirar el mapa de calor por desplazamiento del cursor y ver que la mayoría de los usuarios primero miran uno de tus banners (por ejemplo, algún tipo de anuncio) antes de revisar los resultados de búsqueda.
Esto es una gran distracción para tus usuarios y puede reducir la probabilidad de que hagan clic en los resultados. Así que podrías eliminar ese banner o hacerlo menos destacado visualmente en tu interfaz.
#4: Mapas de calor de atención
Hasta ahora, hemos hablado de tres herramientas analíticas que te permiten analizar visualmente a tus usuarios: mediante clics, movimientos del ratón y desplazamiento por la página.
Aunque cada una de ellas puede ofrecernos información valiosa, depender solo de una podría ser engañoso. Analizar el comportamiento del usuario de manera aislada y sin contexto adecuado puede no ofrecer una visión lo suficientemente amplia de lo que realmente ocurre.
Por ello, los equipos de producto generalmente utilizan todos estos tipos a la vez y combinan los conocimientos obtenidos de las tres antes de analizarlos y sacar conclusiones. Sin embargo, esta solución tampoco es perfecta, ya que probablemente tendrás que dedicar 3 veces más tiempo para realizar el análisis completo.
Por suerte, con el surgimiento de modelos de IA y algoritmos avanzados, las herramientas modernas de visualización de mapas de calor pueden combinar la información reunida de los clics de usuario, movimiento del ratón y desplazamiento en un solo mapa de calor.
Este cuarto tipo se llama mapa de calor de atención, ya que básicamente te indica qué partes de la interfaz reciben más atención de los usuarios. Visualmente se parece a un mapa de clics, con ciertos elementos de tu interfaz resaltados en diferentes colores dentro de la paleta de temperatura, según el nivel de atención recibido.
#5: Mapas de calor geográficos
Los mapas de calor han estado entre nosotros mucho antes de que la gente empezara a aplicar esta técnica a las interfaces de usuario. Uno de los tipos más destacados de mapas de calor tradicionales ha sido el mapa geográfico.
En este caso, resaltas ciertas partes de un mapa en función del tipo de dato que has seleccionado. Por ejemplo, si quieres analizar la distribución geográfica de los lugares turísticos en Francia, puedes utilizar este mapa de calor geográfico.
En el mapa de arriba, se muestra el número de camas de hotel (principalmente enfocadas a turistas) por kilómetro cuadrado. Como podemos ver, Córcega, los Alpes franceses y la Costa Azul son los claros ganadores en esta categoría.
Cómo usar un mapa de calor geográfico
Mirar los conjuntos de datos turísticos de Francia está muy bien, pero ¿pueden estos mapas de calor ayudarme a analizar mi producto digital? Déjame mostrarte un ejemplo.
Sigamos con el tema del turismo (y Francia) e imaginemos que gestionas un servicio de alquiler vacacional en línea (algo similar a Airbnb). Tienes la idea de crear y distribuir materiales promocionales para festivales locales en ciudades francesas para conseguir que más gente reserve hoteles allí utilizando tu servicio.
La primera pregunta que te vendría a la mente es: ¿con qué ciudad o festival debería empezar?
Para encontrar la respuesta, puedes trazar el mapa de calor geográfico mostrando la distribución de viviendas y apartamentos en alquiler que utilizan tu servicio.
Al observar el mapa, verás que tu servicio es bastante popular en el sur de Francia. Así que, tal vez deberías considerar empezar promocionando los festivales de Provenza y la Costa Azul.
#6: Mapas de clics furiosos
Este es un subtipo de mapa de clics que filtra y te muestra solo los casos en los que tus usuarios han hecho clic en algo repetidamente por frustración. Las herramientas de mapas de calor suelen identificar algo como un clic furioso (o clic muerto) si el usuario sigue haciendo clic varias veces seguidas sobre el mismo elemento.
Cómo usar un mapa de clics furiosos
Los mapas de clics furiosos son excelentes herramientas para identificar experiencias de usuario problemáticas. Puede tratarse de algo que parece ser clicable pero no lo es, no es intuitivo, o simplemente es un botón que no está funcionando.
Por ejemplo, si hiciéramos un análisis de datos de clics furiosos en una de las páginas de Iterate, probablemente veríamos clics furiosos en al menos dos lugares; aquí está el motivo:
¿Has notado los dos elementos de texto resaltados en azul? Adivina qué, esos no son enlaces. Es solo texto común coloreado en azul. Muchos visitantes de Iterate (incluyéndome a mí) han intentado hacer clic en esos elementos de texto esperando que los redirija a otra página.
Por supuesto, nada sucede al hacer clic en ellos, y esto podría hacer que el usuario se frustre y comience a "clicar furiosamente".
Las lecciones aprendidas al examinar el mapa de clics furiosos de esta página serían asegurarte de que tu texto no parezca hipervínculos, por ejemplo. Quizá podrías realizar una prueba A/B con diferentes colores y ver si tu suposición de que el texto azul causa clics furiosos es verdadera o falsa.
#7: Mapas de calor de seguimiento ocular
Hasta ahora, hemos utilizado mapas de desplazamiento para entender dónde han estado mirando nuestros usuarios al navegar por nuestra página web. Suponemos que los ojos de los usuarios están mirando el cursor la mayor parte del tiempo. Así que el movimiento del cursor por tu interfaz podrá decirte en qué se están centrando los ojos de tus usuarios.
Este es un método común para analizar la atención. Sin embargo, los datos de mapas de calor que proporciona no son perfectos, ya que los usuarios no siempre mirarán su cursor.
Si quieres obtener datos precisos sobre la ubicación y valores numéricos de lo que tus usuarios están mirando, entonces deberías considerar usar un mapa de calor de seguimiento ocular.
A diferencia de los otros, los mapas de calor de seguimiento ocular requerirán que tus usuarios usen equipos especializados que sigan el movimiento de sus ojos e identifiquen la ubicación de los elementos que están visualizando.
Esto significa que tendrás que invitar a tus usuarios a sesiones especiales de prueba, conseguir que se pongan estos rastreadores y empiecen a utilizar tu producto. Aunque es mucho más laborioso y costoso, la calidad de los datos que obtienes es muy superior a la que puedes conseguir con otros tipos de mapas de calor web.
Cómo usar un mapa de calor de seguimiento ocular
Teniendo en cuenta el coste de organizar sesiones de pruebas con seguimiento ocular, probablemente solo termines utilizándolo en áreas de optimización de UX de alto impacto.
Los estudios de seguimiento ocular son muy habituales en los productos de las grandes empresas tecnológicas, donde una mejora del 1% en la usabilidad de sus productos puede traducirse en decenas de millones en ingresos y retorno de la inversión.
Imagina cuánto ARR adicional puede obtener Amazon si realiza un estudio de seguimiento ocular y coloca sus banners de productos destacados de manera que la tasa de conversión aumente un 1%.
#8: [Bonus] Mapas Confetti
Los mapas de calor confetti son un subtipo de los mapas de clics tradicionales que muestran los clics individuales en lugar de resaltar solo el área general donde han hecho clic los usuarios.
La belleza de analizar clics individuales reside en la capacidad de filtrarlos según varios puntos de datos complejos.
Aquí, por ejemplo, hemos agrupado los clics en el CTA de búsqueda según el día de la semana en que se produjo el evento.
Según los datos, podemos ver que los martes son los que acumulan más clics, mientras que quienes visitan los lunes son los más distraídos (muchos clics repartidos por toda la interfaz).
Cómo usar un mapa de calor confetti
Los mapas confetti son especialmente útiles cuando necesitas analizar el comportamiento del usuario a un nivel granular. A diferencia de los mapas de calor tradicionales que muestran datos agregados, los mapas confetti te permiten filtrar los clics individuales según parámetros como el tipo de dispositivo, la fuente de referencia o incluso la hora del día.
Este tipo de mapa de calor es ideal para detectar patrones que de otro modo pasarían desapercibidos. Por ejemplo, si tu botón de compra recibe más clics los viernes pero muchos menos los lunes, tus usuarios podrían ser compradores impulsivos al recibir su paga—y el público de los lunes todavía podría estar recuperándose del fin de semana, mirando fijamente tu página de precios en vez de convertir.
Los mapas confetti también pueden resaltar distracciones inesperadas. Si los usuarios hacen clic por toda la página en lugar de donde tú quieres, podrían estar confundidos—o simplemente buscando desesperadamente una señal de vida. Si tu menú de navegación recibe más clics que tu CTA, podría significar que los usuarios están perdidos y esperan escapar en vez de interactuar. Puedes aprovechar los aprendizajes de los mapas de calor para perfeccionar tu mapa de recorrido del usuario, sobre todo al identificar esos puntos de fricción. Filtrar por segmento de usuario te ayuda a ver qué grupos tienen más dificultades y dónde necesitas mejorar la experiencia.
Los mapas de calor mejoran tu empatía con el usuario
Cada tipo de mapa de calor que hemos descubierto aquí juntos puede brindarte una visión de cómo tus usuarios exploran y utilizan tus productos. Si trabajas con recursos limitados, los mapas de calor ofrecen una forma rápida y ligera de realizar investigación UX antes de invertir en test de usabilidad más profundos. Con su ayuda, podrás ver y sentir las dificultades que experimentan tus usuarios y avanzar para resolverlas.
Combinados con herramientas de analítica de producto, los mapas de calor pueden ofrecer una visión más clara de cómo los usuarios interactúan con tu producto y en qué puntos lo abandonan. Por ejemplo, al combinar mapas de calor con herramientas de grabación de sesiones obtienes tanto el ‘qué’ como el ‘por qué’ detrás del comportamiento del usuario.
Los mapas de calor son estupendos, pero solo son uno de los muchos recursos con los que puedes construir empatía; para conocer más sobre el resto, asegúrate de suscribirte a nuestro boletín.