Mapas de calor 101: El héroe que todo diseñador UX necesita

¿De Qué Se Tratan los Mapas de Calor?

Los mapas de calor son herramientas de seguimiento y visualización de datos que puedes utilizar para comprender cómo interactúa tu público objetivo con tu producto o sitio web.

Los mapas de calor son gráficos bidimensionales que resaltan ciertas partes del área con distintos colores para transmitir información útil. Por ejemplo, el gobierno de Helsinki lanzó recientemente un mapa en tiempo real que muestra qué partes de la ciudad están más concurridas.

Para visualizar la cantidad de personas en ciertos barrios, crearon un mapa de calor de la ciudad.

Cuantas más personas haya en una determinada zona de la ciudad, más "caliente" se resalta en el mapa. Si nada está resaltado, significa que el barrio en cuestión no está concurrido.

Como herramientas de visualización, los mapas de calor son bastante versátiles. Así que, además de visualizar los "puntos calientes" en un mapa físico (como en el caso de Helsinki o los mapas meteorológicos que vemos en la televisión), también puedes colocarlos sobre tu interfaz de usuario.

En este caso, puedes resaltar las partes de tu interfaz con más interacciones de usuarios. Luego puedes combinarlas con grabaciones de sesiones para profundizar en el recorrido del usuario y la investigación UX que te ayudará a:

• Obtener valiosos conocimientos sobre cómo los usuarios interactúan con tu sitio web o app móvil.
• Entender qué puedes hacer para captar mejor la atención de tus usuarios.
• Identificar nuevas oportunidades para optimizar tu experiencia de usuario y mejorar tus métricas clave (aumentar la tasa de conversión, CTR de tus botones de llamado a la acción, etc.).

Por lo tanto, los mapas de calor son una excelente herramienta tanto para diseñadores UX como para responsables de producto para estudiar cómo interactúan los usuarios y mejorar sus productos.

Herramientas Populares de Mapas de Calor

Ahora, veamos cómo puedes crear un mapa de calor para tu producto. La web está llena de herramientas de analítica que pueden rastrear las interacciones de los usuarios en el diseño de tu interfaz y resaltar los elementos de la página que reciben más atención.

Las más destacadas incluyen Hotjar, Mouseflow, Fullstory, Crazy Egg y otras.

Pero realmente no quiero profundizar mucho en este tema, ya que tenemos una lista curada de herramientas de mapas de calor a la que puedes echar un vistazo en su lugar.

4 Tipos Clave de Mapas de Calor Para Diseñadores de Producto

Lo que llamamos “mapa de calor” no es un solo tipo de visualización que utilizas para analizar tu experiencia de usuario. En cambio, "mapa de calor" es un término general para varias herramientas visuales que funcionan bajo el mismo principio básico: resaltar ciertas áreas de tu experiencia de usuario con diferentes colores.

No quiero que repasemos todos los tipos de mapas de calor, ya que muchos de ellos son bastante inútiles para los diseñadores de producto y UX. En su lugar, veamos cuatro tipos que mi equipo de diseño ha encontrado más útiles.

1. Mapas de Clics

Los mapas de clics son probablemente lo primero que se te viene a la mente al hablar de mapas de calor. Es el tipo de mapa de calor más popular que existe, y lo encontrarás en casi todas las herramientas de mapas de calor y analítica (exceptuando Google Analytics y herramientas basadas en eventos).

El mapa de clics (también conocido como mapa de calor de clics) te muestra en qué han hecho clic los usuarios en tu interfaz (por ejemplo, la página de inicio de tu sitio web). Visualizan la actividad de clics de tu audiencia resaltando las áreas correspondientes y usando una codificación de colores para indicar qué partes de tu experiencia de usuario están "calientes" o "frías".

Así es como se ve el mapa de clics de la página de carreras de Hotjar.

Al examinar el mapa de clics aquí, podemos ver lo siguiente:

• Una zona "caliente" en rojo cerca del CTA principal - “Ver empleos disponibles”.
• Un poco de actividad "templada" (amarilla) alrededor del botón de flecha derecha que cambia la imagen destacada en la página.
• También algo de actividad (azul) en la flecha izquierda.

El resto de la pantalla no tiene ningún resaltado, lo que nos dice que es una zona "fría" y que nadie ha hecho clic en esas áreas.

El resaltado "caliente" en el CTA principal, por otro lado, nos indica que muchos usuarios (probablemente la mayoría, a juzgar por lo "caliente") están haciendo clic en él. Luego tenemos las zonas templadas alrededor de los botones de flecha que nos dicen que una pequeña porción de usuarios también está navegando por imágenes destacadas.

¿Cómo usar mapas de calor de este tipo? ¡Pruebas A/B en tus CTAs!

