No tienes acceso a esta clase

¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera

Scroll infinito vs. paginación

9/20
Recursos

¿Cómo optimizar sitios web con carga de contenido inteligente?

La optimización de un sitio web va más allá de simplemente lograr que cargue rápidamente en el navegador. Como desarrolladores front-end, tenemos la responsabilidad de ofrecer una experiencia de usuario fluida, garantizando que la carga de información sea inteligente y evitando solicitudes innecesarias. Esta clase se enfoca en explorar dos estrategias claves para cargar contenido adicional cuando hay más información de la que cabe en la vista inicial: paginación y scroll infinito. ¿Cuál es la mejor opción para tu aplicación? ¡Descúbrelo a continuación!

¿Qué es la paginación y cómo funciona?

La paginación es una estrategia de carga de contenidos en la que los resultados se organizan en páginas distintas, permitiendo que el usuario navegue entre ellas mediante botones. Cada página tiene una cantidad fija de elementos y una URL diferente:

  • Beneficios:

    • Proporciona control sobre el contenido, facilitando al usuario encontrar resultados específicos.
    • Permite estimar la cantidad de resultados al mostrar el total de páginas desde el principio.
    • Adecuada para sitios de e-commerce o aplicaciones donde la precisión en la búsqueda es crucial.
  • Desventajas:

    • No fomenta la adicción, ya que los usuarios suelen buscar algo específico y no lo revisan todo.
    • Menos adecuado para aplicaciones que buscan mantener al usuario enganchado por más tiempo.

¿Qué es el scroll infinito y cómo se implementa?

El scroll infinito carga contenido extra conforme el usuario llega al final de la página. A medida que se hace scroll, nuevos elementos se muestran sin cambiar de URL, creando una sensación continua de descubrimiento:

  • Ventajas:

    • Fomentar la adicción. Ideal para redes sociales donde el usuario puede seguir explorando contenido sin fin.
    • Excelente para captar la atención inicial del usuario y mantenerla.
  • Inconvenientes:

    • Dificultad en ubicar contenido específico, ya que no hay una estructura fija de páginas a las cuales regresar.
    • Problemas de usabilidad si el usuario recarga la página y pierde el hilo de donde estaba.
    • Complica la identificación del número total de elementos disponibles.

¿Cómo decidimos cuál estrategia utilizar?

La elección entre paginación y scroll infinito depende mucho del propósito y la naturaleza de tu aplicación web:

  • Usa paginación si:

    • Desarrollas un e-commerce u otra plataforma que favorece el control y la búsqueda precisa.
    • Deseas ofrecer una sensación de certeza sobre la cantidad de resultados disponibles.
  • Utiliza scroll infinito si:

    • Buscas maximizar la adicción y mantener a los usuarios explorando por largos períodos.
    • Trabajas en redes sociales u otras plataformas basadas en contenido masivo y cambiante.

¿Cómo consumir APIs según cada estrategia?

Las APIs bien diseñadas soportan paginación, no scroll infinito. Sin embargo, podemos utilizar los endpoints de paginación para implementar scroll infinito:

  • Para paginación:
    • Hacemos solicitudes para páginas específicas, solicitando un número fijo de resultados por página.
fetch('https://api.example.com/data?page=1&limit=15')
  .then(response => response.json())
  .then(data => console.log(data));
  • Para scroll infinito:
    • Iniciamos con la carga inicial de una página y progresivamente solicitamos más al hacer scroll.
    • Mantenemos un control de la página actual y aumentamos el contador conforme se hace scroll.
window.addEventListener('scroll', () => {
  if(window.innerHeight + window.scrollY >= document.body.offsetHeight) {
    pageNumber++;
    fetch(`https://api.example.com/data?page=${pageNumber}&limit=15`)
      .then(response => response.json())
      .then(data => appendToPage(data));
  }
});

Reflexión y recomendaciones finales

La elección entre paginación y scroll infinito deberá alinearse con los objetivos de tu aplicación y el comportamiento que deseas fomentar en tus usuarios. Mientras que una fomenta el control y precisión, la otra prioriza la adicción y el descubrimiento continuo. Considera cuál es más adecuada para tu aplicación y experimenta para encontrar el equilibrio perfecto. ¡Sigue aprendiendo y mejorando cada día para crear una experiencia de usuario insuperable!

Aportes 23

Preguntas 3

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad?

Yo considero que en el caso de Platzi movies lo mejor es el scroll infinito, porque a final de cuenta me parece que las películas van a tener un orden y si algún usuario quiere encontrar algo, puede recordar “más o menos” el orden donde estaba. Además el hecho que es importante hacerlo adictivo, para el usuario es una joya hacer scroll e interactuar con las páginas.

