5 formas de utilizar mapas de calor para mejorar la UX de tu sitio web

Tal y como su nombre indica, la experiencia de usuario se centra en las usuarias y los usuarios. Por lo tanto, tiene sentido que cuanto más te centres en ellos a la hora de recopilar datos sobre tu sitio web, más fácil te resultará hacer optimizaciones que satisfagan sus necesidades.

Probablemente ya tengas algunas pistas sobre el comportamiento del usuario a partir de los datos de analíticas de UX tradicionales (por ejemplo, tasa de rebote, páginas vistas, conversiones). Pero ¿qué es lo primero que debes solucionar cuando detectas un problema? ¿Por dónde debes empezar si quieres aumentar las conversiones?

Si trabajas en un equipo de diseño UX, desarrollo o ventas y quieres mejorar la experiencia de usuario, los mapas de calor pueden ayudarte a recopilar datos sobre cómo interactúan las usuarias y los usuarios con tu sitio web para conseguir insights en los que basarte para mejorar la UX y las métricas que importan en tu empresa.

¿Qué es un mapa de calor?

Un mapa de calor o heatmap es una representación gráfica de datos que muestra cómo las usuarias y los usuarios de un sitio web hacen clic, se desplazan verticalmente y se mueven por la página. Para ello, se utiliza una escala de colores, que normalmente va del azul (colores fríos para indicar las partes menos populares) al rojo (colores cálidos para señalar los elementos más populares).

Puedes recopilar datos tanto de la versión para ordenadores como para dispositivos móviles de cualquier página web para generar distintos tipos de mapas de calor:

• Mapas de clics o click maps: Muestran dónde las usuarias y los usuarios hacen clic con el ratón (o tocan en dispositivos móviles).

• Mapas de desplazamiento vertical o scroll maps: Muestran hasta qué punto de una página se desplazan verticalmente las usuarias y los usuarios.

• Mapas de movimientos o move maps: Muestran por dónde se mueven y en dónde detienen el cursor del ratón (sin hacer clic) las usuarias y los usuarios cuando navegan por una página.

¿Quieres consultar un ejemplo práctico de un mapa de calor? Pruébalo con la demo de Hotjar Heatmaps para que te puedas hacer una idea de cómo funciona la herramienta. Alterna entre los distintos tipos de mapas de calor seleccionando la opción correspondiente en la barra lateral derecha para saber qué tipo de insights podrías obtener con cada uno.

5 formas de utilizar mapas de calor para evaluar la UX

Si una imagen vale más que mil palabras, un mapa de calor vale más que mil insights. Como una lista de mil insights podría ser demasiado larga para este artículo, lo mejor es empezar con cinco formas clave de utilizar distintos tipos de mapas de calor para recopilar datos de UX, validar tus ideas e identificar oportunidades de optimización.

1. Muestra tus diseños que mejor funcionan

Puede que tus páginas web brillen por sí solas, pero los mapas de calor te permiten demostrarles a clientes y colegas lo bien que realmente funcionan. Los heatmaps se pueden interpretar fácilmente de un vistazo y pueden ayudarte a explicar tu trabajo a personas que no se dedican al diseño para que puedas conseguir la aprobación de tus propuestas de rediseño de sitios web o mostrar tus mejores proyectos de diseño UX. Esta utilidad es especialmente provechosa si quieres mejorar el rendimiento de tus páginas.

Por ejemplo, Sara Parcero-Leites, Customer Knowledge Manager de la plataforma online de alquiler de viviendas a medio y largo plazo Spotahome, utiliza mapas de calor para asegurarse de que su equipo es consciente de las áreas de UX que necesitan mejoras.

En esta empresa organizan sesiones de Hotjar periódicas, durante las cuales Sara presenta 3-4 mapas de calor interesantes, junto con insights que consigue con otras herramientas de Hotjar, para generar debate y encontrar soluciones entre todos.

