scroll-infinito
Tips

Scroll Infinito: ¿Buena o mala práctica de UX?

¿Estás pensando en agregar un scroll infinito para tu sitio web o aplicación? Antes de hacerlo revisa que sea el patrón adecuado para una buena experiencia de usuario.

Hace algún tiempo empecé un debate en Twitter y Facebook acerca de cuándo debemos o no usar el scroll infinito.

El scroll infinito es la técnica que permite al usuario navegar sin hacer click en la paginación. No significa que literalmente cargue contenido “infinito”, sino que permite hacer scroll hasta el final de la página cargando automáticamente nuevo contenido.

Las respuestas fueron múltiples, y todos tenían argumentos válidos. Algunos comentaban que se sentían frustrados de no saber cuándo se iba a terminar el scroll, otros decían que es una forma más rápida de encontrar información al poder escanear los contenidos, y unos cuantos argumentaban que les preocupaba la velocidad de la carga, etc.

Es por eso que en este post te comparto los escenarios de uso, sus posibles ventajas y desventajas con la finalidad de que tú mismo juzgues si debes o no usarlo. Por último, te comparto algunas buenas prácticas para su uso.

 

3 Escenarios de uso para el scroll infinito



Su uso es principalmente cuando los resultados que se arrojan son imágenes, o bloques de contenidos cortos (supongamos algo menor a 200 caracteres).

Seguro pensaste en Facebook, Twitter, Pinterest, Instagram, Google, entre otros, ¿cierto?

Escenario 1. El usuario tiene una vaga idea de su búsqueda

Por ejemplo, si busco una foto de un árbol, pero no estoy seguro que tipo de árbol quiero. El scroll infinito me permite escanear rápidamente los resultados.

1-scroll-infinito-google

Escenario 2. El usuario no está buscando algo en específico, sino que está en la mira de encontrar algo que le guste

El tan conocido Pinterest, donde coleccionas fotos, las organizas en tableros y después ves si te sirven de inspiración, referencia, o para comprar algo 😉

2-scroll-infinito-pinterest


Escenario 3. El usuario quiere estar informado sobre lo que está sucediendo en tiempo real. Los famosos “streamings” de actividades y eventos

Una línea de tiempo de un acontecimiento en tiempo real como el debate presidencial en Estados Unidos.

3-scroll-infinito-debate

Lo bueno y lo malo del scroll infinito


Ventajas

  • Permite al usuario continuar con el flujo de lectura.
  • Es más rápido que navegar con clicks.
  • Es un gesto intuitivo en dispositivos móviles.

Desventajas

  • Puede resultar muy cansado para el usuario, pues no sabe cuándo acabará de hacer scroll. Librerías Gandhi tiene este problema 🙁
  • Regresar a un elemento o contenido (hago click en el detalle de producto y me regreso a la página de resultados y no guarda el scroll donde me quedé) puede llegar a ser frustrante si no se agregan los segmentos correctos en la URL.
  • Es difícil recordar que tanto scroll se debe de hacer para llegar a un resultado previamente visto. Los usuarios de Nike se enfrentan a este problema 🙁
  • Al guardar o compartir el enlace no se mantiene el nivel de scroll hasta dónde el usuario ha llegado, sino que carga desde el principio.

 

Buenas prácticas en el uso de scroll infinito


1. Dar retroalimentación a los usuarios

Cuando el contenido se está cargando, es necesario notificar al usuario de que algo está pasando. De manera sencilla ya sea en forma de texto, o de algún elemento gráfico que indique avance, será claro que el contenido está próximo a aparecer. Además esta práctica se considera la primer heurística de Jakob Nielsen en el post de Qué es: Usabilidad.

4-scroll-infinito-tumblr


2. Permitir al usuario tomar el control

Dale al usuario el control para que decida si desea cargar más contenido o navegar en el footer. Esto es posible mediante el uso de un botón de “cargar más”, “más resultados”, etc. Y puede definirse en el código después de una cierta cantidad de resultados.

5-scroll-infinito-footer

3. Dar la posibilidad de regresar al inicio sin hacer scroll

Agrega un botón, o enlace que permita volver al inicio de la búsqueda, sin necesidad de volver a hacer el scroll hasta el inicio de la página.

6-scroll-infinito-arriba

4. Utilizar un header visible en todo momento

Permite al usuario seleccionar otras opciones importantes para continuar con la búsqueda o establecer parámetros de ésta. Airbnb lo hace bien manteniendo el header disponible en todo momento para justamente permitirle cambiar su búsqueda.

7-scroll-infinito-header


Conclusiones

El uso del scroll infinito debe pensarse cuidadosamente. ¿El usuario necesita encontrar un resultado o llegar a un objetivo específico? Por ejemplo en un eCommerce mi recomendación sería utilizar paginación. ¿El usuario necesita digerir grandes cantidades de contenido? Entonces podría convenir el uso del scroll infinito.

¿Te gustó este post? Suscríbete al newsletter mensual para recibir una vez al mes artículos interesantes como éste.

Deja un comentario

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