Mapas de desplazamiento vertical (scroll maps): 5 formas de utilizarlos para mejorar la UX y las conversiones

Los scroll maps recopilan información valiosa sobre el comportamiento de los usuarios, lo que te ayuda a medir la interacción de los visitantes y determinar en qué punto de tu sitio web pierden el interés. Los scroll maps recopilan rápidamente datos sobre cómo los visitantes se desplazan verticalmente por tu sitio web para que puedas identificar oportunidades de mejora de la experiencia de usuario (UX), hacer los cambios pertinentes y, en última instancia, aumentar las conversiones.

Cuando hayas terminado de leer este artículo, sabrás todo lo que necesitas sobre los scroll heatmaps: qué son, cómo configurar uno, y cómo utilizarlos para conseguir insights útiles que te ayuden a mejorar tu experiencia de usuario.

¿Qué son los scroll maps?

Los scroll maps (también llamados "scroll heatmaps" o "mapas de desplazamiento vertical") son un tipo de heatmap de un sitio web que muestran visualmente hasta qué punto de la página se desplazan hacia abajo los usuarios en un ordenador, tableta o móvil. En los mapas de desplazamiento vertical se indican las partes más populares (calientes) y menos populares (frías) de una página mediante una escala de colores que va desde el rojo (para indicar los elementos que más ven los usuarios) hasta el azul (para señalar los elementos con los que menos interactúan).

Además, los mapas de desplazamiento vertical también muestran el porcentaje de usuarios que llegó hasta puntos concretos de una página y su límite visible medio, que es el punto máximo de la página que la gente ve cuando la abre sin tener que desplazarse.

Scroll maps vs. heatmaps

Un heatmap o mapa de calor es una representación gráfica de diferentes datos de analítica web. Existen diferentes tipos de heatmaps, en función de los datos que capturan. Con los mapas de desplazamiento vertical podrás averiguar cuáles son las secciones más vistas de tu página. En cambio, si quieres saber cuáles los elementos en los que más se ha hecho clic (o tocado), debes consultar un click map o mapa de clics.

Se podría decir que los mapas de desplazamiento vertical crean un arco iris vertical de tu página web, mientras que otro tipo de mapas de calor, como los mapas de clics o los move maps o mapas de movimientos, señalan puntos concretos.

Consulta algunos ejemplos de mapas de calor para comprender mejor las diferencias entre unos y otros.

5 formas de utilizar scroll maps

Ahora que tienes claro qué es un mapa de desplazamiento vertical, seguramente te preguntes cómo puedes utilizarlo para identificar patrones de datos y oportunidades de optimización de la UX. Las posibilidades pueden ser infinitas, pero ¿por qué no empiezas por las cinco formas más habituales de utilizar los mapas de desplazamiento vertical?

1. Averigua dónde estás perdiendo la atención de la gente

Fíjate en los datos porcentuales y en los colores más fríos (azules), que son los que indican las secciones de tu página que menos ven los visitantes.

Si tu objetivo es aumentar y mantener la atención de los usuarios para que se desplacen más abajo en la página (por ejemplo, si tienes una página de destino larga y quieres asegurarte de que ven toda la información que contiene), los datos del mapa de desplazamiento vertical te darán pistas sobre cómo mejorar el diseño de la UX o los textos para reducir los abandonos y aumentar las tasas de conversión.

2. Detecta finales falsos

A veces, los visitantes no se dan cuenta de que hay más contenido en la parte inferior de la página. Esto se conoce como "false bottom" o "final falso". Puede deberse a que haya espacios en blanco, saltos de línea o bloques que confunden y frustran a los usuarios. Comprueba los porcentajes de los scroll maps para averiguar si los visitantes continúan desplazándose a partir de un elemento en concreto o si, por el contrario, creen que la página acaba en ese punto.

3. Descubre si los usuarios ven el contenido anterior al límite visible medio

El límite visible medio indica el punto máximo de la página que los usuarios ven cuando la abren sin tener que desplazarse.

Un mapa de desplazamiento vertical calcula automáticamente el límite visible medio de tu página, tanto para usuarios de ordenadores como de móviles. Si sabes dónde está ese límite, podrás colocar los elementos importantes (como las llamadas a la acción) antes de ese punto asegurándote de que se vean tanto en ordenadores como en móviles para promover la interacción de los usuarios tan pronto como abran la página.

4. Entérate si los usuarios encuentran lo que necesitan

Se podría pensar que el objetivo de utilizar un scroll map para optimizar una página es conseguir que el mayor número posible de personas se desplace hasta la parte inferior. Pero esto no siempre es una buena señal. En algunos casos, los usuarios se desplazan buscando un contenido que no encuentran, y esto puedes averiguarlo con un scroll heatmap.

