Probablemente, el rasgo más importante de un buen gerente de producto sea la capacidad de empatizar con los usuarios. Para desarrollar esa habilidad, los gerentes de producto pasan horas realizando entrevistas con usuarios y analizando los datos sobre su comportamiento.
Pero existe otra forma de agudizar tu intuición sobre los usuarios: analizar cómo interactúan con tu producto mediante 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 ámbito de la analítica de producto, ya que te ayudan a ir más allá de las métricas vanidosas y a ver lo que los usuarios realmente hacen.
Si has llegado hasta aquí, es probable que ya sientas curiosidad por los beneficios de los mapas de calor o que estés buscando ejemplos del mundo real para justificar la inversión.
En cualquier caso, estás en el lugar adecuado. Vamos a analizar los diferentes tipos de mapas de calor y cómo puedes utilizarlos para alcanzar tus objetivos de producto.
#1: Mapas de clics y mapas de toques
Comenzamos por el más popular de todos: el mapa de clics (para las interfaces de escritorio) o de toques (para las interfaces móviles).
Los mapas de clics son la representación visual de la forma en que los usuarios hacen clic en los elementos de tu interfaz. Consisten simplemente en una captura de pantalla de tu interfaz de usuario con algunas partes resaltadas en diferentes colores.
Si tu herramienta de mapas de calor resalta un elemento determinado de tu interfaz, significa que un usuario (o muchos de ellos) ha hecho clic en él. El color, por otro lado, te mostrará el número de clics que ha recibido ese elemento concreto.
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 áreas que reciben muchos clics y resaltes de colores más fríos en las áreas que reciben poca atención.
Este es el aspecto que tiene la visualización de datos de un mapa de toques para una aplicación móvil que te permite gestionar tus finanzas.
Podemos observar que las áreas que indican el importe gastado en cada transacción aparecen resaltadas en rojo. Esto significa que muchas personas hacen clic en ellas (probablemente para ampliar la transacción y ver los detalles).
El saldo de la cuenta situado en la parte superior, por otro lado, aparece resaltado en verde, lo que indica que pocas personas terminan haciendo clic en él.
Cómo utilizar un mapa de clics
Los mapas de clics ofrecen una gran cantidad de información útil para tomar medidas. Al observar las áreas en las que hacen clic, puedes aprender muchas cosas sobre el comportamiento de tus usuarios.
Por ejemplo, si gestionas una aplicación de un refugio para perros que tiene una página de donaciones donde los usuarios pueden apoyar económicamente al refugio, puedes utilizar un mapa de clics para ver qué opción de donación funciona mejor.
Al examinar el mapa de toques anterior, podemos afirmar que las opciones de $10 y «Otra» son, con diferencia, las más populares a la hora de elegir el importe de la donación.
Una conclusión importante que podemos extraer es que probablemente exista un importe de donación que no aparece en la lista (por ejemplo, $1) y que las personas hacen clic en «Otra» para introducirlo.
Por lo tanto, probablemente sea buena idea comprobar qué importes introducen las personas en la sección «Otra», identificar los más populares y añadirlos a nuestra lista.
#2: Mapas de desplazamiento
Como su nombre indica, este tipo de mapa de calor te permite analizar el comportamiento de desplazamiento de tus usuarios.
Los mapas de desplazamiento también utilizan la escala de temperatura mediante colores. Sin embargo, en lugar de resaltar los puntos de tu interfaz en los que las personas han hecho clic, resaltan secciones enteras de tu página según el número de personas que se han desplazado hasta ese punto y han visto esa sección.
Al igual que ocurre con los demás mapas de calor, obtendrás resaltes de colores cálidos si muchas personas se desplazan y ven esa sección, y colores fríos cuando lo hacen pocas personas.
Have an account? Log In
Cómo utilizar un mapa de desplazamiento
Los mapas de desplazamiento son excelentes para optimizar la posición de determinados elementos o secciones de tu página y solucionar problemas de uso o 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, la gente prefiere registrarse en los servicios de tus competidores. Cuando les preguntas por qué, responden que la otra herramienta tenía una función de seguimiento multivariable y la tuya no.
Bien, el problema es que tú sí tienes esta función, 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 tus usuarios no se desplaza por la página. Entonces te das cuenta de que la descripción de tu función de seguimiento multivariable está por debajo del límite visible y en la zona azul. Esto significa que solo unos pocos usuarios se desplazan y leen sobre ella, algo que puede ocurrir con la mayoría de las herramientas de análisis del comportamiento de los usuarios.
¡Problema identificado! Ahora, para solucionarlo, puedes considerar añadir las funciones de tu sección «Todos los planes incluyen» como elementos adicionales en las listas de tus planes de precios, asegurándote de que aparezcan por encima del límite visible y de que la gente pueda verlas sin desplazarse.
#3: Mapas de calor de desplazamiento del cursor
También conocido como mapa de movimiento, este tipo de mapa de calor registra la posición del ratón, lo que permite visualizar el comportamiento de «movimiento» de los usuarios por una interfaz.
En la mayoría de los casos, al utilizar mapas de calor del cursor, suponemos que los usuarios probablemente mirarán el elemento sobre el que se encuentra el cursor. Por lo tanto, al registrar el movimiento del ratón, lo relacionamos con el seguimiento de lo que las personas están mirando mientras navegan por nuestra interfaz.
Visualmente, consiste en puntos resaltados —de nuevo, utilizando un esquema de colores basado en la temperatura— para las partes de tu interfaz de usuario en las que el cursor del ratón de tu usuario ha permanecido más tiempo. Además, algunas herramientas de mapas de calor también te proporcionan un «trazo» de dónde suelen empezar los usuarios y por dónde se desplazan en tu interfaz.
Así es como se ven estos trazos.
Este es el mapa de calor del seguimiento del ratón de, probablemente, una de las interfaces con mejor experiencia de usuario del mundo: el sitio web de Apple (al fin y al cabo, fueron la sede de los primeros diseñadores de experiencia de usuario de la historia). Estos trazos muestran que las personas empiezan a explorar la página de destino de MacOS Snow Leopard examinando primero al fascinante felino, antes de leer el título y continuar con los demás elementos de la página de destino.
Cómo utilizar un mapa del cursor
Una de las formas interesantes de utilizar un mapa de movimiento es identificar las distracciones de los usuarios.
Por ejemplo, si estás a cargo 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 ha encontrado para ellos), podrías consultar el mapa de calor del cursor y comprobar que la mayoría de los usuarios se dirigen primero a uno de tus banners (por ejemplo, algún tipo de anuncio), antes de continuar examinando los resultados de búsqueda.
Esto supone una gran distracción para tus usuarios y puede reducir las probabilidades de que hagan clic en los resultados de búsqueda. Por lo tanto, eliminarás ese banner o harás que tenga menos prominencia visual en tu interfaz.
#4: Mapas de calor de atención
Hasta ahora, hemos hablado de tres herramientas de análisis que permiten analizar visualmente a los usuarios mediante clics, movimientos del ratón y desplazamiento por la página.
Aunque cada una de las anteriores puede proporcionarnos información valiosa, depender de una sola podría llevarnos a conclusiones erróneas. Observar el comportamiento de los usuarios de forma aislada y sin el contexto adecuado puede no ofrecernos una visión suficientemente amplia de lo que ocurre realmente.
Por eso, los equipos de producto suelen utilizar todos estos tipos al mismo tiempo y combinar la información obtenida de los tres antes de analizarla y extraer conclusiones. Aun así, esta solución tampoco es perfecta, ya que probablemente necesitarás dedicar 3x más tiempo para realizar el análisis completo.
Por suerte, con la llegada de los modelos de IA y los algoritmos avanzados, las herramientas modernas de visualización de mapas de calor pueden combinar la información recopilada de los clics de los usuarios, el movimiento del ratón y el desplazamiento en un único mapa de calor.
Este cuarto tipo se denomina mapa de calor de atención, ya que básicamente te indica qué partes de la interfaz de usuario reciben más atención por parte de tus usuarios. Visualmente, tiene un aspecto muy similar al de un mapa de clics, con determinados elementos de tu interfaz resaltados en distintos colores de la paleta cromática de temperatura según el nivel de atención de los usuarios.
#5: Mapas de calor geográficos
Los mapas de calor existen desde mucho antes de que la gente empezara a aplicar esta técnica a las interfaces de usuario. Uno de los tipos tradicionales de mapas de calor más destacados ha sido el mapa geográfico.
En este caso, se resaltan determinadas partes de un mapa según el tipo de dato seleccionado. Por ejemplo, si quieres analizar la distribución geográfica de los lugares turísticos de Francia, puedes utilizar este mapa de calor geográfico.
En el mapa anterior se muestra el número de camas de hotel (principalmente destinadas a turistas) por kilómetro cuadrado. Como podemos ver, Córcega, los Alpes franceses y la Costa Azul son los claros vencedores en esta categoría.
Cómo utilizar un mapa de calor geográfico
Consultar los conjuntos de datos turísticos de Francia está muy bien, pero ¿pueden estos mapas de calor ayudarme a analizar mi producto digital? Veamos un ejemplo.
Sigamos con el tema del turismo (y Francia) e imaginemos que gestionas un servicio de alquileres de corta duración en línea (algo similar a Airbnb). Se te ha ocurrido crear y distribuir material promocional para festivales locales en ciudades francesas con el fin de conseguir que más personas reserven hoteles allí utilizando tu servicio.
La primera pregunta que te vendría a la mente es: ¿con qué ciudad o festival deberías empezar?
Para obtener una respuesta, puedes crear un mapa de calor geográfico que muestre la distribución de las casas 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. Por lo tanto, quizá deberías plantearte empezar promocionando los festivales de Provenza y la Costa Azul.
#6: Mapas de clics de frustración
Este es un subtipo de los mapas de clics que filtra y muestra únicamente los casos en los que los usuarios han hecho clic en algo por frustración. Las herramientas de mapas de calor suelen identificar algo como un clic de frustración (o un clic muerto) cuando el usuario sigue haciendo clic varias veces seguidas en el mismo elemento.
Cómo utilizar un mapa de clics de frustración
Los mapas de clics de frustración son herramientas excelentes para identificar experiencias de usuario problemáticas. Puede tratarse de algo que parece que se puede pulsar, pero no se puede; de algo que no resulta intuitivo; o simplemente de un botón que no funciona.
Por ejemplo, si realizáramos un análisis de datos de clics de frustración en una de las páginas de Iterate, sin duda encontraríamos clics de frustración en al menos dos puntos. Esta es la razón:
¿Te has fijado en los dos elementos de texto resaltados en azul? Pues no son enlaces. Es simplemente texto normal coloreado de azul. Muchos visitantes de Iterate (incluido yo) han intentado hacer clic en estos elementos de texto esperando que les redirigieran a otra página.
Por supuesto, no ocurrirá nada después de hacer clic en ellos, y esto podría provocar que el usuario se frustre y empiece a hacer «clics de frustración».
La lección que se extrae de examinar el mapa de clics de frustración de esta página es que debes asegurarte, por ejemplo, de que el texto no parezca un hipervínculo. También puedes realizar una prueba A/B con diferentes colores y comprobar si tu suposición de que el texto azul provoca clics de frustración es verdadera o falsa.
#7: Mapas de calor de seguimiento ocular
Hasta ahora, hemos utilizado mapas de desplazamiento del cursor para entender hacia dónde han estado mirando nuestros usuarios mientras navegaban por nuestra página web. Suponemos que los ojos de los usuarios miran al cursor la mayor parte del tiempo. Por lo tanto, el movimiento del cursor por tu interfaz podrá indicarte en qué se están concentrando los ojos de tus usuarios.
Esta es una forma habitual de analizar la atención. Sin embargo, los datos del mapa de calor que proporciona no son perfectos, ya que los usuarios no siempre miran al cursor.
Si quieres obtener datos precisos, tanto de ubicación como numéricos, sobre aquello que están mirando tus usuarios, deberías plantearte utilizar un mapa de calor de seguimiento ocular.
A diferencia de los demás, los mapas de calor de seguimiento ocular requieren que los usuarios lleven equipos especializados que registren el movimiento de sus ojos e identifiquen la ubicación de los elementos que están mirando.
Esto significa que tendrás que invitar a tus usuarios a sesiones especiales de prueba, conseguir que se pongan estos dispositivos de seguimiento y comiencen a utilizar tu producto. Aunque requiere mucho más tiempo y es más costoso, la calidad de los datos que obtienes es muy superior a la de cualquier otro tipo de mapa de calor de un sitio web.
Cómo utilizar un mapa de calor de seguimiento ocular
Considerando el coste de organizar sesiones de pruebas de seguimiento ocular, probablemente solo acabarás utilizando el seguimiento ocular en áreas de optimización de UX de gran impacto.
Los estudios de seguimiento ocular son muy habituales para 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 ROI.
Imagina cuánto ARR adicional obtendría Amazon si realizara un estudio de seguimiento ocular y colocara los banners de sus productos destacados de tal manera que la tasa de conversión aumentara un 1 %.
#8: [Extra] Mapas de confeti
Los mapas de calor de confeti son un subtipo de los mapas de clics convencionales que muestran los clics individuales en lugar de resaltar el área general en la que han hecho clic los usuarios.
La ventaja de analizar los clics individuales reside en tu capacidad para filtrarlos en función de diversos puntos de datos complejos.
Aquí, por ejemplo, hemos agrupado los clics en la CTA de búsqueda según el día de la semana en que se produjo el evento de clic.
Según los datos, podemos ver que los martes reciben más clics, mientras que las personas que visitan el sitio los lunes son las que están más distraídas (hacen muchos clics por toda la interfaz).
Cómo utilizar un mapa de calor de confeti
Los mapas de calor de confeti son especialmente útiles cuando necesitas analizar el comportamiento de los usuarios con un nivel de detalle muy alto. A diferencia de los mapas de calor tradicionales, que muestran datos agregados, los mapas de confeti 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 pago recibe más clics los viernes, pero muchos menos los lunes, puede que tus usuarios sean compradores impulsivos que esperan cobrar, y que quienes te visitan los lunes todavía se estén recuperando del fin de semana, mirando fijamente tu página de precios sin llegar a convertir.
Los mapas de confeti también pueden destacar distracciones inesperadas. Si los usuarios hacen clic por toda la página en lugar de hacerlo donde quieres, puede que estén confundidos o que simplemente estén buscando desesperadamente alguna 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 poder escapar en lugar de interactuar. Puedes utilizar la información de los mapas de calor para perfeccionar tu mapa del recorrido del usuario, especialmente al identificar esos puntos de fricción. Filtrar por segmento de usuario puede ayudarte a ver qué grupos tienen más dificultades y dónde necesitas mejorar la experiencia.
Los mapas de calor mejoran tu empatía con los usuarios
Cada tipo de mapa de calor que hemos descubierto aquí juntos puede darte una idea de cómo tus usuarios exploran tus productos y los utilizan. Si trabajas con recursos limitados, los mapas de calor ofrecen una forma rápida y ligera de realizar una investigación de UX antes de invertir en pruebas de usabilidad más profundas. Con su ayuda, podrás ver y sentir las dificultades que están experimentando tus usuarios y avanzar para solucionarlas.
Combinados con herramientas de analítica de producto, los mapas de calor pueden ofrecer una visión más clara de cómo interactúan los usuarios con tu producto y dónde abandonan. Por ejemplo, combinar los mapas de calor con herramientas de reproducción de sesiones te proporciona tanto el «qué» como el «por qué» del comportamiento de los usuarios.
Los mapas de calor son excelentes, pero solo son una de las muchas herramientas que puedes utilizar para desarrollar empatía y aprender más sobre las demás. Para asegurarte de no perderte ninguna, suscríbete a nuestro boletín.