Sara nos dijo que la mayoría de las personas que trabajaban en los equipos de desarrollo y las responsables de producto nunca habían visto realmente a los usuarios interactuar con las funciones que habían creado antes de que ella empezara a organizar estas sesiones y a mostrarles pruebas visuales, como los datos de los mapas de calor. Ahora terminan cada sesión con información reveladora y un montón de bugs para corregir.

2. Identifica las CTA que reciben más y menos clics

Las CTA (llamadas a la acción) son un elemento (normalmente un botón o un enlace) que animan a las usuarias y los usuarios a completar una acción determinada. Pueden diseñarse específicamente para atraer clics con el fin de aumentar los registros o las ventas.

Los mapas de clics muestran qué CTA reciben más clics y cuáles se ignoran. Puede que descubras que otros elementos de la página están distrayendo a las usuarias y los usuarios de tu CTA principal, o quizás identifiques una oportunidad para probar una nueva CTA en un área con la que están interactuando más.

Por ejemplo, Conan Heiselt, UX Designer en la empresa de software Techsmith, mientras presentaba las herramientas de Hotjar a su equipo descubrió con un mapa de clics que la gente no interactuaba con las CTA de los productos como se pretendía.

Conan había configurado un click map en la página de servicios de la empresa y, gracias a él, descubrió junto a su equipo que muchas personas ignoraban los botones de texto de las CTA y preferían hacer clic en las imágenes de los productos, así que durante un rediseño decidieron hacer que toda la zona fuera clicable. Gracias a esas pruebas visuales concretas que consiguieron con un único mapa de clics, pudieron ofrecer a las usuarias y los usuarios una experiencia más intuitiva.

3. Mide hasta dónde se desplazan verticalmente las usuarias y los usuarios

No todas las personas usuarias que llegan a tu sitio web se desplazan hasta el final de cada página, lo que significa que podrían estar perdiéndose información importante. La gente también visita tu sitio desde muchos dispositivos y navegadores diferentes, así que el contenido que se les muestra en la mitad superior de la página sin tener que desplazarse es diferente para cada persona.

Las herramientas de mapas de desplazamiento vertical pueden mostrarte dónde se encuentra el límite visible medio en dispositivos móviles y ordenadores, así podrás colocar la información esencial y las CTA donde más se vean. También puedes averiguar hasta qué punto de la página se desplazan verticalmente las usuarias y los usuarios y colocar los elementos más arriba para que los vea más gente.

Recuerda que, en vez de analizar los datos de los mapas de desplazamiento vertical de forma aislada, te resultará mucho más útil combinarlos con los mapas de clics para obtener una visión completa de dónde estás perdiendo la atención de las usuarias y los usuarios.

Y, con los mapas de zonas de interacción de Hotjar, no tendrás que cambiar constantemente entre dos o tres tipos de heatmaps, ya que combinan en una única vista todos los datos de los mapas de clics, de movimientos y de desplazamiento vertical para que puedas identificar con qué partes de tu página interactúan más las personas usuarias.

4. Detecta problemas rápidamente

A veces, las usuarias y los usuarios hacen clic en elementos (por ejemplo, imágenes o títulos) porque creen que son enlaces. Puede ser que hayan hecho clic por error, pero los mapas de calor recopilan datos de un número suficiente de usuarios para descartar anomalías y mostrarte patrones de clics comunes en toda tu audiencia.

Si observas un mapa de clics, puedes detectar clics incorrectos y solucionar el problema añadiendo enlaces o modificando elementos sin importancia para que parezcan menos clicables.

También puedes detectar bugs en el sitio web o errores de diseño que frustren a tus usuarios y les hagan abandonar el sitio. Para ello, existe un mapa de calor específico: el mapa de clics con rabia de Hotjar, que te permite identificar qué elementos causan fricción mostrándote dónde hacen clic repetidamente las usuarias y los usuarios durante un breve periodo de tiempo. Esta es la herramienta perfecta a la que recurrir si quieres evitar que la gente se enfade mientras utiliza tu sitio.

