Definición
Above the Fold (o *"por encima del pliegue"*) es la zona de una página web que el usuario ve sin necesidad de hacer scroll. En el contexto del eCommerce y DTC, se refiere a todo lo que aparece en pantalla al cargar una ficha de producto, una landing page o la home: titular, imagen principal, precio, CTA, badges de confianza y propuesta de valor.
Es, literalmente, el terreno más caro de tu tienda online. Si el usuario no encuentra lo que busca en esos primeros segundos, abandona. Punto.
El término viene del periodismo impreso: los diarios doblaban la página por la mitad y colocaban las noticias más importantes en la parte superior del pliegue para vender más ejemplares en el kiosco. En digital, el "pliegue" es el borde inferior del viewport (la ventana visible del navegador o del móvil).
Analogía: el escaparate de una tienda física
Piensa en una tienda de ropa en una calle concurrida. El escapate (vitrina) es tu Above the Fold: si el maniquí, la iluminación y el precio visible no captan la atención en 3 segundos, el peatón sigue caminando.
En eCommerce pasa igual. El usuario no "entra a mirar". Escanea. Decide en milisegundos si tu página merece su tiempo o si vuelve a Google. La primera pantalla es tu escaparate digital: tiene que comunicar qué vendes, a quién y por qué deberían comprarte a ti y no a la competencia.
Fórmula: los 5 segundos críticos
No existe una fórmula matemática exacta, pero la industria trabaja con este modelo mental:
Impacto Above the Fold = (Claridad de propuesta) × (Velocidad de carga) × (Relevancia del CTA) ÷ (Fricción visual)
Donde:
- Claridad de propuesta: ¿se entiende qué es en <5 segundos?
- Velocidad de carga: cada segundo extra de carga reduce conversión ~7% (dato de Google/SOASTA).
- Relevancia del CTA: botón visible, con verbo de acción y contraste.
- Fricción visual: pop-ups, banners, menús saturados, tipografías ilegibles.
Datos de referencia del sector:
1. 57% del tiempo total de visualización de una página se concentra en la primera pantalla (Nielsen Norman Group).
2. 75% de los usuarios juzgan la credibilidad de una web por su diseño en la primera impresión (Stanford Web Credibility Research).
3. Reducir el tiempo de carga de 3s a 1s puede aumentar la conversión hasta un 27% en móvil (Google, Think with Google).
Tabla comparativa: Above the Fold vs. Below the Fold
| Criterio | Above the Fold | Below the Fold |
|---|---|---|
| **Objetivo** | Captar, enganchar, convertir | Informar, resolver dudas, cerrar |
| **Elementos típicos** | Titular, imagen hero, precio, CTA, badges | Descripción larga, reviews, FAQ, políticas |
| **Atención del usuario** | Alta (escaneo rápido) | Media-baja (solo si hay interés) |
| **Métrica clave** | CTR, bounce rate, add-to-cart | Time on page, scroll depth, conversion final |
| **Error común** | Saturar con banners y pop-ups | Esconder info clave que debería estar arriba |
| **Prioridad móvil** | Crítica (viewport reducido) | Secundaria |
En móvil, el Above the Fold es aún más crítico: el viewport es ~5 veces más pequeño que en desktop. Lo que en desktop "cabe", en móvil desaparece bajo el pliegue.
Aplicación en DTC / eCommerce
1. Ficha de producto (PDP)
El Above the Fold debe incluir: imagen principal nítida + nombre del producto + precio + variantes (talla/color) + botón "Añadir al carrito" + envío gratis/devolución. Si el usuario tiene que hacer scroll para ver el precio, estás perdiendo dinero.
2. Landing page de campaña
Titular con la promesa principal + subtítulo con beneficio + CTA + prueba social (logos, "+10.000 clientes"). Sin menú de navegación que distraiga.
3. Home de la tienda
Hero banner con la colección estrella o la promo activa + categorías principales visibles + buscador funcional. Evita carruseles automáticos: reducen el CTR del primer slide hasta un 80%.
4. Checkout
Resumen del pedido, método de pago y botón de confirmación visibles sin scroll. Cada campo innecesario arriba mata la conversión.
Errores comunes
1. Pop-up de newsletter al segundo 0: interrumpe antes de que el usuario vea la propuesta. Mata el Above the Fold.
2. Banners apilados: descuento + envío + cookies + chat = caos visual. El ojo no sabe dónde mirar.
3. Imagen hero gigante sin texto: bonito, pero no comunica. El usuario no sabe qué vendes.
4. CTA escondido: "Añadir al carrito" tiene que ser visible sin scroll en móvil. Sin excepciones.
5. Tipografías diminutas o bajo contraste: el 60% del tráfico es móvil. Si no se lee en un iPhone a plena luz, no sirve.
6. Carrusel automático: el usuario rara vez ve el slide 2. Mejor un hero estático con mensaje claro.
7. Ignorar el "above the fold" móvil: diseñar primero en desktop y adaptar después es un error clásico. Mobile-first, siempre.
Términos relacionados
- Below the Fold: zona que requiere scroll. Complementaria, no menos importante.
- Hero Section: bloque visual principal, normalmente ocupa el Above the Fold.
- CTA (Call to Action): botón o enlace que guía al usuario hacia la conversión.
- Bounce Rate: % de usuarios que abandonan sin interactuar. Directamente ligado a un mal Above the Fold.
- Scroll Depth: métrica que mide hasta dónde baja el usuario. Si es bajo, revisa tu primera pantalla.
- Viewport: área visible del navegador. Define el "pliegue" real en cada dispositivo.
- Mobile-First Design: filosofía de diseño que prioriza la experiencia móvil.
- LCP (Largest Contentful Paint): métrica de Core Web Vitals que mide cuándo carga el elemento principal del Above the Fold. Objetivo: <2,5s.
Conclusión
El Above the Fold no es "la parte bonita de la web". Es la zona donde se gana o se pierde la venta. En DTC, donde el usuario compara en 3 pestañas abiertas y decide en segundos, tu primera pantalla tiene que responder tres preguntas: *¿qué vendes? ¿cuánto cuesta? ¿por qué debería confiar en ti?* Si eso no está resuelto sin scroll, ninguna optimización posterior te salvará.