Above the fold: qué es y por qué importa

Qué significa above the fold

Above the fold es la parte de una página web que el usuario ve sin necesidad de hacer scroll. Es lo primero que ve cuando llega a tu web: el área visible dentro de los límites de su pantalla en el momento de carga.

El término viene de los periódicos impresos. Las publicaciones doblaban en dos las portadas, y la parte superior —la que quedaba visible encima del doblez (the fold)— era el espacio premium donde se colocaban los titulares más importantes para atraer compradores en los quioscos.

En la web, el concepto se mantiene. El área visible sin scroll concentra la mayor atención del usuario, especialmente en los primeros segundos de carga. Lo que esté ahí determina en gran medida si el usuario seguirá explorando o se irá.

No existe un tamaño fijo para el above the fold. Depende del dispositivo, la resolución de pantalla y el tamaño del navegador de cada usuario. En escritorio convencional (1366x768px), el área visible es aproximadamente 600-700px de alto. En móvil, suele ser aún menor. Esto significa que el diseño above the fold debe pensarse para múltiples contextos.

Por qué es clave para la conversión

La razón por la que el above the fold importa tanto para la conversión es fisiológica y atencional: los usuarios deciden en segundos si quedarse o irse. Nielsen Norman Group lleva años documentando este comportamiento, y sus datos son consistentes: los usuarios toman la decisión de quedarse o abandonar una página en menos de 10 segundos.

En ese tiempo, solo han visto el above the fold.

Si esa primera área no comunica claramente qué ofreces, a quién y por qué debería importarle, la mayoría de los usuarios se van antes de ver el resto del contenido.

El above the fold también tiene un impacto directo en las métricas de negocio:

Una landing page con el CTA principal visible sin scroll puede aumentar la tasa de conversión entre un 20% y un 50% respecto a una donde el CTA requiere scroll
El tiempo hasta el primer clic (time-to-first-click) es significativamente menor cuando el elemento de acción está above the fold
La tasa de rebote se correlaciona negativamente con la claridad del mensaje en el hero: más claridad, menos rebote

Qué dice el eye-tracking

Los estudios de eye-tracking —tecnología que rastrea los movimientos oculares de los usuarios mientras navegan— han revelado patrones consistentes en cómo las personas leen y escanean páginas web.

El patrón F

Nielsen documentó en 2006 el patrón de lectura en forma de F, que sigue siendo válido hoy para páginas de texto denso: los usuarios leen la primera línea completa, luego hacen un movimiento horizontal más corto en la segunda línea, y finalmente escanean el margen izquierdo verticalmente.

Implicación directa: las palabras más importantes deben estar al principio de los títulos y párrafos, especialmente en el margen izquierdo.

La concentración de atención en el above the fold

Múltiples estudios de eye-tracking confirman que el 80% de la atención del usuario se concentra en la mitad superior de la página. La mitad inferior recibe solo el 20% restante. Y esto asumiendo que el usuario hace scroll, lo que no siempre ocurre.

Distribución de la atención por zona

Zona de la página	Atención media
Above the fold (primer 600px)	57%
Zona media (600-1200px)	28%
Zona inferior (>1200px)	15%

Esto no significa que el contenido below the fold sea irrelevante —es esencial para usuarios que ya están considerando la acción—, pero sí que el trabajo de captar la atención y comunicar el valor debe ocurrir en la parte superior.

Qué elementos incluir above the fold

El contenido óptimo above the fold depende del tipo de página (homepage, landing page, ficha de producto), pero hay elementos que tienen presencia casi universal en las páginas de alta conversión.

1. Propuesta de valor clara

La pregunta que el usuario se hace al llegar a tu web es: "¿Esto es para mí? ¿Me ayuda a resolver mi problema?". El título principal (H1) debe responder a esa pregunta en una frase. No con jerga corporativa, sino con el beneficio concreto que ofreces.

Ejemplo débil: "Soluciones innovadoras para tu negocio digital" Ejemplo fuerte: "Más ventas de tu web, con los mismos visitantes"

2. Subtítulo que amplía el contexto

El subtítulo complementa el H1 añadiendo contexto: quién eres, cómo lo consigues, o para quién es. Máximo 2 líneas.

3. CTA principal visible

