# Paginación vs. scroll infinito vs. cargar más: cuál elegir y por qué > Paginación, scroll infinito y cargar más resuelven el mismo problema de listas largas de formas distintas. Cómo elegir según la tarea, el footer y el teclado. *Tags: ux, tecnica, listas, navegacion, patron* --- > [!info] Definición Rápida > **Paginación**, **scroll infinito** y **cargar más** son tres formas de mostrar una lista larga. La paginación separa los resultados en páginas, el scroll infinito carga más contenido al llegar al final y cargar más añade un bloque nuevo al pulsar un botón. Cada una cambia cómo la gente explora, vuelve y llega al final de la página. ## ¿Qué es cada patrón? - **Paginación.** Los resultados se reparten en páginas numeradas, cada una con su propia URL. Es el patrón más antiguo y el que da más control sobre dónde está la persona. - **Scroll infinito.** Al llegar al final, se carga contenido nuevo sin que la persona haga nada más. No hay final visible ni números. - **Cargar más.** Un botón al final de la lista añade el siguiente bloque. La página no cambia, pero la persona decide cuándo seguir. Nielsen Norman Group separa estos patrones por la tarea: el scroll infinito funciona cuando las personas quieren recorrer elementos homogéneos, y no es buena elección cuando necesitan buscar, comparar o revisar los primeros resultados ([NN/g, "Infinite Scrolling: When to Use It, When to Avoid It"](https://nngroup.com/articles/infinite-scrolling-tips)). ## ¿Por qué le importa a un diseñador? Porque la elección decide cosas que el mockup no muestra: si la gente puede volver a donde estaba, si puede llegar al footer, si el enlace se puede compartir y si un lector de pantalla entiende lo que pasó. Smashing Magazine recoge la revisión de Baymard de 2016 sobre sitios de comercio electrónico: los participantes percibieron la paginación como lenta y exploraron menos de la lista; el scroll infinito genera mucha exploración pero escaneo superficial, y puede impedir que se llegue al footer; cargar más permite comparar la lista completa porque los productos se acumulan en una sola lista, y mantiene el footer accesible. El mismo artículo señala que más del 90 % de los sitios analizados gestionaba mal el botón Atrás y recomienda `history.pushState()` para corregirlo ([Smashing Magazine, "Infinite Scrolling, Pagination Or Load More Buttons?"](https://smashingmagazine.com/2016/03/pagination-infinite-scrolling-load-more-buttons)). ## Comparativa rápida | Criterio | Paginación | Scroll infinito | Cargar más | |---|---|---|---| | Volver a la misma posición | Fácil con la URL de la página | Difícil; el botón Atrás suele llevar al inicio | Posible con gestión de URL e historial | | Llegar al footer | Sí | No, mientras cargue contenido | Sí | | Compartir una página concreta | Sí | No, salvo que se gestione la URL | Depende de la implementación | | Explorar sin objetivo | Menos | Más | Intermedio | | Comparar o buscar | Mejor | Peor | Intermedio | | Accesibilidad con teclado | Predecible | Compleja | Predecible si el foco se gestiona | Esta tabla es una guía orientativa basada en las fuentes del artículo. No es una regla. Un catálogo de moda con tarjetas visuales y un buscador de vuelos no tienen la misma tarea. ## ¿Qué debe cumplir una buena implementación? Smashing Magazine (2022) propone combinar el scroll infinito con un footer accesible, una separación visual entre elementos nuevos y viejos, una URL que cambie al cargar y un selector de página ([Smashing Magazine, "Infinite Scroll UX Done Right"](https://smashingmagazine.com/2022/03/designing-better-infinite-scroll)). Esos complementos existen porque el patrón puro tiene problemas. En accesibilidad hay tres puntos que revisar: - **Teclado.** Si el contenido nuevo aparece sin control, quien navega con teclado tiene que recorrer enlace por enlace y puede no llegar nunca al footer. Smashing Magazine pide que el footer sea accesible también con teclado. - **Anuncio.** Los lectores de pantalla no siempre se enteran de que hay contenido nuevo. Smashing Magazine pide anunciar los elementos nuevos. - **Foco.** Con cargar más, el foco debería ir al primer elemento nuevo. Con paginación, suele ir al inicio de la página o a un encabezado. Nielsen Norman Group señala el rol ARIA `feed` del W3C para listas que se extienden, porque ayuda a navegar el flujo y permite saltar al siguiente elemento enfocable. Las [pruebas con lectores de pantalla](/es/wiki/tecnicas/pruebas-lectores-pantalla/) son la forma de comprobar que funciona de verdad. ## Ejemplo Ejemplo ilustrativo: una tienda en línea usa scroll infinito en su listado de zapatillas. Al revisar las sesiones, el equipo ve que casi nadie llega al enlace a atención al cliente del footer, y que quienes vuelven desde un producto tienen que buscar otra vez el punto donde estaban. Cambian a cargar más con un botón visible, actualizan la URL en cada carga y dejan el footer accesible. El equipo mide si la gente encuentra un producto concreto más rápido, y si los clics en el footer suben. ## ¿Cuándo NO conviene cada uno? - **Paginación:** cuando la lista es muy homogénea y la gente quiere explorar por impulso. Entonces se siente lenta y fragmentada. - **Scroll infinito:** cuando hay que buscar, comparar, revisar un historial o llegar a un pie con información legal o de contacto. - **Cargar más:** cuando el contenido es muy largo y se espera que el usuario llegue al final con frecuencia. Acumula botones y puede volverse igual de incómodo. Si la lista forma parte de un flujo de compra o de un formulario largo, revisa también el [tiempo de validación de formularios](/es/wiki/tecnicas/timing-validacion-formularios/) y el [[analisis-de-embudos|análisis de embudos]] del paso. ## Errores comunes - Usar scroll infinito en resultados de búsqueda. - No actualizar la URL, así que nadie puede compartir ni volver a una página. - Cargar contenido sin anunciarlo ni mover el foco. - Ocultar el footer detrás de carga continua. - Elegir el patrón por moda y no por la tarea. ## Cómo empezar mañana Abre la lista larga más importante de tu producto y escribe la tarea principal de quien la usa: explorar, buscar o comparar. Revisa si el footer es alcanzable, si la URL cambia y si un usuario de teclado puede volver a su punto. Si alguna respuesta es "no", prueba cargar más con URL actualizada y revisa el resultado con un [[guion-de-test-de-usabilidad|guion de test de usabilidad]] que incluya volver desde un detalle. ## Fuentes - [NN/g: Infinite Scrolling: When to Use It, When to Avoid It](https://nngroup.com/articles/infinite-scrolling-tips) - [Smashing Magazine: Infinite Scrolling, Pagination Or "Load More" Buttons? Usability Findings In eCommerce](https://smashingmagazine.com/2016/03/pagination-infinite-scrolling-load-more-buttons) - [Smashing Magazine: Infinite Scroll UX Done Right: Guidelines and Best Practices](https://smashingmagazine.com/2022/03/designing-better-infinite-scroll) - [Google Search Central: Pagination and incremental page loading](https://developers.google.com/search/docs/specialty/ecommerce/pagination-and-incremental-page-loading) --- Source: https://www.fernandoux.com/es/wiki/tecnicas/paginacion-vs-scroll-infinito/