Por qué above the fold es un comportamiento, no una altura en píxeles

¿Qué significa above the fold?

El contenido above the fold es todo lo que un visitante puede ver sin hacer scroll, lo que lo convierte en una propiedad de su pantalla y no en un número que puedas escribir en un archivo de diseño. El término viene de los periódicos de gran formato, que se doblaban por la mitad para exponerlos en el quiosco, de modo que solo la mitad superior de la portada daba la cara al comprador. Los editores ponían ahí arriba la historia que tenía que vender el periódico.

La web heredó la idea porque las pantallas siguen terminando en algún sitio. Amy Schade, de Nielsen Norman Group, explicó el mecanismo con claridad en 2015: "What is visible on the page without requiring any action is what encourages us to scroll." El pliegue no frena a la gente. Decide si se molesta.

¿Por qué una altura fija en píxeles es la forma equivocada de definir el pliegue?

Porque no hay un único pliegue que definir. El argumento de Schade contra un número fijo es directo: "A responsive design may have 2, 3, 4, or more different folds, specific to the devices and screen sizes that the design was optimized for." Cualquier valor que elijas es correcto para una minoría de tus visitantes y erróneo para todos los demás.

La altura disponible para tu contenido se mueve por razones que no tienen nada que ver con tu maquetación:

• El chrome del navegador. Barras de herramientas, tiras de pestañas y barras de marcadores se comen cantidades distintas en cada navegador y sistema operativo.
• La barra de direcciones móvil, que se colapsa al hacer scroll, de manera que el viewport es físicamente más alto después del primer deslizamiento que antes.
• El escalado de pantalla del sistema operativo y el tamaño de fuente por defecto del visitante.
• El nivel de zoom, que no es cero mucho más a menudo de lo que suponen los diseñadores.
• La orientación del dispositivo, que reduce a la mitad o duplica el número en una rotación.

Trata el pliegue como una distribución y no como una línea. La pregunta útil no es "dónde está el pliegue" sino "qué ve el percentil 25 de mis visitantes antes de hacer scroll", y eso se responde con tus propios datos en lugar de con el número de un artículo.

¿Qué dice la investigación sobre el scroll above the fold?

Nielsen Norman Group hizo eyetracking sobre páginas de noticias, comercio electrónico, blog, FAQ y enciclopédicas, con 120 participantes en pantallas de 1920 por 1080, recogiendo más de 130.000 fijaciones oculares. Therese Fessenden publicó los resultados el 15 de abril de 2018. El titular es que la gente sí hace scroll, y que la atención se sigue apilando mucho arriba.

Zona de la página	Porción del tiempo de visionado
Above the fold	57%
Dos primeras pantallas (hasta 2160px)	74%
Tres primeras pantallas	81%
20% superior de la página	más del 42%
40% superior de la página	más del 65%

El cambio a lo largo del tiempo es la parte que merece discusión. En el estudio de 2010 de NN/g, hecho sobre monitores de 1024 por 768, el 80% del tiempo de visionado se pasaba above the fold. Para 2018 era el 57%. El scroll se volvió normal, así que el pliegue se hizo menos absoluto y más relativo, pero no dejó de importar: más del 65% del tiempo de visionado above the fold se concentraba en la mitad superior del viewport, lo que significa que la atención se adelgaza dentro de la primera pantalla, no solo después de ella.

La medición de la propia frontera que hizo Schade en 2015 es la versión más afilada del efecto. Los 100 píxeles justo por encima del pliegue se vieron un 102% más que los 100 píxeles justo por debajo, y en el conjunto de sus datos la diferencia media en cómo los usuarios tratan la información por encima frente a por debajo del pliegue fue del 84%. Una fila de píxeles de movimiento cambia muy poco; cruzar la frontera casi duplica las probabilidades de que el contenido se vea.

Above the fold: antes y después

Estudio de 201080 %

Estudio de 201857 %

¿Hasta dónde bajan de verdad los lectores?

