Mejores prácticas para elaborar un scroll largo

Hoy vamos a escribir un post práctico para el día a día de nuestro trabajo como diseñadores de experiencia de usuario. En la actualidad, los dispositivos móviles han pulverizado el miedo al scroll que había antiguamente, según el cual se creía que tenía que caber toda la web en una pantalla y que no tenía que quedar nada importante “above the fold”, ya que había un mito que decía que la mayoría de los usuarios no hacía scroll vertical en las páginas web.


Imagen de Nick Babich

El scroll horizontal no se debe poder hacer en ningún caso, ya que eso desconcierta a los usuarios y existen herramientas para adaptar la web automáticamente al ancho de pantalla del usuario.

Después diversos tests con usuarios, se demostró que conforme se dejaron de diseñar sitios web que sólo usaban la superficie de la pantalla y a medida que la gente se familiarizaba con la web, ese miedo al scroll se iba perdiendo y, aunque había que poner lo importante donde se veía, no había que restringir todo a la superficie de una pantalla. El “above the fold” es importante, pero no hay que obsesionarse con el.

El scroll largo tiene varias ventajas:

  • Engancha al usuario, ya que podemos ir poniendo la información a trozos e irle proporcionando poco a poco más.
  • Funciona mejor en dispositivos móviles, ya que los usuarios de móvil están habituados a hacer scroll continuo.
  • Simplifica la navegación, ya que el usuario solo tiene que hacer scroll hacia arriba y hacia abajo.
  • Favorece que le contemos al usuario historias que le enganchen poco a poco.

Pautas para hacer un buen scroll largo

Nick Babich ha escrito un post dando algunas pautas con buenas prácticas para hacer buenos scroll largos. En él, Nick da algunas pautas para elaborar un scroll largo de calidad y que ayude a obtener las ventajas que hemos nombrado:

  • Usa pistas visuales: una de las cosas importantes para que los usuarios sepan que tienen que hacer scroll es dándoles pistas visuales que les animen a ello como flechas, contenido cortado o algo similar que le indique al usuario que hay más contenido que el que ve en ese momento.
  • Mantén las opciones de navegación siempre disponibles: tener una sticky bar que acompañe al contenido facilita al usuario la navegación en páginas de scroll largo, al no tener el usuario que hacer scroll hasta arriba de la página. En dispositivos móviles, es una buena idea que la barra aparezca y desaparezca para que no exista un espacio demasiado pequeño para el contenido, que es lo importante.
  • Diseña la pantalla como si fuera una página: una buena manera de diseñar una página de scroll infinito es como si fuera una página impresa en la que conforme vas haciendo scroll, la página cambia y aparece nuevo contenido.
  • Incorpora animación funcional: incorpora animación a la página que funcione conforme el usuario hace scroll para que le sorprenda y le deleite durante la navegación.
  • Usa el efecto Parallax para hacer storytelling: un efecto Parallax es que el fondo de una web (que suele ser una imagen) se mueva a velocidad más lenta que el contenido, y que sirve para hacer storytelling. Si queréis ejemplos para inspiraros y una explicación más visual, este post de 40 de fiebre os ayudará.

Todas estas pautas que nos da Babich nos ayudan a hacer mejores propuestas de diseño para una cosa que puede parecer tan simple y tan sencilla como un scroll, pero que como todo elemento de diseño requiere pensar nuevas maneras formas para adaptarse a las modas y a las novedades de diseño.

En Torresburriel Estudio te podemos ayudar a implementar procesos de mejora continua en tus productos digitales mediante una consultoría de acompañamiento. Contacta con nosotros y cuéntanos tu proyecto. Te enviaremos una propuesta adaptada a tus necesidades y presupuesto.

Comentarios

  1. hay un error. Se confunde al principio del texto scroll vertical y horizontal.

  2. Samuel Gimeno Artigas , 02 de febrero de 2017, 9:51

    Muchas gracias por la corrección, ha sido una confusión del horizonte con horizontal al escribir, ya lo hemos corregido en el post.

  3. […] unos meses escribimos un post sobre el scroll infinito, un elemento de diseño que está de moda en sitios de contenidos porque mantiene al usuario […]

Deja tu comentario

*