En la paginación tradicional se dividen los elementos de una lista en varias páginas, y cada una de ellas tiene un número fijo de elementos. Esta forma de diseño la encontramos normalmente en productos digitales de ecommerce.

Con la paginación tradicional, para ver más opciones, las personas usuarias tienen que clicar en un botón “siguiente”, o en el siguiente número para pasar la próxima pantalla.

Esta fórmula de diseño se utiliza normalmente en los ecommerce que tienen una gran cantidad de productos. Esto ofrece un control preciso para que las personas usuarias sepan donde está el producto que les interesa, ya que si fuera una navegación vertical (scroll infinito) sería mucho más difícil de encontrar. 

Ejemplo paginación tradicional
Ejemplo de paginación tradicional en Funidelia, una tienda online de disfraces con un catálogo muy amplio.

Sin embargo, si el ecommerce tiene un tamaño pequeño o mediano, se pueden utilizar otros recursos de diseño para mostrar los productos, que no sean la paginación tradicional o la navegación vertical. Una de estas opciones es la fórmula “cargar más”.

Ejemplo de cargar más
Ejemplo de paginación “cargar más” en Banak, una tienda online de muebles de diseño con un catálogo reducido.

Diseño UX: Cargar más

Una de las alternativas más comunes a la paginación tradicional o a la navegación vertical es colocar un botón de “cargar más”. Aunque también lo podemos encontrar como “mostrar más”, “ver más”, “ver más productos” o “ver más artículos”.

Esta fórmula tiene una parte positiva y otra negativa. Por una parte, el botón “cargar más” es más grande que los números de página de la paginación tradicional, por lo que es mucho más fácil hacer clic en él. Además, esta fórmula permite que las personas usuarias puedan acceder al pie de página de los sitios, ya que al utilizar la navegación vertical es una tarea imposible.

Sin embargo, por otra parte, si comparamos esta fórmula con la navegación vertical, puede resultar una tarea un poco tediosa, ya que en lugar de cargar automáticamente, hay que realizar la acción de clicar en el botón para seguir cargando el contenido. 

Otro problema que puede tener este diseño es que las personas usuarias no saben cuándo van a llegar al final del listado de productos. Para solucionar este problema hay que mostrar el número total de artículos de la categoría que estamos visualizando, el número de productos que ya han sido cargados y el número de productos que quedan por cargar.

Esta alternativa es muy positiva para las personas que utilizan dispositivos móviles, ya que pueden decidir si quieren cargar más productos y gastar más datos. (Ver también: Diseñar para offline).

Este es el diseño que ha incorporado Google en las páginas de resultados en los dispositivos móviles. Aunque copiar diseños de una gran empresa sin hacer investigación UX no es recomendable (porque cada proyecto y empresa tiene unas características y unos requerimientos únicos), es muy probable que gane popularidad, ya que las personas usuarias se acostumbran a este tipo de diseño. (Ver también: Los riesgos de imitar diseños UX).

Independientemente de la alternativa de paginación que se utilice, es muy importante guardar siempre los steps de navegación de la persona usuaria. Esto significa que si están viendo un listado de productos y clican en uno en concreto para ver la ficha de producto, es muy importante que cuando hagan clic en el botón “atrás”, vuelvan al mismo sitio.

En ocasiones, algunos productos digitales no admiten esta característica, y cuando las personas usuarias vuelven a la página del listado, tienen que desplazarse otra vez hacia abajo para encontrar el punto en el que se encontraban. En la paginación tradicional esto puede ocurrir y es molesto, pero si el usuario sabe en qué número de página se encontraba,  se puede solucionar fácilmente. Sin embargo, si el diseño es “cargar más”, obliga a la persona usuaria a repetir todo su desplazamiento, y es un pain muy grande.

Para elegir la mejor alternativa de paginación hay que analizar en profundidad las características de cada proyecto, e investigar y testear cuál es la mejor opción. Incluso puede ser interesante combinar diferentes métodos de paginación, tan y como hacen en este ejemplo:

Pagniación mixta
Ejemplo de paginación mixta en Vertbaudet, tienda online dedicada a la infancia con un catálogo amplio.

En este caso se utiliza la fórmula “Ver más artículos”, y se muestra el número de artículos que ya se han visto y los que quedan por mostrar. Además, en la parte inferior derecha de la pantalla aparece también una paginación tradicional. De esta forma, las personas usuarias pueden decidir si cargar la opción “ver más artículos” o saltar a otra página mucho más avanzada.  

En definitiva, elegir la mejor opción de paginación dependerá de cada proyecto, y no existe una solución “perfecta”. La clave está en investigar y testear las opciones de diseño UX.

Ver también: 

Aborda el diseño de servicios vinculados a productos digitales y optimiza la inversión en experiencia de usuario con UX-PM Nivel 3: Liderar UX.

Aprende a construir un equipo de UX sólido que satisfaga los requerimientos de tu organización.

Más información sobre esta certificación internacional en nuestro área de formación.


En Torresburriel Estudio desarrollamos las capacidades técnicas de tu equipo en temas de usabilidad, experiencia de usuario y diseño de producto a través de nuestros cursos online y presenciales.