5. Optimiza tu sitio para móviles y ordenadores

El diseño web adaptable (páginas que se adaptan a la pantalla del usuario) es una forma rápida y eficaz de ofrecer contenido a todos los usuarios. Sin embargo, debes tener en cuenta que lo que parecen unas pocas líneas en un ordenador pueden suponer tener que desplazarse mucho en los dispositivos móviles.

Compara los mapas de calor de las sesiones en móviles y ordenadores para detectar diferencias de comportamiento y comprobar si las usuarias y los usuarios de aplicaciones móviles pasan por alto CTA u otros elementos importantes. Es posible que tengas que diseñar interfaces diferentes y fáciles de usar para móvil y ordenador si quieres garantizar una buena UX en todos los dispositivos.

Por ejemplo, Materials Market, un sitio web que conecta a proveedores de materiales de construcción con clientes de todo el Reino Unido, consiguió aumentar significativamente las conversiones usando mapas de calor para optimizar las páginas para varios dispositivos.

Su CEO, Andrew Haehn, utilizó un mapa de desplazamiento vertical de Hotjar para descubrir que muy pocos usuarios de móviles se desplazaban verticalmente lo suficiente como para llegar hasta la CTA principal, así que su equipo rediseñó el botón y lo colocó más arriba en la página. Este sencillo cambio contribuyó a un aumento del 1,1 % en la tasa de conversión, lo que les generó más de 10 000 € más de ingresos al año.

Combina mapas de calor con otras herramientas de UX

Los datos que aportan los mapas de calor son impresionantes y conseguirás muchos insights con ellos, pero les sacarás más partido si los combinas con otras herramientas de diseño UX, de analítica y de feedback. A continuación tienes cuatro ejemplos de posibles combinaciones.

1. Mapas de calor + analítica tradicional

Las herramientas de analítica web tradicionales (como Google Analytics) te ofrecen muchos puntos de datos cuantitativos, como páginas vistas, fuentes de tráfico y porcentajes de rebote, pero no explican por qué ni cómo se producen.

Combinar la analítica tradicional con la analítica de mapas de calor te puede ayudar a despejar algunas de las conjeturas y averiguar por qué obtienes determinadas métricas. ¿Tienes una página que recibe mucho tráfico pero no genera conversiones? Entonces, configura un mapa de calor y empieza a observar qué hace que la gente se vaya.

Puedes profundizar más en el análisis de tus mapas de calor con Hotjar Trends. Configura un mapa de calor para analizar el comportamiento de los usuarios antes y después del lanzamiento o rediseño de una página y, a continuación, pasa directamente del mapa de calor a los gráficos para analizar cómo evoluciona su interacción a lo largo del tiempo.

2. Mapas de calor + grabaciones de sesiones

Una grabación de sesión (o reproducción de sesión) es el registro de la sesión de navegación de una única persona usuaria (anonimizada) que te permite ver las acciones que lleva a cabo en varias páginas.

Mientras que los mapas de calor te ayudan a visualizar los datos de todos tus usuarios a la vez, las grabaciones son individuales. En lugar de hacer suposiciones sobre los clics y los desplazamientos que observas en un mapa de calor, prueba a reproducir algunas grabaciones de sesiones para ver cómo interactúan personas reales con la página.

Supongamos que descubres una interacción de usuario preocupante durante una grabación de sesión y quieres confirmar si se trata de un incidente aislado o de un problema de funcionalidad más generalizado. Con la función de ampliar el contexto de Hotjar puedes estar viendo una grabación de sesión en la que el usuario está teniendo problemas y, desde ella, abrir directamente el mapa de calor de esa página para comprobar si otros usuarios tienen el mismo problema.

Un ejemplo real del uso de esta combinación de herramientas sería el de la agencia de diseño de UX digital Turum-burum, que consiguió aumentar la tasa de conversión de la tienda de calzado Intertop en un 55 % combinando Hotjar Recordings y Heatmaps.

