Recuerdo cuando no había forma de saber lo que el usuario hacía hasta que llegaban los resultados. También recuerdo la incertidumbre de no saber (a veces durante semanas), si esa idea web genial era realmente tan genial o era una… una estupidez. Entonces, llegaron los mapas de calor y NUNCA más volví a abordar un proyecto sin ellos.

En esta guía, volcaré toda la información que necesitas para manejar integrar los mapas de calor en tu próximo o presente proyecto web. Me apoyaré en ejemplos de Hotjar, la herramienta por excelencia de mapas de calor. Créeme, saben de lo que hablan.

¿Qué es un mapa de calor?

Con una escala del rojo al azul, los mapas de calor, también conocidos como heatmaps, muestran las partes de tu web donde se generan la mayoría de las interacciones. Con esta información, puedes detectar rápidamente qué partes son más atractivas para los usuarios, si hacen o no scroll, en qué elementos hacen clic y por dónde se desplazan.

Echa un ojo a este mapas de calor de Social Media Pymes grabado con Hotjar. ¿No es impresionante cómo muestran rápidamente la información más relevante de forma visual?

Por qué deberías utilizar mapas de calor en tu web

Si sabes lo que es la tasa de rebote, sabrás que cuando un usuarios no encuentra lo que busca, se frustra y termina por abandonar la web sin volver jamás. Precisamente para evitar que los usuarios se pierdan o no encuentren lo que buscan, debes usar un mapa de calor. Además, te ayudará a:

• Saber si los usuarios encuentran los elementos destacados de tu menú.
• Si eligen una CTA en concreto en tus pruebas A/B.
• Si se distraen por la página y no hacen clic.
• Si hacen scroll o no para saber dónde colocar la información más relevante.

Mapas de calor en landing pages

¿Entramos en detalle?

Una landing page es una página donde (normalmente), se genera una conversión, como la compra de un producto o el registro para una prueba gratuita o el lugar donde la gente deja sus datos a cambio de un lead magnet (un ebook, plantilla o checklist).

En una landing page, puedes recopilar varios tipos de datos mediante mapas de calor:

• Datos cuantitativos. Como el tiempo medio que los usuarios pasan en la página, la cantidad de gente que la abandona sin completar la acción o los canales de donde proceden.
• Datos cualitativos. O también conocidos como datos son descriptivos. Te ayudarán a comprender la historia detrás de los visitantes de tu web.

Sin embargo, hay otro tipo de datos que te ayudan a mejorar la experiencia de usuario, de forma que esos datos cuantitativos puedan mejorar. Con la información recopilada, podrás hacer pruebas A/B y cambios que mejoren la optimización.

Tipos de mapas de calor

He mencionado muchas cosas que, en realidad, mezclan conceptos procedentes de distintos tipos de mapas de calor. Vamos a repasarlos con ejemplos.

Mapas de calor de scroll

Un mapa de calor de scroll te muestra hasta dónde se desplaza el usuario por la página. No se me ocurre por qué NO querrías tener esa información, pero por si acaso, aquí están los enormes beneficios de contar con un mapa de calor de scroll:

• Puedes saber dónde colocar los elementos más importantes de tu página, como los formularios de contacto en función de si los usuarios hacen scroll o no.
• En un artículo del blog, puedes saber si los usuarios leen completos tus artículos. Como consecuencia, tendrás información más precisa para definir la longitud de tus artículos.
• Con un mapa de calor de scroll puedes averiguar el punto definitivo donde la mayoría de tus usuarios abandonan la visita. Así, podrás reorganizar la información y colocarla en las partes más visibles de tu web.
• Puedes hacer comparativas entre dispositivos. Puede que el punto de “no retorno” del escritorio no sea el del móvil. ¿Quizás puedes simplificar el diseño en el móvil para mejorar la lectura?

Mapas de calor de clic

Un mapa de calor de clic es una representación visual de dónde hacer clic tus usuarios. Las zonas más “calientes” representan aquellas donde hacen los usuarios hacen más clic y las más “frías”, donde menos la información que te proporcionan estos mapas de clic es clave para:

