¿Qué son el “above the fold” y el “below the fold”?

Vaya dos palabrejas para el artículo de hoy, pero sí, es importante que sepas qué son el above the fold y el below the fold si quieres una web que funcione y convierta.

Para entender este concepto hay que irse a la imprenta y visualizar un periódico. “Fold” en inglés significa pliegue, así pues “above the fold” hace referencia a todo aquello que vemos antes del pliegue del periódico y “below the fold” a todo aquello que vemos después del pliegue.

Si tenemos en cuenta que los periódicos se presentan doblados, podemos entender que toda aquella información que queda antes del pliegue (“above the fold”) estará destacada, pues para ver el resto (“below the fold”) hemos de desdoblar el periódico. Una vez más vemos que el marketing 2.0 se nutre del marketing de toda la vida.

ejemplo above the fold

Tamaño del above the fold.

Aunque la metáfora es muy bonita, que manera más densa tiene la comunidad web anglosajona de explicar algo que en palabras del diseñador Alex Martínez Vidal suena mucho más sencillo, al referirse a ello como: los 700 píxels de oro.

Y de eso se trata, de poner todo aquello que importe y que te ayude con el objetivo de tu web en el espacio que podemos visualizar sin la necesidad de utilizar el scroll. Si bien 700 píxels es una buena línea roja a no sobrepasar diseñando, si pueden ser 600 píxels mejor que mejor.

A continuación, te muestro el top 10 de resoluciones de pantallas más utilizadas en enero de 2017 recogido por la W3Counter. En él puedes ver el porcentaje de uso de las distintas resoluciones para que te hagas a la idea de qué parte queda oculta de tus páginas en función de la pantalla.

 

Resolución de pantalla mas usadas enero 17

* Ten presente que los formatos de smarthpone se muestran apaisados pero se usan mucho más en vertical. 640×360 es en realidad 360×640.

Cómo estructurar el contenido entre el above y el below the fold.

Según el reconocido experto en usabilidad web Jakob Nelson: “Los usuarios pasan el 80% del tiempo mirando la información previa al scroll (“Above the fold”) y dedican sólo el 20% de su atención a la parte posterior (“below the fold”).

Esto no significa que pongas toda la información en los primeros 600 pixels de tu página web. Significa que pongas lo realmente importante en ese espacio y que invites al usuario a hacer scroll.

Para conseguir el scroll es importante que el usuario vea que hay más elementos desplazando el scroll, así que debemos encontrar textos e imágenes que queden cortados por la parte baja de la ventana del navegador. De esta manera el usuario debe desplazarse a la parte oculta para continuar viendo la “Historia” que le estas explicando.

También debes mostrar la información de menor a mayor detalle. Puedes utilizar el “above the fold” para presentar un producto (imagen + propuesta de valor + su precio + un botón para comprar) y haciendo scroll el usuario puede leer un texto descriptivo del producto, bajando un poco más se puede presentar contenido más técnico referente al producto.

De esta manera, centramos el objetivo en la compra del producto y mostramos más información del producto en base a la necesidad de información que necesita el cliente, pues habrá quien sólo con lo que ve en el “above the fold” ya está dispuesto a comprar y no queremos despistarlo con más información.

Espero que este artículo te haya sido de ayuda y recuerda que valoro mucho tu opinión así que te invito a dejar un comentario.

 

Artículos relacionados:

 

2 comentarios

Muy clara la explicación. Tenía una idea totalmente equivocada de lo que era “above the fold”. Ha sido la primera entrada que he leído en mi búsqueda y no necesito más. Breve y claro. Muchas gracias

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *