Source: https://es.ryte.com/magazine/above-the-fold-como-disenar-correctamente-tu-sitio-web
Timestamp: 2020-07-12 02:31:09+00:00

Document:
Above the Fold <br/> Cómo diseñar correctamente tu 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.
Concepto “Above the Fold”
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:
¿Cuánta importancia tiene realmente la zona “Above the Fold”?
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.
No acumules información innecesaria
Presenta las ventajas de tu sitio web
Crea interés sobre tu contenido
¿Cómo diseñar la zona “Above the Fold” para cada resolución de pantalla?
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:
Abre Google Analytics
Selecciona „Audiencia“, “Tecnología” y “Navegador y SO”
Encontrarás la información bajo “Resolución de Pantalla”
Visualizar la página en base a la resolución de pantalla
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.
Instala el add-on
Si haces clic en el icono que aparece en la esquina superior derecha de tu navegador, podrás seleccionar la resolución de pantalla que te gustaría comprobar.
Ahora selecciona una resolución y verifica lo que los usuarios verían en ese caso.
Diseño de la parte inferior: “Below the Fold”
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.
3 Formas para conseguirlo
1. Columnas escalonadas
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.
2. Crea rutas a través del sitio
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.
3. Ofrece instrucciones
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!
La zona “Above the Fold” tiene un papel protagonista en los sitios web. Antes se abusaba de su importancia amontonando información para sacar beneficios. HOY: lo que se pretende es llamar la atención del usuario.
Debido a las diferentes resoluciones de pantalla disponibles en la actualidad, desplazarse con el ratón es mucho más común entre los usuarios. Con efectos visuales los usuarios pueden ver inmediatamente que hay mucho por descubrir más abajo.
Analiza el comportamiento de tus usuarios y descubre cuál es la resolución de pantalla que prefieren. De esta forma podrás asegurarte de que tus usuarios visualizan la información más importante en la zona “Above the Fold”.
Escrito el 25.10.2015 por Alicia Gramage.

References: resolución 
 resolución 
 resolución 
 resolución 
 resolución 
 resolución 
 resolución