• Saber si los usuarios hacen clic en los elementos más relevantes de tu página, como los botones y CTAs que les permiten acceder a otros contenidos, como por ejemplo, contratar tus servicios o acceder a las páginas relevantes.
• También puedes averiguar si los usuarios hacen clic en elementos inactivos o estáticos esperando ver o interactuar. Así, puedes saber si estás desperdiciando unos valiosos clics que deberías utilizar para que llegaran a la información relevante.
• Comparar el comportamiento del usuario en diferentes dispositivos. Puede que te sorprenda los comportamientos tan diferentes que tienen en distintos dispositivos.

Fuente: SEO Customer

Mapas de calor de desplazamiento

Los mapas de calor de desplazamiento han sustituido a los estudios de eye tracking, mucho más caros y que no siempre arrojan información determinante. Los usuarios de hoy en día utilizan el ratón como extensión de su atención, por lo que con un mapa de calor de desplazamiento puedes averiguar cosas tan interesantes como por ejemplo:

• Si hay elementos relevantes de tu página que no llaman la atención de los usuarios.
• Si interactúan más con determinadas secciones por encima de otras. Así, podrás saber si están pasando por alto información crucial.
• Se distraen por la página.

Mapas de eye tracking

Eye tracking significa “seguimiento ocular”, un nombre un poco raro para una representación visual de cómo se mueven los ojos de los usuarios por la página. No son nada baratos, porque estos mapas de eye tracking deben realizarse en entornos profesionales, con un software y un hardware que no está al alcance de cualquiera.

Seguro que has oído hablar del escaneo en F: es una forma de lectura en internet que revela que los usuarios leen con un patrón con forma de F. No leen literalmente cada palabra, sino que primero leen un par de líneas superiores para desplazarse a continuación por el lado izquierdo para volver a leer un par de líneas en el siguiente párrafo. Los estudios de eye tracking permiten detectar este tipo de patrones.

Uno de los estudios más relevantes sobre la material es el realizado por Jacob Nielsen, experto en usabilidad y uno de los pioneros de experiencia de usuario.

En esta imagen puedes ver cómo se representa este patrón en F en un mapa de calor.

Fuente: Poynter (2004)

Comprender este tipo de patrones puede ayudarte a organizar el contenido de tus landing pages y colocar lo más importante donde quieres que más se vea y donde haya más probabilidades de que el usuario interactúe.

Cuándo utilizar mapas de calor en tu web

La respuesta corta: siempre. La respuesta larga: en los sitios estratégicos donde más te juegas. Vamos a verlo con calma.

En la página de inicio y en landing pages

Como profesional de contenidos con formación en SEO, sé que no todo el mundo pasa por tu página de inicio. De hecho, la página de inicio de esta web no es, ni de lejos, la más visitada:

Dicho esto, la página de inicio es un lugar estratégico porque con frecuencia es un impacto que reciben tus usuarios antes o después. Hazte preguntas como: ¿la entienden bien? ¿Encuentran lo que están buscando? ¿Se mueven por los sitios por donde tú quieres que lo hagan? Con un mapa de calor en tu homepage, podrás responder a todas estas preguntas.

Otro sitio estratégico y crítico donde colocaría un mapa de calor es en una landing page, especialmente si estás utilizando el tráfico de pago como forma de promoción. Te juegas mucho dinero y es lógico que quieras saber si está sirviendo para algo o no.

Una visita rápida a Google Analytics puede decirte si esas páginas que mejor funcionan lo hacen porque tienen los elementos necesarios para captar la atención del usuario. Además, la profundidad del scroll te permitirá determinar si la longitud de tus artículos, por ejemplo, es la ideal, y en qué punto pierden el interés, para que puedas optimizar la página con elementos que hagan que los usuarios no la abandonen.

En las páginas que peor funcionan

Las páginas que peor funcionan en tu web también se beneficiarán de un mapa de calor. Podrás averiguar qué ha ido mal: ¿se han distraído con un banner? ¿No han llegado a ver los precios de tu producto? ¿Han hecho clic en las reseñas de los clientes? Con toda esta información, podrás mejorar estas páginas para darles un empujón de experiencia de usuario.

Siempre que hagas un cambio de diseño importante

Si tienes en mente un cambio de diseño importante, es hora de configurar un mapa de calor. Planifícalo con tiempo suficiente como para que puedas recoger datos antes y después. Si configuras el mapa de calor dos días antes del cambio, no tendrás suficiente información como para tomar decisiones relevantes.

