8 Ejemplos de Mapas de Calor para la Gestión de Productos Basada en Datos
Probablemente la característica más importante de un buen gestor de producto es la capacidad de empatizar con los usuarios. Para desarrollar ese músculo, los PM dedican horas a entrevistas con usuarios y analizan los datos detrás del comportamiento de los usuarios.
Pero hay otra forma de afinar tu intuición sobre los usuarios: analizando cómo interactúan con tu producto a través de los mapas de calor.
Los mapas de calor son solo una de las muchas herramientas de investigación de usuarios que ayudan a descubrir fricciones, intenciones y oportunidades a lo largo del recorrido del usuario. También forman parte del paraguas de la analítica de producto, ayudándote a ir más allá de los indicadores de vanidad y ver lo que realmente hacen los usuarios.
¿Quieres más de The CPO Club?
Regístrate para obtener una membresía gratuita y terminar de leer este artículo:
Have an account? Log In
Si has llegado hasta aquí, probablemente ya sientes curiosidad por los beneficios de los mapas de calor, o buscas ejemplos reales para justificar la inversión.
En cualquier caso, estás en el lugar correcto. Veamos los diferentes tipos de mapas de calor y cómo puedes utilizarlos para alcanzar tus objetivos de producto.
#1: Mapas de clics y de toques
Empezamos por el más popular de todos: el mapa de clics (para interfaces de escritorio) o de toques (para interfaces móviles).
Los mapas de clic son la representación visual de cómo tus usuarios hacen clic en los elementos de tu interfaz. Básicamente es una captura de pantalla de tu interfaz con partes resaltadas en diferentes colores.
Si tu herramienta de mapa de calor resalta un determinado elemento de tu interfaz, significa que un usuario (o varios) ha hecho clic en él. El color, por su parte, te indica la cantidad de clics que ha recibido ese elemento específico.
Las herramientas de mapas de calor suelen utilizar colores de la escala de temperatura.
Verás colores más cálidos de este gradiente en las zonas que reciben muchos clics y tonos más fríos en las áreas que apenas reciben atención.
Así es como se ve la visualización de datos de un mapa de toques en una app móvil que te permite gestionar tus finanzas.
Podemos ver que las áreas que especifican la cantidad gastada en cada transacción están resaltadas en rojo. Eso significa que muchas personas hacen clic allí (probablemente para expandir la transacción y ver los detalles).
El saldo de la cuenta en la parte superior, en cambio, está resaltado en verde, lo que indica que pocas personas hacen clic en esa zona.
Cómo usar un mapa de clics
Los mapas de clics son muy ricos en información accionable. Puedes aprender mucho sobre el comportamiento de tus usuarios observando las zonas donde hacen clic.
Por ejemplo, si gestionas una app de refugio de perros que tiene una página de donaciones en la que los usuarios pueden apoyar económicamente a tu refugio, puedes usar un mapa de clics para ver qué opción de donación tiene mejor rendimiento.
Al observar el mapa de toques anterior, podemos afirmar que las opciones de $10 y "Other" son con diferencia las más populares a la hora de elegir el importe de la donación.
Un dato importante que obtenemos aquí es que probablemente hay una cantidad de donación que no está en la lista (por ejemplo, $1) y la gente pulsa en "Other" para introducir ese importe.
Por lo tanto, es una buena idea ver qué ingresa la gente en la sección “Other”, encontrar las más populares y añadirlas a nuestra lista.
#2: Mapas de desplazamiento
Como sugiere el nombre, este tipo de mapa de calor te permite analizar el comportamiento de desplazamiento de tus usuarios.
Los mapas de desplazamiento también están codificados por colores según la escala de temperatura. Sin embargo, en vez de resaltar puntos específicos donde la gente hace clic en tu interfaz, resaltan secciones enteras de la página según la cantidad de personas que han llegado a ese punto desplazándose y han visto esa sección.
Al igual que en otros mapas de calor, tendrás zonas resaltadas con colores cálidos si muchas personas se han desplazado y han visto esa sección, y zonas frías cuando han sido pocas personas.
Cómo usar un mapa de desplazamiento
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/compromiso con estas secciones.
Repasemos 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 estás teniendo problemas de competitividad. Por alguna razón, la gente prefiere registrarse con tus competidores. Cuando les preguntas por qué, te dicen que la otra herramienta tenía una función de seguimiento de objetivos múltiples y tú no.
Bueno, el problema es que sí tienes esta función, así que ahora necesitas entender por qué la gente no la encuentra.
Al mirar el mapa de desplazamiento de tu página de precios, ves que la gran mayoría de tus usuarios no se desplazan por la página. Entonces notas que la descripción de tu función de seguimiento de objetivos múltiples está debajo del pliegue y en la zona azul. Esto significa que solo unos pocos usuarios se desplazan y la leen, lo cual es común en la mayoría de los comportamientos de usuario que desplaza.
¡Problema identificado! Ahora, para solucionarlo, 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 aparezca sobre el pliegue y que la gente lo vea sin necesidad de desplazarse.
#3: Mapas de calor por desplazamiento del cursor
También conocido como mapa de movimientos, este tipo de mapa de calor rastrea la posición del ratón, permitiéndote visualizar el comportamiento de “movimiento” de tus usuarios en una interfaz.
En la mayoría de los casos, al usar mapas de calor por desplazamiento, asumimos que los usuarios probablemente estén mirando el elemento sobre el que pasan el cursor. Por lo tanto, al rastrear el movimiento del ratón, lo correlacionamos con lo que la gente está mirando mientras navega por nuestra interfaz.
Visualmente, consiste en puntos resaltados (de nuevo, 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 un “trazo” de dónde suelen comenzar los usuarios y cómo se mueven por la interfaz.
Así es como se ven estos trazos.
Este es el mapa de calor por seguimiento de ratón de probablemente una de las interfaces con mejor experiencia de usuario del mundo: la web de Apple (después de todo, ahí surgieron los primeros diseñadores UX de la historia). Estos trazos muestran que la gente empieza a explorar la página de presentación de MacOS Snow Leopard primero mirando al fascinante felino, luego leyendo el título y continuando con los demás elementos de la página.
Cómo usar un mapa de movimientos
Una de las formas interesantes de usar un mapa de movimientos es identificar distracciones de usuario.
Por ejemplo, si te encargas de optimizar la página de resultados de búsqueda de Amazon (tu objetivo es que los usuarios hagan clic en un producto que Amazon encontró para ellos), podrías ver en el mapa de calor por desplazamiento 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 disminuir las probabilidades de que hagan clic en los resultados de búsqueda. Por lo tanto, deberías eliminar ese banner o hacerlo menos prominente visualmente en tu interfaz.
#4: Mapas de calor de atención
Hasta ahora hemos hablado de tres herramientas analíticas que permiten analizar visualmente a tus usuarios: mediante clics, movimientos del ratón y desplazamientos en la página.
Aunque cada una de ellas puede proporcionarnos información valiosa, depender solo de una puede llevarnos a equívocos. Observar el comportamiento del usuario de forma aislada, sin el contexto adecuado, puede no darnos una visión lo suficientemente amplia de lo que realmente sucede.
Por eso, los equipos de producto suelen usar todos estos tipos a la vez y combinar los conocimientos obtenidos de los tres antes de analizar y sacar conclusiones. Aun así, esta solución tampoco es perfecta, ya que probablemente tendrás que gastar tres veces más tiempo en realizar el análisis completo.
Por suerte, con la llegada de modelos de inteligencia artificial y algoritmos avanzados, las herramientas modernas de visualización de mapas de calor pueden combinar la información obtenida de los clics de usuario, el desplazamiento del ratón y el desplazamiento vertical 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 son las que más atención reciben de tus usuarios. Visualmente, se parece mucho a un mapa de clics, con ciertos elementos de tu interfaz resaltados en diferentes colores de la paleta de temperatura en función de la cantidad de atención del usuario.
#5: Mapas de calor geográficos
Los mapas de calor han estado presentes mucho antes de que las personas comenzaran 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 según el tipo de dato que hayas seleccionado. Por ejemplo, si quieres analizar la distribución geográfica de los lugares turísticos en Francia, puedes usar este mapa geográfico de calor.
En el mapa anterior, se muestra el número de camas de hotel (principalmente orientadas a turistas) por kilómetro cuadrado. Como podemos ver, Córcega, los Alpes Franceses y la Costa Azul son claramente los ganadores en esta categoría.
Cómo usar un mapa geográfico de calor
Mirar los conjuntos de datos turísticos de Francia es interesante, 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 imagina que diriges un servicio de alquiler vacacional en línea (algo similar a Airbnb). Tienes la idea de crear y distribuir materiales promocionales de festivales locales en ciudades francesas para incentivar que más personas reserven hoteles allí usando tu servicio.
La primera pregunta que te vendría a la mente sería: ¿con qué ciudad/festival deberías comenzar?
Para responder a eso, puedes graficar un mapa geográfico de calor que muestre la distribución de viviendas y apartamentos de alquiler que utilizan tu servicio.
Al observar el mapa, verás que tu servicio es bastante popular en el sur de Francia. Así que, quizás deberías considerar comenzar promoviendo los festivales de Provenza y la Costa Azul.
#6: Mapas de Clicks de Frustración
Este es un subtipo de mapa de clicks que filtrará y te mostrará solo los casos en los que tus usuarios hayan hecho clic en algo de manera repetida por frustración. Las herramientas de mapas de calor generalmente identifican algo como un click de frustración (o click muerto) si el usuario sigue haciendo clic en el mismo elemento varias veces seguidas.
Cómo usar un mapa de clicks de frustración
Los mapas de clicks de frustración son excelentes herramientas para identificar experiencias problemáticas de usuario. Puede tratarse de algo que parece ser clicable pero no lo es, no es intuitivo, o simplemente un botón que no funciona.
Por ejemplo, si hiciéramos un análisis de datos de clicks de frustración en una de las páginas de Iterate, sin duda veríamos clicks de frustración en al menos dos lugares. Aquí está la razón:
¿Notaste los dos elementos de texto resaltados en azul? Adivina qué, no son enlaces. Es simplemente texto ordinario coloreado de azul. Muchos visitantes de Iterate (incluyéndome a mí) han intentado hacer clic en estos elementos de texto esperando que redirijan a otra página.
Por supuesto, no ocurrirá nada al hacer clic sobre ellos, y esto podría llevar a que el usuario se frustre y comience a "hacer clicks de frustración".
Las lecciones aprendidas al examinar el mapa de clicks de frustración de esta página serían asegurarte de que tu texto no parezca enlaces, por ejemplo. Quizás podrías ejecutar un test A/B con diferentes colores y ver si tu suposición de que el texto azul causa clicks de frustración es verdadera o falsa.
#7: Mapas de Calor de Seguimiento Ocular
Hasta ahora, hemos utilizado mapas de movimiento del cursor para entender hacia dónde han estado mirando nuestros usuarios cuando navegan por nuestra página web. Suponemos que los ojos de los usuarios están enfocados en el cursor la mayor parte del tiempo. Así que, el movimiento del cursor por tu interfaz puede indicarte en qué se están enfocando los ojos de tus usuarios.
Esta es una forma habitual de 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 el cursor.
Si deseas obtener datos precisos sobre la ubicación y números acerca de dónde están mirando tus usuarios, entonces deberías considerar usar un mapa de calor de seguimiento ocular.
A diferencia de otros, los mapas de seguimiento ocular requerirán que tus usuarios utilicen equipamiento especializado que permita rastrear el movimiento de sus ojos e identificar la ubicación de los elementos que están observando.
Esto significa que tendrás que invitar a tus usuarios a sesiones especiales de prueba, hacer que se pongan estos rastreadores y empiecen a usar tu producto. Aunque es mucho más lento y costoso, la calidad de los datos que obtienes de esto es muy superior a la que puedes conseguir con otros tipos de mapas de calor de sitios web.
Cómo usar un mapa de calor de seguimiento ocular
Considerando el costo de organizar sesiones de pruebas con seguimiento ocular, probablemente solo termines usando esta técnica en áreas de alta repercusión para la optimización UX.
Los estudios de seguimiento ocular son muy comunes 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 inversión.
Imagina cuánto ARR extra obtendrá Amazon si realiza un estudio de seguimiento ocular y ubica sus banners de productos destacados de forma que la tasa de conversión aumente un 1%.
#8: [Bonus] Mapas confeti
Los mapas de calor tipo confeti son una subclase de los mapas de clics normales, que muestran los clics individuales en vez de resaltar el área general donde los usuarios han hecho clic.
Lo interesante de analizar los clics individuales es la posibilidad de filtrarlos según distintos puntos de datos complejos.
Aquí, por ejemplo, hemos agrupado los clics en el CTA de Búsqueda por el día de la semana en que ocurrió el evento.
Según los datos, vemos que los martes reciben más clics, mientras que quienes visitan los lunes son los más distraídos (hay clics dispersos por toda la interfaz).
Cómo utilizar un mapa de calor confeti
Los mapas de calor confeti son especialmente útiles cuando se necesita analizar el comportamiento de los usuarios a un nivel muy detallado. A diferencia de los mapas de calor tradicionales, que muestran datos agregados, los mapas confeti permiten filtrar clics individuales según parámetros como tipo de dispositivo, fuente de referencia o incluso la hora del día.
Este tipo de mapa de calor es excelente para descubrir patrones que de otra manera pasarían desapercibidos. Por ejemplo, si tu botón de compra recibe más clics los viernes y muchos menos los lunes, puede que tus usuarios sean compradores impulsivos motivados por la paga, y tal vez los de los lunes aún no se recuperan del fin de semana, mirando fijamente tu página de precios en vez de convertir.
Los mapas confeti también pueden resaltar distracciones inesperadas. Si los usuarios hacen clic por toda la página en lugar de donde quieres, es posible que estén confundidos, o simplemente buscando desesperadamente una señal. Si tu menú de navegación recibe más clics que tu CTA, puede significar que los usuarios están perdidos y buscan salir en vez de interactuar. Puedes usar la información de los mapas de calor para perfeccionar tu mapa de viaje del usuario, especialmente 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 potencian tu empatía con el usuario
Cada tipo de mapa de calor que hemos descubierto juntos aquí te permite ver 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 pruebas de usabilidad más profundas. Con su ayuda, podrás ver y sentir las dificultades que experimentan tus usuarios y avanzar en solucionarlas.
Combinados con herramientas de análisis de producto, los mapas de calor pueden proporcionar una imagen más clara de cómo interactúan los usuarios con tu producto y dónde se desconectan. Por ejemplo, al combinar mapas de calor con herramientas de reproducción de sesiones obtienes tanto el ‘qué’ como el ‘por qué’ del comportamiento del usuario.
Los mapas de calor son geniales, pero solo son una de las muchas herramientas que puedes usar para desarrollar empatía; para conocer el resto, asegúrate de suscribirte a nuestro boletín.