Es común que los procesos de optimización de conversión utilicen datos de herramientas de analítica para detectar áreas de mejora. Aunque estas herramientas describen la interacción del usuario con un producto, como cuánto tiempo o en qué orden navegó en un sitio web, se quedan cortas para explicar por qué los usuarios actúan de una manera o de otra. Para complementar este análisis se utilizan herramientas llamadas Mapas de Calor o Heatmaps.
Qué es un Mapa de Calor
Un mapa de calor (heatmap) es una forma de visualización de datos que muestra dónde los usuarios de un sitio web o una app móvil seleccionan, cómo se desplazan y se navegan una página en sus pantallas. El «calor» en el nombre se refiere a la escala de colores que utiliza para representar las acciones de los usuarios: el color rojo representa las áreas de la página que reciben más interacción (más calientes) y el color azul las áreas que son menos populares o frías. Las interacción se mide en la escala de colores que va de rojo a azul.
Hay tres visualizaciones principales para representar la interacción de los usuarios en una página:
- Los ClickMaps resaltan las áreas donde los usuarios dan clic o tocan la pantalla en dispositivos móviles.
- Los ScrollMaps resaltan las áreas en dónde los usuarios se desplazan en una página.
- Los Movemaps resaltan el movimiento del puntero del usuario antes de que dé clic en la pantalla.
Cómo usar mapas de calor en diseño de UX
Los mapas de calor pueden utilizarse tanto como una herramienta de investigación para entender el comportamiento de un grupo de usuarios y para probar hipótesis sobre el diseño de un producto digital para optimizar la tasa de conversión. Entre las aplicaciones de los mapas de calor en el proceso de diseño de UX se encuentran:
Hacer pruebas tempranas de diseño
Herramientas como Chalkmark de Optimal Workshop permiten crear pruebas usando imágenes de bocetos o wireframes de páginas para hacer análisis remoto con usuarios reales para saber desde las etapas tempranas de diseño si la distribución de elementos y la arquitectra de información funcionan como se espera.
La herramienta proveé un tablero donde se pueden analizar diferentes aspectos de la interacción en cada pantalla, desde su clickmap hasta el tiempo que le tomó a los usuarios dar clic en ella.
Con esta información es posible hacer ajustes en el diseño y hacer más evidentes los elementos asociados a los eventos de conversión para asegurar que los usuarios puedan utilizarlos con la menor fricción posible.
Detectar problemas en la navegación
A veces los usuarios dan clic en elementos como imágenes o encabezados porque esperan que sean enlaces. Los mapas de calor recopilan datos para detectar estos clics erróneos y hacer ajustes al diseño para crear patrones de clics que sean más afines a los usuarios del sitio web o la app.
Al mirar un mapa de calor de clics, puede detectar clics incorrectos y solucionar el problema agregando enlaces allí o modificando elementos decorativos para que no se pueda hacer clic en ellos.
Hacer pruebas en diferentes pantallas y dispositivos
El diseño web responsivo en el que las páginas de un sitio web se adaptan al tamaño y fomato de la pantalla de diferentes dispositivos es una forma eficiente de entregar contenido a una mayor audiencia. Los mapas de calor pueden usarse para hacer comparaciones entre las versiones para móviles y la de escritorio de un sitio y comprobar si los usuarios en una plataforma y otra se están perdiendo elementos de conversión importantes o si existen diferencias en su comportamiento.
Con los mapas de calor es posible hacer ajustes en el diseño más enfocados a cada platafoama para garantizar una buena experiencia de usuario en todos los dispositivos.
Medir que tan lejos están leyendo los usuarios
No todos los usuarios se desplazan hasta la parte inferior de cada página en un sitio web y podr[ian perderse información importante. Los usuarios visitan un sitio usando dispositivos y navegadores diferentes y no todos ven la misma información en la parte superior de la página (la parte de la página que se ve inmediatamente sin desplazarse).
Los scrollmaps muestran dónde se encuentra el «borde» (fold) promedio en diferentes dispositivos para realizar ajustes a la información clave y los puntos de conversión donde tengan más visibilidad. Estos mapas ayudan a entender hasta qué parte de la página se desplazan los usuarios antes de navegar a otra para reorganizar los elementos donde más personas puedan verlos.
Hacer pruebas A/B
Los mapas de calor y las pruebas A/B son complementarios: se pueden usar los datos del mapa de calor para elaborar hipótesis de prueba, crear variaciones para una prueba A/B y recopilar datos con otro mapa de calor para entender mejor por qué una variación es o no exitosa.
Por ejemplo, el equipo de diseño de UX en Bannersnack usan mapas de calor en sus landing pages para recopilar información de cómo los usuarios interactúan con ellas. Con base en los datos, el equipo crea un diseño alternativo y realiza pruebas A/B de las versiones anterior y nueva.
En una prueba, Bannersnack aumentó las suscripciones en un 25 % al combinar información de mapas de calor con pruebas A/B.