Limitaciones de los mapas de calor

Aunque parece que los mapas térmicos son lo más de lo más, la realidad es que tienen sus limitaciones. No sería justo no contarte cuáles son los contras de esta importante herramienta de experiencia de usuario.

No son fáciles de interpretar

Interpretar un mapa de calor no es tan fácil como abrir una aplicación que recoja y represente y los datos y decir “Ahhhhh, ya lo veo, mi problema es…”. En el mejor de los casos, verás las áreas más calientes, donde los usuarios hacen clic, lo que será una buena noticia.

Pero, ¿y si hacen clic en muchas áreas irrelevantes? ¿Y si no prestan atención a lo que más te interesa? ¿Y si no tienes claro qué elementos debes resaltar y qué elementos debes atenuar?

Y más allá. ¿Qué significa que los usuarios hacen scroll? ¿Significa que les ha interesado el tema y han encontrado lo que buscan o significa que no han dado con aquello que buscaban?

No siempre funcionan buen en páginas dinámicas

Una página dinámica, que se extiende o contrae en función de la interacción de la audiencia o que cambia a medida que hacen scroll, puede dar problemas a los mapas de calor. ¿Por qué? Porque los mapas de calor recogen datos de múltiples acciones, ofreciéndote una “media” de las acciones más comunes. Si los usuarios ven diferentes versiones de la misma página o existen múltiples rutas para llegar el mismo final, será complicado que un mapa de calor pueda llegar a una conclusión clara.

Son difíciles de conciliar con el móvil

Nadie tiene el mismo comportamiento en una pantalla gigante cómodamente sentado en su escritorio que en una pequeña pantalla en la cola del cine. El comportamiento en el móvil es más impaciente, más visual y menos profundo.

Además, los mapas de desplazamiento no te darán gran información, porque los usuarios de los móviles no tienen ratones que mover. En general, un mapa de calor no puede detectar con precisión la indecisión subconsciente de los usuarios móviles.

Además, en más de una ocasión, se reducen o eliminan elementos de la página para hacer que sea más rápida en el móvil, de hecho, esa es precisamente la esencia de la tecnología AMP: bloquear o eliminar todo aquello que no sea estrictamente necesario y hacer que la página sea más ligera.

Análisis de mapas de calor: qué debes mirar y qué preguntas debes hacerte

Es probable que a estas alturas de artículo tengas muy claro qué es un mapa de calor y para qué sirve, pero poca idea de cómo puedes aplicarlo a tu propia web.

No pasa nada, para eso estás en esta sección.

Errores a evitar en un análisis de mapas de calor

Antes de avanzar, permíteme que reflexione un momento sobre los problemas que puedes tener si no realizas un análisis de mapas de calor con cierto rigor. Si configuras un mapa de calor, recoges algunos datos y no hacer nada más, es más que probable que pierdas la concentración, hagas cambios que no son necesarios o te pierdas entre tantos datos.

Por eso es importante utilizar los mapas de calor como parte de un proceso de investigación y no como única herramienta de experiencia de usuario.

Vamos a poner un ejemplo: ves que la gente hace mucho clic en la sección de Ayuda, y deduces que se están perdiendo o que no tienen claro a dónde deben dirigirse. Significa que debes saber qué información debes ofrecerles, lo que implica algo más que configurar un mapa de calor y echarse a dormir.

Pasos para extraer información de los datos de tu mapa de calor

Aquí tienes cuatro pasos que puedes seguir para extraer información de valor de los datos de tu mapa de calor.

1. Analizar Google Analytics

Empieza analizando los datos de tu cuenta de Google Analytics. Específicamente, busca puntos de dolor dentro del embudo, detectando:

• Puntos donde pierdes usuarios.
• Páginas problemáticas, donde a pesar de tu gran contenido o la calidad de tus productos, no consigues conversiones.
• Páginas que necesitan optimización.

Cuando encuentres algo interesante (por ejemplo, una gran caída en X página), configura el mapa de calor adecuado para probar una hipótesis basándote en esos datos.

No olvides que necesitas contexto en estas páginas. No es lo mismo analizar una landing page orientada a la captación de clientes que un formulario o una página de un ecommerce.