Farhad Manjoo publicó los datos de scroll de Chartbeat para Slate el 6 de junio de 2013, y los números han envejecido mejor que la mayoría de las estadísticas web porque describen un comportamiento y no una tecnología.

Comportamiento	Slate	Red de Chartbeat
Llegan y se van sin interactuar	38%	no indicado
No hacen scroll nunca	en torno al 5%	en torno al 10%
El lector mediano llega al	en torno al 50% del artículo	en torno al 60%
Pasan del píxel 1600	25%	no indicado

El planteamiento de Manjoo fue lo memorable: por cada 161 personas que aterrizaban en la página, unas 61 ya se habían ido, y de las 100 que se quedaban, cinco no harían scroll nunca. El hallazgo que enterró es el que debería cambiar comportamientos. Hay una relación muy débil entre la profundidad de scroll y la compartición, así que los artículos que más se tuitean no son los que más se leen a fondo. Quien trate las comparticiones como prueba de que el contenido se consumió está midiendo otra cosa.

De poner los números de NN/g y Chartbeat uno al lado del otro se siguen dos cosas. La mayoría hace scroll, así que esconder todo lo importante en los primeros 600 píxeles es innecesario. Y la atención decae con fuerza, así que el orden de tu contenido importa mucho más que si un elemento dado supera una línea imaginaria. Si quieres saber dónde paran tus propios lectores en vez de dónde paraban los de Slate en 2013, para eso está el seguimiento de la profundidad de scroll.

¿Qué es un suelo falso, y por qué cuesta más que una página larga?

Un suelo falso es el fallo que el pliegue provoca de verdad. Kim Flaherty lo llamó la ilusión de completitud en NN/g el 17 de enero de 2016: "The illusion of completeness happens when the visible content on the screen appears to be complete, when in fact more information exists outside of the viewable area."

En una prueba de usabilidad que describe, seis de ocho participantes no hicieron scroll en absoluto en una página, y el 75% de los participantes se frustró tras introducir datos personales solo para descubrir que el servicio no estaba disponible en su zona, porque nunca se dieron cuenta de que había más contenido abajo. La página no era demasiado larga. Parecía terminada en la frontera.

El arreglo es visual y no estructural. Deja que algo cruce la línea. Un titular cortado por la mitad, una imagen que continúa más allá del borde, una fila de tarjetas donde la cuarta queda recortada: todo eso le dice al ojo que la página no ha terminado. Las secciones de cabecera a pantalla completa con un borde horizontal limpio abajo son la forma más fiable de fabricar un suelo falso.

¿Cómo debería cambiar la variedad de viewports lo que pones arriba?

Deja de diseñar para el pliegue y empieza a diseñar para la primera pantalla de tu tráfico real. Tres movimientos prácticos:

• Mide tu propia distribución de viewports. window.innerHeight al cargar la página, agrupado y reportado, te dice la forma real. Combínalo con visualViewport si te importan el zoom y los teclados en pantalla. Un mapa de calor segmentado por clase de dispositivo enseña lo mismo espacialmente, lo que suele ser más fácil de discutir; nuestra guía para leer un mapa de calor de un sitio web cubre cómo evitar sobreinterpretarlo.
• Usa unidades de viewport que sepan de la barra de direcciones. CSS ofrece svh, lvh y dvh junto a vh precisamente porque el viewport móvil cambia de tamaño durante un scroll. Una cabecera dimensionada a 100vh desborda en el viewport pequeño y deja hueco en el grande.
• Pon la promesa above the fold, no la página entera. La primera pantalla tiene un solo trabajo: que alguien confirme que está en el sitio correcto y vea que hay más. Todo lo demás puede vivir abajo, porque la investigación dice que llegarán.

La velocidad interactúa con todo esto. El contenido que técnicamente está above the fold pero todavía no se ha pintado no está por encima de nada, y por eso Largest Contentful Paint se puntúa sobre el elemento más grande dentro del viewport y no sobre la página entera. Una imagen de cabecera que llega a los cuatro segundos está por debajo del pliegue en todos los sentidos que le importan al visitante. Si estás trabajando sobre una página concreta, nuestro recorrido de cómo analizar una landing page ordena estas comprobaciones.

