Este artículo busca que aprendas lo que quiere decir la expresión above the fold y de que manera puede afectar a tu sitio web.

¿Qué es above the fold?

El concepto above the fold está inspirado en los periódicos impresos. Es el contenido que aparece en la mitad superior de la primera página. Debido a que estaban impresos en grandes hojas de papel, se tenían que doblar cuando llegaban a exhibirse en los quioscos.

Los titulares y las historias principales que aparecían en la portada del periódico, al ser la parte más visible, se usaba para atraer la atención de los transeúntes y convencerlos de adquirir una pieza.

Algo similar sucede con los sitios web, al ser lo primero que ve el usuario sin hacer scroll, muchas personas empezaron a cargar la sección con banners y publicidad excesiva que provocaba serios problemas en la usabilidad y experiencia de usuario.

Esto provoco que Google actualizara su algoritmo. La actualización fue introducida a nivel global el 19 de enero de 2012, tiene por nombre Page Layout Algorithm Update (Ads Above the fold) y tiene por objetivo mejorar la calidad de los resultados.

A partir de ese momento Google empezó a prestar más atención a la relación entre contenido y anuncios (ads, publicidad y/o banners) que tienen una visibilidad más directa (Above the fold) de un sitio web.

Con esta actualización, la experiencia de usuario gana relevancia y tiene más peso como factor de posicionamiento.

¿Por qué es importante?

El diseño y la ubicación del contenido es importante, ya que es lo primero que ve el usuario al cargar la página; Hay que darles una buena impresión. Por esto debes incluir en la mitad superior de la página la información más importante y si es por razones de conversión, un llamado a la acción. Recuerda que es la parte que recibe la mayor parte de la atención de los usuarios.

Con esto no quiero decir que no incluyas publicidad en la mitad superior de la página. Lo que quiero decir es que no satures esa zona con publicidad, busca un equilibrio con el contenido, para que incluyas información relevante.

Por el contrario si no tienes mucho contenido visual en esta sección, no es una experiencia de usuario óptima, por lo que este tipo de sitios no suelen posicionar del todo bien.

Un estudio reciente de Google mostró que los anuncios que aparecen en la mitad superior de la página tenían una visibilidad del 73%, mientras que los que estaban debajo tenían solo el 44%. Pero esto debe sopesarse con el hecho de que el contenido que atrae al espectador reduce esa brecha considerablemente, y los anuncios pueden ser un obstáculo para eso. Como siempre en este tema, el contexto y el equilibrio son clave.

¿Cómo se mide la mitad superior del pliegue?

Es imposible definir un tamaño de pliegue para un sitio web. Debido a la gran variedad de tamaños de monitores (computadoras de escritorio y laptops), resoluciones de pantalla, smartphones y tablets.

La mayoría de los diseñadores web están de acuerdo en que la línea de pliegue tiene aproximadamente 1000 píxeles de ancho y 600 píxeles de alto.

La combinación de monitor / navegador más común es de: 1024×786 píxeles, con la ventana del navegador maximizada y sin barras de herramientas instaladas en la parte superior.

Google Analytics tiene un apartado donde te muestra las dimensiones de pantalla más comunes, así como el sistema operativo y el dispositivo que usaron.

Cómo afecta a los dispositivos móviles

El uso cada vez mayor de dispositivos móviles para la navegación web complica aún más el concepto de optimizar el diseño web para la parte superior de la página.

Los dispositivos móviles ofrecen una gran variedad de tamaños de pantalla, por lo que, a diferencia de una computadora de escritorio, la línea de plegado es un concepto mucho menos predecible.

Con tanta gente accediendo a páginas web a través de una gran variedad de dispositivos, las prácticas actuales de diseño web implican el uso de diseño responsive: hacer uso de diseños flexibles.

En el diseño responsive no hay estructuras fijas para una página, el contenido se adapta a cualquier tamaño de pantalla. Las páginas se adaptan al entorno en el que se consume o navega, en este caso el navegador web.

Si bien el contenido importante aún debe estar más arriba en la página, hoy en día, las páginas deben diseñarse para alentar al usuario a hacer scroll para que no se pierdan contenido importante.

Hay un estudio realizado por Huge, sobre el scroll. En el cual prueban cuatro diseños diferentes:

1. Una imagen, sin señales visuales para desplazarse por debajo del pliegue (below the fold).

Resultado:

• 91% hicieron scroll
• 91% hicieron scroll inmediatamente
• 91% llego al final de la página

2. Una flecha de desplazamiento que indica a los usuarios que se desplacen hacia abajo.

Resultado:

• 100% hicieron scroll
• 92% hicieron scroll inmediatamente
• 92% llego al final de la página

3. Una imagen corta que deja ver una parte del contenido.

Resultado:

• 100% hicieron scroll
• 92% hicieron scroll inmediatamente
• 92% llego al final de la página

4. Una imagen animada con un elemento en movimiento para llevar a los usuarios por debajo de la página.

Resultado:

• 91% hicieron scroll
• 91% hicieron scroll inmediatamente
• 73% llego al final de la página

Como podrás observar, todos los que participaron en la prueba hicieron scroll sin importar qué. Para poder determinar que tanta información es la que hay que poner al principio. Siempre es recomendable que analices el contexto, así como el mercado y el negocio en específico, los resultados pueden variar dependiendo del caso.

Recuerda procurar un balance entre el contenido y la publicidad, y debido a que los usuarios suelen hacer scroll, tienes la posibilidad de hacer una estructura más elaborada y no saturar la mitad superior de la página con contenido.