Saltar navegación
Contacto: (+34) 670 230 483

Usted está en: Inicio > Blog > El pliegue de página y tácticas de continuidad

El pliegue de página y tácticas de continuidad

Escrito por Dani Armengol Garreta el 25 Ene 2012

El “pliegue” de página (quizás más conocido por el inglés “fold”) es un concepto que proviene del mundo de la prensa y se refiere a la zona por la que se doblan los periódicos, especialmente al exponerse en kioscos, provocando que únicamente la mitad superior sea visible.

Varios periódicos doblados en un expositor. Sólo se ve la mitad superior de cada uno de ellos.

Este es el motivo por el cual lo que se quiere destacar editorialmente (o la publicidad más cotizada) se coloca en esa zona superior, mucho más vista por los lectores que la inferior.

Hace años que el concepto de “pliegue” se trasladó a los sitios web, refiriéndose en este contexto a la zona de la pantalla en la que el contenido deja de ser visible y debemos hacer scroll.

El experto en usabilidad Jakob Nielsen observó en sus primeros estudios con usuarios, allá por el año 1994, que el scroll apenas se usaba y advirtió a los diseñadores web que si querían que algo se viera debía estar por encima del pliegue virtual.

Este principio caló muy hondo y aunque sólo tres años después el mismo Nielsen lo diera por obsoleto, sigue siendo uno de los grandes “mitos” de la usabilidad junto a la famosa regla de los tres clics. Lo que está por encima del pliegue sigue siendo más visto, pero los usuarios sí hacen scroll, como hemos observado en tests con usuarios o como demuestran estudios cuantitativos como los de Clicktale.

¿Pero cuándo hacen scroll? ¿Podemos incentivar ese scroll?

Uno de los mejores recursos para indicar a los usuarios que pueden hacer scroll son las líneas verticales. Veamos un ejemplo.

En el sitio web de la imagen siguiente el texto está incompleto, pero unas líneas verticales contribuyen a explicar visualmente que la página tiene continuidad, que hay más información haciendo scroll:

Un navegador muestra una página web en el que aparece un texto. El texto parece estar enmarcado en una caja, pero el borde inferior no se ve. Las líneas verticales de la caja quedan cortadas.

Si se eliminan las líneas se pierde el efecto y probablemente muchos usuarios podrían no hacer scroll. Comparad la siguiente imagen con el ejemplo anterior:

Como el ejemplo 1 pero con el texto sin enmarcar.

También debemos tener en cuenta que, pese a la impredecibilidad de dónde va a tener el usuario el pliegue (pues va a depender de su resolución de pantalla y su navegador), es importante no abusar de los espacios en blanco verticales. El espacio debe ser suficiente, sí, pero no excesivo. Esto nos permite aumentar las probabilidades de que, por ejemplo, el texto quede cortado, contribuyendo aún más a indicar que se puede hacer scroll.

Como el ejemplo 1 con el texto parcialmente cortado.

Este recurso, quizás evidente, pero que en muchas ocasiones olvidamos, es útil en cualquier tipo de interfaz, pero resulta prácticamente imprescindible en aquellas en las que no se acostumbra a mostrar barras de desplazamiento, como en muchos navegadores y sistemas operativos para móviles.

Por ejemplo, la aparentemente demasiado explícita agrupación de elementos que hace iOS en sus pantallas de configuración, permite explicar al usuario que debajo de la opción “General” hay más opciones. Sólo con el diseño visual entendemos inmediatamente que ese grupo no ha acabado: las líneas verticales de ambos lados están cortadas y, además, se entrevé el icono de la opción siguiente.

En un iPhone aparecen varias opciones listadas verticalmente agrupadas en cajas. Dos cajas terminan, con un borde redondeado, pero la última queda cortada.

De hecho algunos sistemas operativos para móviles basan mucha de su navegación en el scroll. Es el caso de Windows Phone, que utiliza interfaces tipo “panorama”, por las que nos podemos desplazar horizontalmente.

Para facilitar al usuario la comprensión de este paradigma, Microsoft juega con textos grandes que prácticamente siempre van a aparecer cortados, sugiriendo así que es posible hacer scroll horizontal.

En un móvil aparece un fragmento de una interfaz. A ambos lados se muestra lo que se vería si el usuario se desplaza.  El texto y algunas imágenes aparecen cortadas a izquierda y derecha de la parte visible.

Esto no quita que, como en los periódicos, si quieres destacar algo, lo sitúes en la parte superior de la página.




Últimos tweets de Usolab

  • Ups, parece que ahora mismo no podemos mostrar nuestros tweets.

Proyectos propios

Bankimia

Bankimia es un comparador de productos financieros.

Actualmente ofrece información sobre hipotecas, depósitos bancarios, cuentas y préstamos de 42 bancos y cajas.