La agencia digital Epiphany, con sede en el Reino Unido, mejoró el sitio de comercio electrónico de su cliente añadiendo filtros a las páginas de categorías después de que los datos del mapa de desplazamiento vertical mostraran que los usuarios tenían que desplazarse demasiado para encontrar lo que necesitaban (consulta el caso práctico completo).

A veces, en diseño, menos es más.

5. Confirma si tu página funciona bien en todos los dispositivos

Es posible que los usuarios no se comporten de la misma manera en el ordenador y en el móvil. Si estás optimizando un sitio web adaptable (que redimensiona la página en función del dispositivo), un mapa de desplazamiento vertical te mostrará dónde dejan de desplazarse los usuarios en el móvil y en el ordenador. Utiliza estos datos para diseñar una página que funcione bien en todos los dispositivos.

Los datos de desplazamiento te pueden ayudar a diseñar experiencias de usuario Píxel Perfect. Consulta los datos del mapa de calor para saber exactamente dónde debes colocar un CTA para captar la atención de los usuarios de ordenadores y móviles.

Cómo configurar mapas de desplazamiento con Hotjar

Configurar un nuevo mapa de desplazamiento es fácil; si aún no eres cliente de Hotjar, hazte con una prueba gratuita ahora para empezar con nuestros Heatmaps de Hotjar.

Cuando cree un nuevo mapa de calor en Hotjar, se generarán automáticamente todos los tipos de mapas de calor (clic, clic de rabia, movimiento, desplazamiento y zonas de compromiso), por lo que no hay necesidad de hacer nada especial para implementar un mapa de desplazamiento.

Paso 1: añada el código de seguimiento de Hotjar a su sitio web

Puede instalar el código de seguimiento Hotjar de varias maneras, incluyendo a través de Google Tag Manager y el plugin de WordPress.

Paso 2: activar la "captura de sesión

Los mapas de calor continuos se generan a partir de las sesiones. Cuando la "captura de sesión" está activada, los mapas térmicos están disponibles automáticamente y comienzan a recopilar datos sobre el comportamiento de los usuarios. Por lo tanto, primero debe verificar que la "captura de sesión" está habilitada haciendo clic en el widget de cobertura de tráfico en la esquina superior derecha de la página.

Si la captura de sesión no está habilitada, verás un botón naranja 'Captura de sesión deshabilitada' en la parte superior de la página, que te lleva a la página de configuración de la captura de sesión.

Paso 3: comience con los mapas térmicos continuos y seleccione su "agrupación de datos

Haga clic en Mapas de calor en el menú de navegación de la izquierda.

A continuación, haga clic en el botón "Nuevo mapa de calor" para empezar.

Los mapas térmicos pueden mostrar datos de una única URL específica o de un grupo de URL que coincidan con tus criterios de segmentación. Cuando muestres los datos de un grupo de URLs, sólo verás una captura de pantalla para tu mapa de calor, pero las métricas que aparecen sobre la captura de pantalla serán agregadas de todas las URLs que coincidan con tus criterios de segmentación.

Paso 4: introduce una URL de tu sitio y selecciona un tipo de mapa de calor

Introduzca la URL de la página que desea rastrear, luego seleccione el tipo de mapa de calor que desea configurar (recuerde, Hotjar recopilará datos para todos los tipos de mapas de calor, por lo que puede cambiar a otro tipo después de crear uno).

Tu selección te llevará de vuelta al panel de control de Hotjar, donde podrás editar el mapa de calor y filtrar los datos recopilados. Para obtener más información sobre la creación de un mapa de calor en Hotjar, haga clic en aquí.

Paso 5: seleccione los filtros según los criterios de su mapa de calor

Actualice el intervalo de fechas y añada los filtros del mapa de calor para mostrar sólo las sesiones que coincidan con sus criterios, como la duración de la sesión, el comportamiento y los atributos del usuario-por ejemplo, el cargo, el país e incluso el idioma.

Para más detalles sobre todos los filtros de mapa de calor de Hotjar y ejemplos de casos de uso, lea este artículo: Casos de uso para filtrar mapas de calor.

Eso es todo, ¡tu primer mapa de desplazamiento está en vivo! Este es el aspecto que tendrá desde el panel de control de Hotjar:

Puede alternar su mapa de calor para mostrar sesiones de escritorio, tableta o móvil. Para ver los datos del mapa de desplazamiento, simplemente haga clic en "Desplazamiento" en las opciones de tipo de mapa de calor. También puede ver y descargar/exportar todos los datos sin procesar. ¡Diviértete!