Bueno, hay una gran variedad de casos de uso para los mapas de clics. Puedes usarlos, por ejemplo, para entender la efectividad de la ubicación de tus CTAs, el texto, etc. Sin embargo, a mis Diseñadores de Producto y a mí nos encanta usar los mapas de calor para otra razón: hacer pruebas A/B con nuestros CTAs y otros elementos de diseño.

Permíteme ilustrar este caso de uso con un ejemplo. Imagina que estás a cargo de la aplicación web de ChatGPT y tienes un problema porque los usuarios no están creando nuevos chats y conversan con la IA dentro de una sola instancia de chat.

Después de ver el mapa de calor, notas que el botón "Nuevo chat" en la parte superior de tu barra lateral está frío (sin ningún resaltado).

Rápidamente, asumes que es debido al color del CTA, que es el mismo que el fondo de la barra lateral. Así que realizas un experimento A/B, donde cambias el color de fondo a verde en la variante A y dejas el color "como está" en la variante B.

Después de que una cierta cantidad de usuarios haya interactuado con ambas variantes, puedes ver el mapa de calor de clics de cada una y compararlas lado a lado para ver en cuál el botón de "Nuevo chat" está más "caliente".

Luego eliges la variante en la que el CTA recibió más clics, basado en tu análisis del mapa de calor.

2. Mapas de desplazamiento

Analizar los clics de los usuarios es genial, pero no siempre cuenta toda la historia.

Por ejemplo, si tu mapa de clics muestra que hay un botón poco utilizado en la parte inferior de tu pantalla, no necesariamente significa que hay un problema con el texto del CTA, el color u otros factores. Quizás, tu CTA es bastante bueno, pero la gente simplemente no hace scroll y no lo ve.

Es aquí donde entran en juego los mapas de desplazamiento (también conocidos como mapas de calor de desplazamiento). A diferencia del tipo anterior, que resalta los clics en tu interfaz, los mapas de desplazamiento muestran el tiempo que pasan los usuarios en cada sección de tu interfaz y su comportamiento al hacer scroll.

Dependiendo del tiempo invertido en cada sección, la página se resaltará en rojo (mucho tiempo), naranja/amarillo (tiempo moderado) y verde/azul (poco tiempo).

Permíteme demostrar esto con otro ejemplo de Hotjar.

La imagen que vemos arriba es una de las versiones antiguas de la página "sobre nosotros" de Hotjar. Al observar los datos del mapa de calor de desplazamiento de esta página, podemos concluir que:

• Todos los usuarios han visto la parte superior de tu página (resaltada en rojo). Obvio, ¿verdad?
• Luego, vemos que alrededor del 75% de ellos han hecho un poco de scroll para ver los logotipos de los sitios que usan Hotjar (la sección de logotipos está en amarillo).
• Finalmente, la parte inferior de la página es verde, lo que significa que solo una parte de los usuarios han hecho scroll hasta allí. La línea justo sobre el logo de Glassdoor nos dice que solo el 57% de los usuarios han llegado hasta ese punto.

Este fue un caso clásico donde la parte superior es roja, la parte del medio es amarilla y la parte inferior es verde. Sin embargo, en la vida real, puedes ver mapas de desplazamiento donde una sección específica en la parte baja de tu pantalla tiene buen desempeño (por ejemplo, tu sección de planes de precios) mientras que los usuarios ignoran el contenido de arriba y de abajo.

Cómo usan los diseñadores de producto los mapas de desplazamiento: optimización de contenido

Al igual que los mapas de clics, los mapas de desplazamiento son herramientas versátiles que se pueden usar para varios propósitos. Sin embargo, el caso más popular es la optimización de la ubicación de tu contenido.

Como ya mencioné, por ejemplo, las secciones de precios funcionan realmente bien en tu página web. Significa que la gente hace scroll rápidamente sobre tu contenido, luego nota tu sección de precios, se detiene, la lee y sigue desplazándose.

Este patrón de comportamiento nos permite colocar estratégicamente la sección de precios en el medio o en la parte inferior de la página. Hacemos esto para asegurarnos de que las personas recorran toda la página (y vean algunos de los mensajes importantes que tenemos para ellos) antes de encontrar la información sobre nuestros planes de precios.

Nuestra estrategia aquí es similar a la de los supermercados al colocar productos lácteos y panadería. Ambos suelen ser cosas que compras con bastante frecuencia. Por eso, los colocan en lados opuestos del establecimiento, obligándote a recorrer todo el supermercado para conseguirlos.

La lógica es que probablemente notarás otros productos en los pasillos y terminarás comprándolos de camino a la sección de lácteos.

3. Mapas de movimiento