2. Hacer preguntas

Los datos por sí mismos no te dirán gran cosa. Antes de configurar un mapa de calor, debes tener una hipótesis que contrastar.

Las preguntas que debes hacerte pueden ser del tipo:

¿Estoy ofreciendo toda la información para que el usuario tome una decisión?

¿La/s llamadas a la acción atraen a la gente?

¿Hace gente clic en las llamadas a la acción que he diseñado?

Tener preguntas ANTES de configurar un mapa de calor te dará material para contrastar tus teorías.

3. Define un mapa de calor

Hemos llegado al punto en el que debes elegir la mejor herramienta de mapas de calor para tus necesidades. En mi caso, utilizo Hotjar, aunque existen otras muchas que puedes utilizar.

Hay muchas opciones, pero la función de grabación de pantalla es un gran activo, no te olvides de añadirlo a tus herramientas.

4. Analiza el mapa de calor y saca conclusiones junto con otras investigaciones

El siguiente paso consiste en realizar un análisis del mapa de calor basado en las preguntas planteadas anteriormente. Recuerda que las preguntas se basarán en tu investigación inicial y en las lagunas que hayas observado en el embudo.

El análisis de mapas de calor también puede ser útil para identificar problemas técnicos, como los siguientes:

• La gente hace clic en los artículos varias veces pero no pasa nada.
• Google Analytics muestra que la gente no hace scroll.
• La gente no se desplaza más abajo en una página porque está atascada.
• Las conversiones son realmente bajas en un navegador específico (Safari, por ejemplo).

Una vez que hayas respondido a las preguntas e identificado los problemas, relaciona los datos de tu mapa de calor con otras investigaciones que hayas realizado, como encuestas, sondeos, datos de Google Analytics, entrevistas, pruebas con usuarios, etc.

Preguntas para el análisis de mapas de calor

Para terminar este artículo, quiero ayudarte a plantear algunas preguntas que te sirvan para plantear hipótesis que puedes confirmar o desmentir con mapas de calor.

¿En qué hace clic la gente?

Aquí puedes ver un mapa de calor de la página principal de Social Media Pymes. Un análisis de este mapa de calor me demuestra que la gente piensa que la pregunta de “¿Necesitas contenidos profesionales?” es un botón, o al menos, un elemento clickable. Definitivamente, tengo que revisar esto.

¿Qué camino está tomando la gente?

El análisis de mapas de calor también puede ayudarle a comprender mejor el camino que sigue la gente. Si observas que la gente hace clic en determinado botón de tu web, puedes seguir esos pasos para saber a dónde van y colocar activos relevantes para la conversión.

¿Cuáles son tus enlaces más visitados?

Supongamos que observas tu mapa de calor y notas que casi nadie hacer clic en la parte superior, pero sí lo hacen en la parte inferior. Puede significar que la información está demasiado baja y que debes moverla a la parte superior para maximizar las oportunidades de conversión.

Si vuelves a consultar el mapa de calor de Social Media Pymes, verás que mucha gente hace clic aquí:

Parece que debería colocar ahí un enlace para llevar a la gente hacia donde está mostrando interés, ¿no crees?

¿Qué contenidos interesan más a la gente?

Otra cosa que puedes hacer es identificar el contenido que más interesa a la gente. Puedes utilizar el mapa de calor para ver qué parte de la página es la que más interacción genera. Te ayudará a responder a estas preguntas:

• ¿Qué contenidos de esta página son atractivos?
• ¿Qué contenido interesa más a la gente?
• ¿Qué contenido debería destacar?

¿En qué parte están perdiendo interés los usuarios?

Los mapas de calor también pueden indicarte dónde están perdiendo el interés los usuarios. Para lograrlo, tienes los mapas de calor de scroll, como el que puedes ver debajo de estas líneas.

Verás que en este tipo de mapas de calor, se pasa del rojo al amarillo y luego se oscurece de forma drástica. Ahí es donde la gente abandona tu página y donde debes prestar atención a qué está pasando.

Es tu turno

Espero haberte convencido de la importancia de utilizar los mapas de calor para cualquier proyecto web que pongas en marcha.

¿Los estás utilizando ya? ¿Tienes algo chulo que compartir con los lectores de Social Media Pymes? No dudes en comentar a continuación.