Preguntas frecuentes

¿Sigue importando el pliegue ahora que todo el mundo hace scroll?

Sí, pero como una ponderación y no como un muro. NN/g midió un 57% del tiempo de visionado above the fold en 2018 y una diferencia del 102% entre los 100 píxeles justo por encima de la frontera y los 100 justo por debajo. La gente lo cruza; no presta la misma atención a los dos lados.

¿Qué altura en píxeles tiene el pliegue?

No hay una. Un diseño responsive tiene tantos pliegues como tamaños de pantalla objetivo, y el chrome del navegador, el zoom, el escalado de pantalla y la barra de direcciones móvil que se colapsa mueven la frontera otra vez en cada dispositivo. Mide a tus propios visitantes en lugar de adoptar un número.

¿Debería la llamada a la acción estar siempre above the fold?

Solo si el visitante tiene información suficiente para actuar a esas alturas. En una página que vende algo conocido, una CTA en la primera pantalla funciona. En una página que tiene que explicar algo primero, una CTA temprana se ignora y la colocación útil es después del argumento. Repetirla suele ser mejor que moverla.

¿Cuánto contenido debería haber en la primera pantalla?

El suficiente para responder a "¿estoy en el sitio correcto?", más una señal visible de que la página continúa. NN/g encontró que más del 65% de la atención above the fold cae en la mitad superior del viewport, así que la mitad superior de la primera pantalla hace la mayor parte del trabajo pongas lo que pongas.

¿Rinden peor las páginas largas que las cortas?

No solo por su longitud. Los datos de Chartbeat mostraban que el lector mediano se detiene alrededor de la mitad de un artículo, lo que penaliza el relleno y no la longitud. Una página larga con el valor por delante rinde mejor que una página corta que parece terminada en el pliegue.

¿De dónde viene el término above the fold?

De los periódicos. Los formatos grandes se doblaban por la mitad para exponerlos, así que solo la mitad superior de la portada era visible para alguien que pasaba por un quiosco, y ahí iba el titular más fuerte. La web tomó prestada la palabra cuando resultó que las pantallas tenían la misma propiedad.

¿Cuánta menos atención recibe el contenido que queda debajo del pliegue?

Nielsen Norman Group encontró que los 100 píxeles justo encima del pliegue recibieron un 102 % más de vistas que los 100 píxeles justo debajo. En todo el conjunto de datos de Schade, la diferencia media de atención entre lo que queda por encima y por debajo del pliegue fue del 84 %. Cruzar esa línea duplica más o menos las probabilidades de que un visitante note algo.

¿Por qué se mueve el pliegue en el móvil en cuanto empiezas a hacer scroll?

La barra de direcciones del navegador móvil se colapsa en cuanto el visitante hace scroll, así que el viewport queda físicamente más alto después del primer gesto que al cargar la página. La misma página tiene un pliegue al abrirse y otro distinto un segundo después, en el mismo teléfono. Es una razón más por la que un solo número en píxeles no puede describir el pliegue.

¿Qué es la ilusión de completitud?

Es el término de Kim Flaherty para una página que parece terminada en el borde de la pantalla aunque debajo haya más contenido. En una prueba de NN/g que ella describe, seis de ocho participantes no hicieron scroll en ningún momento, y el 75 % de los participantes se frustró después de introducir datos personales y descubrir que el servicio no estaba disponible en su zona. La página no había terminado, solo lo parecía.

¿Los shares en redes sociales demuestran que se leyó un artículo?

Según los datos de Chartbeat detrás del artículo de Farhad Manjoo en Slate de 2013, no. La relación entre la profundidad de scroll y los shares fue muy débil, y los artículos más compartidos no fueron los más leídos. El número de shares mide algo distinto de cuánto se leyó realmente.