Desde los orígenes del diseño de páginas web, la barra de scroll ha sido tema de debate para numerosos foros. Siempre se ha dicho que el usuario no hacía scroll, y que todos los diseños debían de estar en función del primer pantallazo que recibe el usuario, antes con la resolución mayoritaria de 800x600px y ahora con 1024x768px.
Por culpa de esto, se hicieron verdaderas locuras, como comprimir al máximo la información que debía salir en esa primera pantalla, originándose auténticas jaurías de texto e imágenes sin «aire», dando una sensación tremenda de agobio. También hubo quien optó en separar los textos en más páginas, eso significaba que para leer un artículo, el usuario tenía que esperar a que se cargasen páginas y páginas, perdiendo así toda posibilidad de evaluar o descubrir el contenido de lo que estaba leyendo.
Todavía hoy en día nos encontramos con clientes que han escuchado esta «leyenda» en algún sitio y quieren que todo su contenido sea mostrado en un primer pantallazo.
Una vez más hago referencia a la lógica, que tanto en este campo como en todos es al final la que se impone.
Si yo fuese dueño o encargado de una tienda de ropa, procuraría tener un escaparate lo suficientemente atrayente, para que mis clientes entrasen a ver mi tienda. Jamás se me ocurriría colocar toda la ropa tras el cristal, porque entonces, en lugar de hacer creer al cliente que dispongo de buena ropa, le daría la impresión de tener una tienda de saldos.
A la hora de diseñar una web tenemos que tener en cuenta la altura del primer pantallazo. Hoy en día se tiene como plantilla la resolución de 1024x768px y damos como válida una altura de 600 px, aunque esta altura depende mucho de los extras que tenga instalado el usuario en su navegador (barra google, yahoo….). Considerando esto, tenemos que colocar en este «primer pantallazo» lo que más pueda atraer o representar a la web que estamos diseñando, y tener muy en cuenta la línea de corte del diseño. En las siguientes figuras vemos un ejemplo que invita a hacer un scroll y otro que nos hace creer (a pesar de ver que hay recorrido en la barra de scroll) que la página ha terminado.
En la figura 1 al entrar en la web todo está perfectamente colocado y no tenemos sensación de que haya más información debajo de lo que estamos viendo. Sin embargo, en la figura 2 apreciamos perfectamente que ha habido un corte y por si fuera poco nos coloca en dos titulares naranja un texto atrayente que nos invita a seguir leyendo. Es evidente que el porcentaje de usuarios que harán scroll, será mil veces mayor en la web de la figura 2.
Otro de los condicionantes de que cada vez el usuario haga más scroll, ha sido el desarrollo de los nuevos blogs, en los que se ha demostrado varias cosas, primero que no es cierto que el usuario no lea, y segundo que no le importa hacer todo el scroll que sea necesario para seguir viendo buenos contenidos. Esto unido a la útil ruedecita del ratón, hace que muchas de las teorías y leyendas queden totalmente fuera de la realidad.
Yo os aconsejaría que sigáis usando la lógica. Hay que tener muy en cuenta ese primer pantallazo, dejar que el diseño «respire», usar el diseño para que el usuario se fije en una u otra sección y que siga siendo atrayente el seguir haciendo scroll. Una lista inmensa de texto sin ninguna imagen o que no nos deje ver dónde está el final, no invitará mucho a seguir bajando para ver si nos encontramos con algo que nos llame la atención.
ClickTale hizo un estudio sobre 120.000 páginas para estudiar el comportamiento de desplazamiento vertical del usuario. Los resultados de estos test dieron al traste con toda la leyenda de que al usuario no le gusta hacer scroll. Todo depende de que seamos capaces de colocar bien el contenido para que su interés no decaiga y deje de desplazarse.
Otra de las interesantísima conclusiones que sacaron es que los visitantes tienen la misma probabilidad de escanear toda la página, sin importar el tamaño de la página.
Las alturas de visión del usuario son mayoritariamente (como he dicho antes depende de lo que tenga instalado en su navegador) 430px, 600px, 860px que corresponden a las resoluciones de 800×600, 1024×768 y 1280×1024.
Mis recomendaciones:
- Pensar bien en qué queremos mostrar en el primer pantallazo.
- No comprimir la información para así mostrar más contenido. Conseguiremos el efecto contrario, que no se vea nada.
- Dividir la página verticalmente en secciones bien diferenciadas para facilitar al usuario el desplazamiento vertical entre bloques de contenido.
- Cuidar la línea de corte de diseño para animar al usuario a seguir avanzando (ejemplo anterior de las figuras).
- Usar la lógica 😉
Trackbacks/Pingbacks