Scroll en UX: tipos, métricas y buenas prácticas

El scroll es una de las interacciones más naturales y frecuentes en la web. Lo hacemos decenas de veces al día sin pensarlo: deslizar el dedo en el móvil o girar la rueda del ratón para ver más contenido. Pero detrás de esta acción tan cotidiana hay decisiones de diseño que impactan directamente en la experiencia del usuario y en la conversión.

En este artículo vamos a explicar qué es el scroll en UX, qué tipos existen, cómo medir el scroll depth como métrica CRO y cuáles son las mejores prácticas para que tus usuarios lleguen hasta donde necesitas que lleguen.

Qué es el scroll

En el contexto web, scroll (o desplazamiento) es la acción de mover el contenido visible de una página hacia arriba, abajo, izquierda o derecha para acceder a contenido que no cabe en la pantalla. El término viene del inglés to scroll, que significa desplazar o enrollar.

El scroll existe porque las páginas web contienen más información de la que una pantalla puede mostrar simultáneamente. En los primeros años de la web, existía el mito de que "todo lo importante debe estar above the fold" (por encima del pliegue). Hoy, con la era móvil, el scroll es la forma principal de consumir contenido.

Tipos de scroll en diseño web

No todos los scrolls son iguales. Cada tipo tiene sus ventajas, sus riesgos y sus casos de uso óptimos.

Scroll tradicional (finito)

Es el scroll estándar: la página tiene un inicio y un final definidos. El usuario se desplaza hacia abajo y, al llegar al pie de página, no hay más contenido. Es el más predecible y el más usado.

Cuándo usarlo: en la mayoría de las páginas web — artículos, landing pages, páginas de producto.

Scroll infinito

El contenido se carga automáticamente a medida que el usuario se desplaza, sin necesidad de hacer clic en "siguiente". No hay final visible.

Ejemplos: feeds de redes sociales (Instagram, X), Pinterest, algunos e-commerce.

Ventajas:

• Mantiene al usuario enganchado.
• Elimina la fricción de la paginación.

Desventajas:

• Dificulta llegar al footer (si existe).
• Puede generar fatiga y sensación de pérdida de control.
• Peor para SEO: las páginas sin paginación definida son más difíciles de rastrear.

Parallax scroll

Diferentes capas del diseño se mueven a velocidades distintas durante el scroll, creando un efecto de profundidad tridimensional. Es visualmente impactante pero puede ser problemático.

Ventajas:

• Crea experiencias inmersivas y memorables.
• Ideal para storytelling visual.

Desventajas:

• Puede causar mareos o molestias en usuarios sensibles.
• Ralentiza la página si no está bien optimizado.
• Puede distraer del contenido principal.

Sticky scroll (elementos fijos)

Ciertos elementos de la página —como la navegación, un CTA o un resumen— permanecen fijos en pantalla mientras el usuario hace scroll por el resto del contenido.

Ejemplos: menús de navegación sticky, botones "Añadir al carrito" fijos en mobile, barras de progreso.

Ventajas:

• Mantiene accesibles los elementos clave.
• Reduce la fricción para la conversión.

Tipo de scroll	Experiencia	Riesgo principal	Mejor uso
Tradicional	Predecible	Ninguno relevante	Todo tipo de web
Infinito	Adictiva	Fatiga, SEO pobre	Feeds, catálogos grandes
Parallax	Inmersiva	Rendimiento, mareos	Storytelling, portfolios
Sticky	Funcional	Ocupar espacio útil	CTAs, navegación

Scroll depth: la métrica CRO que deberías medir

El scroll depth (profundidad de scroll) mide hasta qué punto de la página llegan los usuarios. Se expresa normalmente en porcentaje: un scroll depth del 75 % significa que el usuario ha visto tres cuartas partes de la página.

Por qué es importante

