Muchos sitios web, especialmente los e-Commerce, implementan alternativas a los controles de paginación tradicionales, optando por patrones de diseño que reducen la interacción del usuario. Revisemos las opciones de paginación que puedes implementar en tu próximo proyecto.

Paginación tradicional

La paginación tradicional consiste en dividir una lista de elementos en varias páginas, cada una de las cuales contiene un número fijo de elementos. Para ver más opciones, los usuarios deben navegar a la página siguiente, normalmente haciendo clic o tocando el  botón Siguiente  en la parte superior o inferior de la pantalla. Cada página está numerada y los usuarios pueden pasar a páginas de números específicos seleccionando sus botones correspondientes.

En la parte inferior de la página de listado de Amazon, aparece una fila de botones: una flecha hacia la izquierda, una serie de botones numéricos y luego una flecha hacia la derecha.

Los grandes e-Commerce como Amazon deberían ceñirse a los controles de paginación tradicionales, ya que ofrecen un control preciso a medida que los compradores exploran sus enormes conjuntos de productos. Además, los sitios con pocos productos o un buen rendimiento de carga pueden simplemente cargar todos los productos a la vez en la página.

Sin embargo, si tu sitio tiene una selección de productos de tamaño pequeño o mediano, puedes considerar  la carga infinita  o  los botones  "Ver más"  como una alternativa a los controles de paginación tradicionales.

Carga diferida o Infinite scroll

Algunos sitios de e-Commerce presentan una sola página de listado de productos y a medida que los usuarios se desplazan hacia abajo en la página se van cargando más artículos.  La carga diferida puede funcionar bien para los sitios de comercio electrónico que tienen:

  • Una cantidad relativamente pequeña de productos (normalmente menos de 40 por página)
  • Buenos filtros para ayudar a los usuarios a reducir los resultados
  • Un recuento claro del número de artículos devueltos ("42 artículos")

Si bien esta solución puede funcionar bien para sitios con categorías que contienen una cantidad limitada de productos, se debe evitar la carga diferida para sitios web con grandes inventarios por dos razones:

  • Es posible que los usuarios no puedan acceder a información importante en la  navegación del pie de página.
  • Las personas pueden desorientarse y no entender qué tan lejos están en la lista de productos cuando la página incluye  una gran cantidad de productos.

Botones “Ver más”

En lugar de la paginación tradicional o la carga diferida, algunos sitios web de e-Commerce prefieren añadir botones “Mostrar más” / “Ver más” / “Carga más” / “Ver más productos” en la parte inferior del listado de productos.  Por ejemplo, el e-Commerce de ropa de moda Aritzia utiliza este patrón.

Un pequeño botón rectangular en la parte inferior de la página de una lista dice Mostrar más

Este enfoque tiene sentido lógico en comparación con la paginación tradicional, porque la gran mayoría de las personas se mueven linealmente a través de las listas de productos de todos modos. Además, un  botón “Ver más”  grande es más fácil de hacer clic o tocar que los pequeños iconos de intercalación o los números de página.

La diferencia esencial entre este enfoque y la carga diferida es que los clientes deben hacer click para cargar el siguiente conjunto de productos, en lugar de que se carguen automáticamente. Por lo tanto, en comparación con la carga diferida, los botones “Ver más “ permiten acceder al pie de página del sitio web, que de otro modo puede llegar a ser  inalcanzable.

Conclusión

Si tienes un listado de productos de tamaño relativamente pequeño o mediano, la carga diferida o los botones “Ver más” pueden ayudar a tus usuarios a explorar tus productos más fácilmente. Recuerda ejecutar pruebas de usabilidad para detectar cualquier problema potencial en el diseño, como no poder acceder al pie de página o no visualizar correctamente el botón “Ver más”.


Foto de Charlotte May en Pexels
Referencias:
· Alternatives to Pagination on Product-Listing Pages