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.

💡Consejo avanzado: Configura un mapa de calor con la herramienta Heatmaps de Contentsquare y empieza a recopilar automáticamente distintos tipos de datos: desplazamientos verticales, clics, clics con rabia y movimientos.

Y, aún mejor, combina todos esos datos en una única vista con las Engagement Zones o zonas de interacción, un tipo de heatmap con el que podrás identificar rápidamente con qué elementos de la página interactúan más los usuarios para que puedas validar la UX de esa página y asegurarte de que está optimizada para conseguir la máxima interacción.

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.

💡Consejo avanzado: Combina mapas de desplazamiento vertical con grabaciones de sesión para observar cómo interactúan usuarios reales con la página.

En cuestión de segundos, puedes pasar de estar viendo una grabación de un usuario concreto a tener una visión más amplia con un heatmap, o estar analizando un heatmap y abrir directamente grabaciones de personas que estén interactuando con esa página. Te servirá para comprender mejor tanto la experiencia de usuario individual como la general.

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.

💡Consejo avanzado: Para obtener aún más información sobre el comportamiento de los usuarios, configura una encuesta on-page con Contentsquare Surveys y haz preguntas como "¿Encontraste lo que estabas buscando?". Estos datos cualitativos te aportarán un mayor contexto cuando revises los datos cuantitativos de los mapas de calor.

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.

💡Consejo avanzado: En general, las páginas optimizadas para móviles tienden a ser más cortas, pero no sigas ciegamente las prácticas recomendadas.. Lo mejor es que recopila tus propios con un mapa de desplazamiento vertical y averigües cómo se comportan tus usuarios en dispositivos móviles para poder determinar la longitud y el diseño de página más adecuados para tu audiencia.

Cómo configurar mapas de desplazamiento (scroll maps) con Contentsquare

Puedes configurar mapas de desplazamiento en 3 sencillos pasos:

Paso 1: Agregar el código de seguimiento de Contentsquare a tu sitio web

Regístrate en Contentsquare para obtener un código de seguimiento único.

Luego, instala el código de seguimiento de Contentsquare en tu sitio web. Nuestras instrucciones detalladas (aquí) te ayudarán a instalar el código utilizando diferentes métodos.

Paso 2: Ingresar las URLs de las páginas

A continuación, agrega las URLs de las páginas para las que deseas crear mapas de desplazamiento. Estas instrucciones varían ligeramente según el plan

👉 Instrucciones de Heatmaps para los planes Free y Growth 👉 Instrucciones de Heatmaps para los planes Enterprise y Pro

Si estás en el plan Enterprise o Pro, ve a “Zoning Analysis” y haz clic en “Select a page or page group”.

Luego, ingresa las URLs de las páginas para las que quieres crear mapas de desplazamiento y haz clic en “Apply”

Paso 3: Revisar tus mapas de desplazamiento

Tu mapa de desplazamiento comenzará a llenarse a medida que Contentsquare recopile los datos del sitio.

Para ver tus mapas de desplazamiento, ve a la página que deseas analizar y selecciona “Heatmaps” y luego “Scroll map” en los menús desplegables.

También puedes alternar tu heatmap para mostrar sesiones de escritorio (desktop), tablet o móvil.

Crear un mapa de desplazamiento para entender mejor a los usuarios

Los mapas de desplazamiento permiten identificar qué secciones de tu página los usuarios se saltan y, lo que es más importante, el contenido que nunca ven.

Una vez que comprendas cómo interactúan los visitantes con tu sitio, utiliza herramientas como Session Replay para profundizar en por qué se comportan así y poder crear experiencias de usuario que realmente sorprendan.