Primero utilizaron grabaciones de sesiones y descubrieron que los clientes tenían problemas con los filtros de productos de Intertop, ya que navegaban por un gran número de páginas intentando encontrar su talla de zapatos.

Tras analizar un mapa de clics, el equipo de Turum-burum descubrió que muchos usuarios hacían clic en "show all" (mostrar todo) mientras buscaban un producto, porque carecían de los filtros necesarios para encontrar lo que buscaban.

Con los insights que consiguieron con las grabaciones de sesiones y los mapas de calor, Turum-burum pudo implementar una función de filtrado más ágil identificando y priorizando categorías de productos claras, un elemento de navegación esencial en la experiencia de compra en un comercio electrónico. El cambio de Turum-burum se tradujo en una mejor experiencia de usuario y en un aumento de las ventas de su cliente.

3. Mapas de calor + feedback on-page

Los datos cuantitativos (numéricos) son muy importantes para tomar decisiones de UX basadas en datos, pero no hay que pasar por alto el valor de los datos cualitativos (no numéricos).

Después de utilizar mapas de calor para identificar problemas de diseño en páginas concretas de tu sitio, pide en cada una de ellas feedback sobre la UX a las usuarias y los usuarios para informarte sobre qué creen que falta o qué deberías cambiar con el fin de ayudarles a alcanzar sus objetivos.

Pedir feedback sobre el sitio web no tiene por qué molestarles, ya que una simple encuesta no intrusiva de una sola pregunta puede ser suficiente para averiguar todo lo que necesitas saber para poner en marcha algunas mejoras de UX en las que no habías pensado.

Aparte de los insights que la empresa Techsmith consiguió con los mapas de clics y que les sirvieron para ofrecer una mejor experiencia de usuario rediseñando las CTA de sus productos, su UX Designer Conan Heiselt también utilizó Hotjar Surveys para conocer mejor las necesidades de sus clientes.

Con una sencilla encuesta on-page, Conan planteó a las usuarias y los usuarios que completaron determinadas interacciones una pregunta abierta: "¿Cuál es tu mayor frustración con esta página?". Pudo recopilar suficientes respuestas para identificar 15 temas generales y empezar a tomar medidas para abordar las necesidades específicas de los usuarios.

Si no tienes tiempo suficiente para preparar un informe de investigación de UX completo y útil como el de Conan, prueba Hotjar AI para Surveys para que te genere uno automatizado que incluya insights clave y sugerencias de próximos pasos basados en el feedback real de tus usuarios.

4. Mapas de calor + pruebas A/B

Los datos de los mapas de calor y las pruebas A/B van de la mano: puedes utilizar los datos de los mapas de calor para plantear una hipótesis para una prueba, y puedes configurar mapas de calor en variaciones de pruebas A/B para recopilar datos útiles sobre por qué una variación de la página funciona mejor (o no).

Por ejemplo, el equipo de diseño UX de la empresa de diseño de banners Bannersnack utiliza mapas de calor en páginas de destino clave para recopilar pruebas de cómo interactúa la gente con ellas. Basándose en los datos, el equipo crea un diseño alternativo y hace pruebas A/B con la versión antigua y la nueva. En una prueba, Bannersnack aumentó los registros en un 25 % combinando los insights que consiguieron con los mapas de calor con pruebas A/B.

Cómo empezar a utilizar mapas de calor

Una herramienta de mapas de calor de sitios web como Hotjar es realmente fácil de usar. Lo único que tienes que hacer es añadir un script de seguimiento a tu sitio web. Puedes crear un mapa de calor en un par de minutos para empezar a recopilar datos cada vez que una persona visite tu sitio web.

Tanto si utilizas mapas de calor para mostrar tu trabajo como para aumentar las conversiones u obtener ideas para nuevas pruebas, los valiosos insights que obtendrás con estos gráficos de colores probablemente encenderán la chispa que necesitas en tu estrategia de UX para progresar.