Pero ojo, lo que considero más importante es TESTEAR siempre. ¿Por qué no hacer una versión A y una B de la aplicación? Y después con DATOS te das cuenta de qué es lo que más hacen tus usuarios.

Como frontend es lo que más nos interesa, que los usuarios estén felices con la aplicación y la utilicen, todo lo demás sobra.

¡A darle caña al curso!

Yo generalmente uso scroll infinito en version mobile y tabla con paginacion para desktop. Solo cargo una dinamicamente basandome en el width del viewport.

Para una app como esta, me parece mejor scroll infinito (tanto en mobile como desktop). Netflix usa scroll infinito, ¡y es Netflix! 😉. Si ellos con todo su equipo de ingeniería decidieron que era la mejor opción, ¿quien soy yo para decir lo contrario? 😂

Reto del día: encontrar el footer de una red social xd

Otra desventaja del scroll infinito, es que, se tiene que cuidar mucho la optimización y el rendimiento, porque si no, al cargar muchos elementos, la página se hace cada vez más lenta.
Pero en este caso, creo que el scroll infinito es la mejor opción.

Hola. a todos! Yo creo que en Platzi Movies un scroll infinito seria una buena opción Ya que como dice JuanDC queremos que se vuelvan adictos a nuestra app y ademas el hecho de que recomiende mas y mas peliculas genera como mas opciones para el usuario. La paginación puede ser aburrida en una app como esta porque en mi experiencia volver a la pagina anterior a veces se torna lento y si no recuerdo bien en que pagina estaba la pelicula que queria, toca volver a ver pagina por pagina. y cuando esto me pasa usualmente me aburro y me salgo de la aplicacion. Gracias Juan por esta clase tan genial!

Está increíble la metodología que aplica juan en sus cursos, que se toma una clase entera para explicar de forma detallada y dinámica los conceptos teóricos, eso es importante porque nos sirve para darnos un mayor contexto de lo que vamos a ver y hacer.
Por otro lado, sip quedaría mejor un scroll infinito en nuestra app, pero por el tipo de aplicación que es, no he visto muchas plataformas de streaming con paginación

Para mi que paginacion, porque la mayoria de aplicaciones que he visto tienen esa tematica. el scroll infinito lo veo orientado mas a una tienda o pagina que vendan productos!

Considero que el scroll infinito en este caso podría ser agobiante para el usuario, ya que están decidiendo qué película de varias horas de duración verán y por ende tiene cierta “importancia” puesto que invertirán tiempo en la actividad. En cambio, en aplicaciones donde te entretienes solo leyendo lo que va apareciendo en pantalla, sí convendría un scroll infinito.

Yo creo que en el caso de las apps o páginas de películas o vídeos lo mejor es el scroll infinito, ya que si la persona está buscando dentro de una categoría es porque no sabe que quiere ver y es mejor darle muchas opciones sin tener que estar cambiando de página. Aunque también habría que considerar el resto de la navegación, como filtros o ver después. Puesto que, este último, se complementa muy bien con el scroll infinito cuando el usuario no quiere perder cierto contenido y seguir navegando.

creo que en mobile podríamos hacer una paginación, pero en desktop scroll infinito, es más lo voy a hacer así

Yo considero que cuando se muestran resultados persistentes ordenados, es mejor la paginacion. Cuando es informacion aleatoria y no organizada el scroll infinito es mejor y mas adictivo. En este caso usaria paginacion, porque los resultados casi siempre tienen el mismo orden. Entonces puedes ir a una pagina especifica y encontrar la misma pelicula.

Para este caso pienso que es mejor el scroll infinito, debido a que es mas fluido al momento de ver el contenido, sobre todo en mobile. Otra opcion es que en la version desktop sea paginacion y en mobile scroll infinito.

Pero me quedo por los momentos con que toda la app tenga el mismo tipo de paginacion.

