Mejores prácticas para elaborar un scroll largo

Diseño UX
01/2/2017
|
Samuel Gimeno Artigas
Escritorio redondo con laptop, gafas, planta, celular, lápices y unas manos de mujer tecleando.

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.

1
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.

¿Quieres darnos tu impresión sobre este post?

4 respuestas a “Mejores prácticas para elaborar un scroll largo”

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

  2. 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. Hola Samuel, buscando información sobre páginas de venta y scroll largos he dado con tu artículo y me parece de los mejores que he encontrado. Como el artículo es de hace un par de años, me encantaría contar con tu opinión respecto a una duda que tengo.

    Estoy diseñando una página de ventas (muy larga y sin menú en la cabecera). Ahora la mayoría se hacen así par evitar distracciones y seguir un proceso de compra, pero me pregunto hasta qué punto puede afectar en la experiencia de usuario.
    Me explico, para una visita que llega, se siente atraído por el contenido y compra en ese momento, no veo problema con tener un scroll muy largo. Pero, ¿y si la persona visita la página por segunda vez porque quiere hacer una compra más pausada? ¿Y si solo quiere recuperar cierta información para comparar, refrescar o resolver una duda muy concreta? ¿No se traduciría en una mala experiencia de usuario obligarlo a tener que hacer scroll por toda la página para encontrar lo que busca? O incluso, si quiere realizar la compra en otro momento y el botón de compra solo se encuentra al final de la página, ¿no sería negativo obligarle a hacer scroll por toda la página para comprar?

    Una solución que podría ser útil es colocar un botón flotante que te lleve hasta el botón de compra en cualquier momento, pero no he visto otros ejemplos y quería conocer más opiniones.

    Mil gracias de antemano y disculpa por la extensión del comentario.

    Saludos.

Deja una respuesta

Aquí va tu texto personalizado.

Blog

Nos encanta compartir lo que sabemos sobre diseño de producto y experiencia de usuario.
Ver todo el blog
Puedes consultarnos lo que necesites
Envíanos un mensaje
Nombre
Email
Mensaje
Gracias por escribirnos. Nuestro equipo se pondrá en contacto contigo tan pronto como sea posible.
Ha ocurrido un error. Estamos trabajando para resolverlo. Puedes escribirnos al chat.