El término “Above the Fold” describe la zona del sitio web que es visible a primera vista, sin tener que desplazarse con el ratón. Es la zona en la que, generalmente, encontramos los elementos más importantes del sitio web.
Lo que antes era común, amontonar todo aquello que genera beneficios en la parte visible de la página, ahora ya no tiene sentido. ¿Por qué? Con el uso de los smartphones y tablets, las costumbres y gustos de los usuarios han cambiado. Ahora los usuarios están acostumbrados a desplazarse más con el ratón y cambian de página fácilmente. Por este motivo, ahora es cuando todos tenemos que replantearnos el diseño de nuestro sitio web. Pero, ¿qué papel tiene ahora la zona “Above the Fold”?
Respuesta: la zona “above the fold” todavía sigue siendo muy importante. Por eso, deberías evitar poner demasiada información en esta parte de la página para así poder ofrecer al usuario información relevante que llame su atención y le incite a continuar navegando.
El término “above the fold” proviene de la imprenta debido a que los periódicos suelen distribuirse doblados por la mitad, y los usuarios se han acostumbrado a leerlos de este modo. De esta forma, lo que los usuarios visualizan a primera vista son los títulos de las páginas. La zona por la que se dobla el periódico se denomina “fold”. Los editores de los periódicos utilizan la zona superior al “fold” para publicar los artículos más interesantes, con imágenes y títulos que atraigan la atención.
En los sitios web, la sección “above the fold” es por lo tanto la zona que los usuarios visualizan primero al entrar en un sitio web, sin desplazarse con el ratón. Si tomamos como medida estándar una resolución de 1366x768 píxeles, lo que denominamos “above the fold” es la zona marcada en rojo en la imagen siguiente:
A finales del año 2013, Peep Laja dio una conferencia en la SearchLove de Londres sobre los puntos básicos de un diseño web convincente. Una de las cosas que mencionó es que la zona de “above the fold” sigue recibiendo aproximadamente el 80% de la atención de los usuarios. Lo que nos demuestra que quizás las cosas no han cambiado tanto, a pesar de que los usuarios se desplazan más con el ratón que hace unos años.
Es decir, si quieres atraer la atención del usuario, esta sigue siendo la parte en la que deberías centrar tus estrategias, ya que está demostrado que es la parte más importante del sitio web.
De todos modos, ciertas cosas verdaderamente han cambiado… En la actualidad, los usuarios tienen menos paciencia que hace unos años. Esto se debe, mayormente, a la gran diversidad de contenidos, de calidad, al que pueden acceder fácilmente. Por este motivo, ahora esta zona tiene incluso más importancia que hace unos años.
Debido al gran número de dispositivos disponibles hoy en día en el mercado, con dimensiones y características diferentes, la zona de “above the fold” resulta mucho más difícil de optimizar. Es decir, la línea “fold” aparece en posiciones diferentes dependiendo del dispositivo utilizado (E.g. resolución de pantalla, etc.).
¿Cómo deberías hacer el diseño para que esta zona sea visible en todos los dispositivos? No existe una solución universal, desafortunadamente. Te recomiendo que el contenido más importante de tu sitio web tenga fácil acceso y que se adapte a las necesidades de la mayor parte de tus usuarios.
Si quieres ver cuáles son las resoluciones de pantalla que tus usuarios prefieren, sigue estos pasos:
Para identificar la zona “above the fold” en las diferentes resoluciones de pantalla, os recomiendo que utilicéis el siguiente add-on en vuestro navegador: “Window Resizer” de Google Chrome.
Ahora sabemos que la zona “above the fold” tiene muchísima importancia y es donde debemos captar la atención de nuestros usuarios. Pero, ¿qué pasa con el resto de la página? Un estudio llevado a cabo por Clicktale demuestra lo siguiente: si el sitio web tiene una barra ---(If a website has a scroll bar, it will be used by 76% of website visitors - at least up to a certain point. 22% even scroll to the bottom of the page. So the space above the fold still gets most of the attention but users also scroll as proven byusability expert, Jacob Nielsen.)--- Diseña tu sitio web de forma que tus usuarios quieran seguir navegando en tu página.
De esta forma el contenido se divide entre columnas diferentes, para que el usuario vea inmediatamente todo lo que ofrece el sitio web. Debido a que el contenido aparecerá entrecortado por el “fold”, los usuarios tenderán a desplazarse hacia abajo para continuar leyendo.
Este diseño suele utilizarse en periódicos Online.
También puedes animar a tus usuarios a que se desplacen con el ratón integrando rutas de navegación. En este caso, debido a que la información está cortada por el “fold”, los usuarios tienden a desplazarse para continuar la ruta.
Si lo prefieres, también puedes llamar la atención de tus usuarios diciéndoles directamente que al final de la página les espera mucha más información. ¡Sin miedo!
Escrito el 25.10.2015 por Alicia Gramage.
Alicia es una trotamundos por naturaleza. Le encanta viajar y empaparse de nuevas culturas mientras disfruta de la gastronomía local. Apasionada de los idiomas y de la comunicación, Alicia decidió emprender una nueva aventura y se mudó a Alemania. Ahora forma parte de Ryte y se encarga del Marketing para España.