Los mapas de desplazamiento te dan una visión general de alto nivel sobre qué secciones están mirando tus usuarios. Los mapas de clics, por otro lado, son un poco más detallados en cuanto a decirte en qué elemento exacto ha hecho clic el usuario.

Sin embargo, existe la necesidad de algo de “nivel intermedio” que sea capaz de decirte cómo navegan las personas por la información y los elementos de UI dentro de una sección específica de tu página.

Aquí es donde puedes aprovechar los mapas de movimiento. Como su nombre indica, este tipo de mapa de calor rastrea los movimientos del cursor del ratón a lo largo de tu interfaz.

Como otros mapas, las zonas de la interfaz se resaltan en una gama de colores (de azul a rojo), donde el azul significa poco movimiento del ratón sobre esa área (y el rojo, mucho).

Veamos cómo se ve en un artículo de blog.

El mapa aquí nos indica que una pequeña parte de los usuarios pasa el ratón sobre el título y el primer encabezado del artículo. La mayoría, sin embargo, mantiene el cursor cerca del área de búsqueda en la esquina superior derecha.

Cómo usan los mapas de movimiento los diseñadores de producto: seguir la atención sobre ciertos elementos

Es bastante común tener algunos elementos en nuestra interfaz que no son clicables, pero son igualmente importantes, y queremos asegurarnos de que los usuarios los hayan visto.

Un ejemplo de esto sería nuestra lista de características en la página de precios. Tal vez queremos entender a qué funciones prestan más atención los usuarios al revisar nuestra tabla de precios.

Para esto, podemos aprovechar el hábito humano de pasar el cursor sobre las cosas que estamos leyendo o revisando en ese momento y crear un mapa de movimiento del ratón que nos muestre sobre qué funciones se detienen más los usuarios en nuestra página de precios.

4. Mapas de clics de furia

Existen los clics ordinarios y existen los clics de furia.

Esto sucede cuando los fallos en tu experiencia de usuario han hecho que los usuarios se enfaden y hagan clic de forma agresiva y repetida sobre algún elemento de tu interfaz porque:

• Piensan que es algo clicable, pero no lo es.
• Es clicable, pero tu producto no hace nada tras el clic del usuario.

La razón principal del primer caso es diseñar elementos de UI que no son botones o enlaces, pero parecen serlo.

En cuanto al segundo caso, podrías haber terminado con:

• Un bug o un fallo que ha provocado que tu producto no ejecute la acción que dicho botón debería realizar.
• Todo funciona bien, pero faltan retroalimentaciones de UX. Así que, incluso si el usuario logró realizar lo que quería gracias a tu botón, no le informaste de ello.
• Tu producto está intentando ejecutar la acción solicitada por el usuario, pero es lento. Los usuarios se enfadan por eso o no les has informado de que la acción está en proceso.

Si bien los mapas de clics ordinarios también registrarán los clics de furia (al final, son solo clics), no podrás diferenciarlos de los clics normales. Llegarás a conclusiones incorrectas a partir de tus datos.

Por ejemplo, si tu botón no funciona y la gente hace clics de furia sobre él, tu mapa de clics normal te dirá que la gente usa mucho esa función, cuando la realidad es lo contrario.

Visualmente, los mapas de clics de furia son iguales que los mapas de clics normales. La única diferencia es que tener muchas zonas rojas en el mapa de clics ordinario es bueno, pero es una mala noticia en tu mapa de clics de furia.

Cómo usan los mapas de movimiento los diseñadores de producto: identificación de mala experiencia de usuario

No existe ningún producto con experiencia de usuario perfecta. Siempre terminas con elementos o experiencias negativas (aunque pienses que no lo son).

Los mapas de clics de furia son excelentes para ayudarte a identificar varios tipos de estas malas experiencias, incluyendo retroalimentación deficiente de UX, mal diseño de elementos y otros.

Los mapas de calor son los mejores aliados de los diseñadores UX

En base a mi experiencia y la de mi equipo de diseño de producto, los mapas de calor web están entre las herramientas más útiles para realizar pruebas de usabilidad y estudiar el comportamiento del usuario.

Con su ayuda, puedes obtener información cuantitativa (incluyendo cómo la utilizan en dispositivos de escritorio y móviles) sobre la eficacia de tu diseño web.

Luego puedes analizar estos datos e identificar brechas en tu diseño y funcionalidad que necesitas cubrir para asegurarte de que tu producto, sitio web, plataforma de comercio electrónico o página de destino sea fácil de usar.

No olvides suscribirte a nuestro boletín para más recursos y guías sobre gestión de producto, además de los últimos pódcast, entrevistas y otros análisis de líderes y expertos de la industria.