Noticias

Mejores prácticas para hacer un scroll infinito

scroll infinito

scroll infinitoAntes era inviable la idea de que el contenido de una web no estuviera enmarcado en el espacio que ocupaba la pantalla del ordenador. Hoy en día, gracias a los dispositivos móviles, se ha olvidado el concepto “above the fold” y ahora el scroll crea una experiencia de navegación que resulta totalmente intuitiva y centrada en el usuario.

Para que esta navegación en scroll sea satisfactoria y de calidad, los usuarios deben seguir algunas buenas prácticas. He aquí algunas de ellas, escritas por Nick Babick:

  • Pistas visuales.

Informar al usuario de forma sutil de que el contenido sigue al hacer scroll, mediante la utilización de flechas o incluso animando la flecha con un pequeño bucle de movimiento arriba-abajo o contenido cortado (imagen texto) que informe al usuario de que la información sigue.

  • Mantener las opciones de navegación presentes.

Un sticky bar que te acompañe al scrollear. Uno de los mayores riesgos del scroll es la sensación de desorientación y pérdida del camino que sienten los usuarios. Mantenerlos ubicados mediante un sticky menu o menú pegajoso que te acompañe en todo momento hará que la navegación no sea confusa ni molesta. Es una solución que muchas veces los usuarios no tienen en cuenta, pero ayudará a solventar fugas beneficiando su experiencia.

Si en desktop nos es imposible agregar el sticky bar debido a falta de espacio en la pantalla, se puede considerar la opción Jump-to-page o salto de página. Suele ubicarse en el lateral derecho de la página y funciona como orientación para saber en qué parte de la estructura del site se encuentra el usuario.

En mobile, una buena opción puede ser el sticky menu tapado/destapado. Funciona según movimiento de desplazamiento.

  • Diseña la pantalla como si fueran páginas de un libro.

Una buena opción para mantener un sitio organizado y ayudar a los usuarios a entender es trabajar el contenido de manera lineal, como si de una nueva página de un libro se tratara. Cada sección es una pieza que se conforma según el usuario va haciendo scroll y va apareciendo nuevo contenido. Además, esto se puede reforzar mediante una animación.

  • Animaciones para establecer conexión.

Un diseño de interacción es la base de un sitio de desplazamiento largo. Las animaciones son un recurso que sumerge al usuario en una navegación fluida y cómoda. Permite un añadido creativo y divertido que mantiene y alienta al usuario a querer saber más sobre qué pasará en el site.

Una de las animaciones más utilizadas de desplazamiento es el efecto Parallax que suele constar de una imagen de fondo que se mueve más lentamente que el contenido que está en primer plano, creando una sensación de profundidad e inmersión. Utilizado correctamente puede proporcionar una narrativa visual que mantendrá al usuario inmerso como si de un buen libro se tratara.

Todas estas pautas ayudarán a mejorar tu site, adaptarlo a las modas, a las tendencias de diseño y centrarte en tu objetivo principal: hacer todo más conveniente y fácil para los usuarios.

Haz clic para comentar

Dejar un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

*

Subir