• Revela si el contenido engancha: si la mayoría de usuarios abandonan al 25 %, algo falla en la parte superior de la página.
• Indica dónde colocar los CTAs: si el 80 % de los usuarios llega al 50 % de la página, tu CTA principal debería estar ahí o antes.
• Complementa la tasa de rebote: un usuario puede rebotar (visitar una sola página) pero haber leído el artículo completo. El scroll depth aporta contexto.

Cómo medir scroll depth con GA4

Google Analytics 4 registra automáticamente el evento scroll cuando el usuario alcanza el 90 % de la página. Pero para un análisis más granular, necesitas configurar eventos personalizados:

1. En Google Tag Manager, crea un trigger de tipo Scroll Depth.
2. Configura los umbrales: 25 %, 50 %, 75 %, 90 %.
3. Crea un tag de GA4 que envíe un evento personalizado (por ejemplo, scroll_depth) con el porcentaje como parámetro.
4. En GA4, registra scroll_depth_percentage como dimensión personalizada para poder segmentar y analizar.

Con esta configuración, podrás ver en GA4 qué porcentaje de usuarios alcanza cada umbral en cada página, lo que te da información para optimizar la estructura y los CTAs.

Buenas prácticas de scroll en UX

1. Indica que hay más contenido

Si la parte visible de la página parece completa, el usuario no hará scroll. Usa elementos visuales como flechas, textos cortados, imágenes parcialmente visibles o animaciones sutiles que inviten a desplazarse.

2. Carga rápida

El scroll pierde toda su eficacia si la página tarda en cargar. Optimiza imágenes, usa lazy loading y minimiza el JavaScript innecesario. Un scroll fluido requiere una página rápida.

3. Contenido progresivo

Estructura tu contenido de forma que cada sección del scroll aporte valor. No rellenes con contenido de baja calidad para alargar la página. Mejor una página corta que engancha que una larga que aburre.

4. CTAs visibles sin scroll (y reforzados durante el scroll)

Tu CTA principal debe ser visible sin scroll (above the fold), pero también debe repetirse en puntos estratégicos a lo largo de la página. Un CTA sticky en mobile es una práctica excelente para páginas largas.

5. Evita el scroll horizontal

El scroll horizontal es antinatural en la web y frustra a los usuarios. Solo es aceptable en casos muy específicos como carruseles de imágenes o tablas de datos anchas en mobile. Incluso en esos casos, señaliza claramente que hay contenido oculto a la derecha.

6. Barra de progreso

En artículos largos, una barra de progreso en la parte superior indica al usuario cuánto le queda por leer. Reduce la incertidumbre y motiva a terminar.

7. Respeta el scroll nativo

Evita secuestrar el scroll (scroll hijacking), es decir, modificar la velocidad o el comportamiento natural del desplazamiento. Es una de las prácticas más odiadas por los usuarios y puede generar frustración inmediata.

Scroll y conversión

El scroll no es solo una interacción de navegación. Es un indicador de interés y engagement:

• Los usuarios que hacen scroll profundo están más comprometidos y tienen más probabilidad de convertir.
• La posición de los elementos de conversión respecto al scroll depth es crítica. Un formulario que solo ven el 20 % de los usuarios necesita reubicarse.
• En tests A/B, mover secciones de contenido y medir el impacto en scroll depth es una técnica CRO muy efectiva.

Conclusión

El scroll es la forma en que los usuarios consumen tu contenido. Medir cómo lo hacen —con scroll depth— y diseñar para facilitarlo —con buenas prácticas UX— son dos pilares de la optimización de la conversión.

No asumas que todos tus usuarios leen toda la página. Mide, analiza y ajusta. Los datos de scroll te dirán exactamente dónde pierdes a tu audiencia y dónde colocar tus elementos de conversión.

Si quieres optimizar la experiencia de tu web para que convierta más, echa un vistazo a nuestros servicios de agencia CRO o empieza con un análisis gratuito en Scan&Boost.

— Adrià Vidal