El botón de acción principal debe estar visible sin scroll. Su texto debe ser específico y orientado a la acción: no "Enviar" sino "Empieza tu prueba gratuita", no "Más info" sino "Ver cómo funciona".

4. Elementos de credibilidad o prueba social

Un logo de cliente reconocido, una cifra de impacto o una línea de prueba social ("Usado por más de 2.000 empresas") añaden credibilidad inmediata y reducen la fricción de desconfianza.

5. Imagen o vídeo de soporte (opcional pero efectivo)

Una imagen que muestre el producto en uso, o un vídeo corto (no autoplay con sonido), puede aumentar la comprensión del valor y el tiempo de permanencia.

Errores comunes en el above the fold

Demasiado contenido

Intentar comunicar todo above the fold genera ruido y diluye la atención. El usuario no sabe dónde mirar ni qué hacer. El above the fold debe tener un único mensaje principal y una única llamada a la acción prioritaria.

Slider o carrusel como hero

Los sliders reducen la conversión de forma consistente en casi todos los tests A/B donde se han probado. El usuario ve la primera imagen y raramente espera a las siguientes. Si el slider oculta el CTA o el mensaje principal en la segunda o tercera diapositiva, la mayoría de usuarios nunca lo verán.

Imágenes de stock genéricas

Una imagen de personas sonriendo en una reunión de oficina no añade información ni credibilidad. Si la imagen no comunica algo específico sobre tu producto o tu cliente, ocupa espacio y distrae sin aportar.

CTA below the fold en móvil

Una landing page puede tener el CTA visible en escritorio pero enterrado tras 800px de scroll en móvil, especialmente si la imagen hero es de pantalla completa. Siempre testea el above the fold en dispositivos móviles reales.

Texto sobre imagen con poco contraste

Una imagen de fondo con texto encima es una combinación habitual, pero frecuentemente falla en accesibilidad y legibilidad. El contraste texto/fondo debe superar la ratio WCAG AA (4.5:1) incluso con imágenes.

Ejemplos: above the fold efectivo vs inefectivo

Caso A: Landing page de SaaS (inefectivo)

Menú con 8 elementos y un desplegable
Imagen hero corporativa que ocupa el 70% del espacio visible
Título: "Transformamos los negocios del futuro"
Sin subtítulo visible sin scroll
CTA: "Contáctanos" en el footer

Resultado: el usuario no entiende qué hace el producto, no ve ningún beneficio claro y no tiene ninguna razón para hacer clic.

Caso B: Landing page de SaaS (efectivo)

Menú con 4 elementos y un botón CTA en la navbar
Título directo: "Gestiona todos tus proyectos en un solo lugar"
Subtítulo: "Sin emails perdidos, sin reuniones innecesarias. Tu equipo, sincronizado."
CTA prominente: "Pruébalo gratis 14 días" (sin tarjeta)
Tres logos de clientes conocidos bajo el CTA
Captura de pantalla del producto al lado

Resultado: en menos de 5 segundos el usuario sabe qué es, para qué sirve, qué debe hacer y por qué puede confiar.

Cómo testear y optimizar tu above the fold

La optimización del above the fold no debería basarse solo en opiniones o tendencias de diseño. Debe basarse en datos de tu audiencia específica.

Paso 1: Instala un mapa de calor (Hotjar, Clarity) y analiza hasta dónde hace scroll el 50% de tus visitantes. Eso es tu above the fold real para tu audiencia.

Paso 2: Graba sesiones de usuarios nuevos en tu landing page principal. Observa qué leen, qué ignoran y dónde hacen clic primero.

Paso 3: Diseña hipótesis de mejora basadas en lo que observas. "Si el CTA está más arriba y el mensaje del H1 es más específico, la tasa de conversión aumentará."

Paso 4: Ejecuta un test A/B para validar la hipótesis con tráfico real.

El above the fold es uno de los elementos con mayor impacto potencial en CRO porque afecta a todos los usuarios, no solo a los que llegan al final de la página. Un test bien ejecutado aquí puede tener un impacto mayor que diez tests en zonas de menor visibilidad.

La optimización de landing pages empieza siempre por el análisis del above the fold: qué ve el usuario, qué entiende y qué hace en los primeros segundos.

Para un diagnóstico rápido de tu landing page actual, prueba Scan&Boost y obtén recomendaciones concretas sobre tu zona de mayor impacto.

Adrià Vidal, CRO specialist en Boost.