Después de ver la clase y revisar un post sobre el tema, el infinite scrolling es mejor opción para implementar en nuestra app de películas. Esto debido a que queremos que nuestra aplicación sea adictiva, además que lo que el usuario va a hacer entra en la categoría de “exploración y descubrimiento”, en vez de un objetivo concreto como sucede con las e-commerce.
.
Sin embargo, aunque pueda ser beneficioso en nuestra app, contamos con paginación apenas entramos, porque podemos decidir el rumbo a tomar, bien ver los detalles de la película que escojamos en ese momento dentro de las populares, las categorías, buscar una película en particular o ver las populares en general, ahí tenemos sensación de cotrol sobre nuestra navegación en la app.
.
Ñapa: aquí te dejo unos pros y contras del infinite scrolling y la paginación:

  • Infinite scrolling:

    • Pros:

      • User-engagement y descubrimiento de conteido
      • Scrollear es mejor que clickear; clickear implica sentido de direccionalidad por parte del usuario, por ende más “esfuerzo”
      • Scrollear es mejor para dispositivos móviles.
        .
        .
    • Cons:

      • Performance de la página y recursos del dispositivo; si el dispositivo es relativamente viejo y la página cuenta con mucho contenido, esto afecta el performance y con ello aumenta el churn-rate (tasa de usuarios que llegan a la página y en poco tiempo la abandonan)
      • Búsqueda de ítems y localización; al ser infinite-scrolling se complica la búsqueda de contenido, ya que el usuario debe volver a hacer scroll hasta que llega al contenido que desea
      • Scroll-bar irrelevante; se supone que la scroll-bar debe indicarnos cuándo se finaliza el display de contenido, sin embargo con infinite-scrolling no tiene sentido este componente, ya que siempre se regresará a un menor tamaño cuando lleguemos al punto de nueva carga de contenido.
      • Falta de footer; con infinite-scrolling nunca logramos llegar al footer.

      Una forma de resolver este problema es en poner un botón de “cargar más”, haciendo que el usuario sea quien decida si quiere ver más contenido o no.
      .
      .
      .

  • Paginación

    • Pros:
      • Sensación de control, la acción de llegar a una página con contenido finito, brinda una sensación de finalización, con lo cual el usuario se siente bajo control del contenido que está buscando
      • Mayor tasa de conversión; las páginas que tienen paginación como método de navegación han conseguido mayores tasas de conversión a la hora de cumplir sus objetivos, sea la venta de suscripciones, articulos entre otros, porque es una forma de proceder más apta para páginas “goal-oriented”, es decir, ingresar a la página conduce a un objetivo.
      • Localización del item; al estar paginado, el usuario puede crear una “imagen mental” de lo que desea buscar
        .
        .
    • Cons:
      • Acciones adicionales; el usuario debe tomar acciones adicionales al navegar por la página, es decir, encontrar el botón de next, saber como retroceder, etc. Esto implica que si el usuario no consigue con suficiente rapidez lo que está buscando y el contenido tarda en cargar por el peso de los recursos solicitados, pueda abandonar el sitio.

Yo considero que se pueden usar ambos metodos dependiente de la cantidad de elementos que esperamos que se carguen.
Por ejm en la seccion de trendings o peliculas relacionadas, supongo que los resultados no seran tantos, por lo que, lo horia con scroll infinito, pero por el contrario, en la lista de peliculas por genero, en la cual espero muchos mas resultados, lo haria con paginacion.

En mi humilde opinión, aquí no importa si la app es en desktop o mobile, sino el objetivo de la aplicación. Por ejemplo en un e-commerce es mejor paginación para poder recordar contenido específico para asegurar una compra. Pero para entretenimiento como películas o como la PlayStore es mejor usar scroll infinito.

Yo considero que en cuanto a resultados siempre debería ser scroll infinito, porque es mejor ofrecer el “resultado” a simple vista ya que al igual que la carga de una página web, el usuario es más factible que se canse de estar haciendo clic para ir a otra página (ya que eso lleva más tiempo).

El usuario promedio prefiere estar scrolleando que haciendo clic.

Posible solución para Platzi Movies.

La paginación tiene mucha mas aplicación en sitos web cooporativos por ejemplo un CRM o ERP ya que estos necesitan que los datos esten bastante estructurados tanto el backend y para la vista de los usarios.

Por ejemplo si en la sección de peliculas remendadas se implementara un tipo de paginación la aplicación perderia estetica visual al estar con muchos botones dependiendo la cantidad de paginas.

En este caso y la manera en la que se estructuro la aplicación queda mucho mejor el uso de un scroll infinito ya que aportara una navegacion mucho mas fluida y cómoda para la vista de los usuario.

teniendo en cuenta que la pagina se actualiza día con día
seria mas difícil encontrar contenido especifico y eso le saca puntos a la paginación

Agregaría “Intersection Observer” para un Scroll Infinito. Al igual que lo comentado…usaría Infinito en Mobile ePaginación para escritorio.

Considero que el infinite scroll es mejor para la parte de peliculas ya que no buscas X película sino una pelicula que no has visto para visualizarla ya que si la encontraste en la pagina 20 la guardas la miras y ya no quieres ese resultado en especifico sino otros nuevos

Considero que, podría estar mejor el uso de la paginación en categorías y la parte de Trend usar el scroll infinito. ¿Por qué?, si queremos tener más activos a los users puede ser una gran oportunidad para engancharlos, mientras que categorías, estaría bien algo que llame la atención y pueda atender lo necesario.

En este caso para mi lo mejor es el scroll infinito. Ahora… para la parte de peliculas en tendencia no se si sería lo mejor porque dudo que tenga sentido que existan cientos de películas en esta sección.