Cómo elegir el método de paginación adecuado

Paginador númerico, scroll infinito, botón de cargar más... Todos los sistemas de paginación tienen sus beneficios.

Si nuestro contenido fuera un edificio, la paginación serían las escaleras y ascensores. Nadie en su sano juicio subiría 48 plantas andando, de igual manera que nadie ha llegado jamás a la página 7 de Google. Es por ello que la paginación es tan importante que sin ella nuestros contenidos serán difíciles o imposibles de encontrar.

La mayoría de webs implementan un sistema de paginación sencillo e intuitivo, pero otras en cambio hacen uso de técnicas de paginación que consiguen arruinar la experiencia de usuario.

Distintos tipos de paginación
Distintos tipos de paginación

En este artículo vamos a hablar de la paginación para listados y búsquedas, y de cómo los distintos tipos de paginación pueden ayudarnos o afectarnos en nuestro sitio web.

Tipos de paginadores

El textual (Anterior / Siguiente)

Es probablemente el más común de todos ya que viene por defecto en Wordpress. Consiste en los típicos botones/enlaces de ir hacia atrás y hacia delante, ningún misterio.

A favor En contra
Es fácil de implementar. Si el usuario no encuentra elementos útiles en la página actual, su interés por ir a la siguiente página se verá drásticamente afectado.
Mantiene un orden muy estricto. A veces puede resultar difícil de encontrar por el usuario.
Es imposible saltar resultados. Por ejemplo: saltar directamente a la página 3.
No se sabe cuantas páginas hay realmente, puede haber 7 o 500.
No se puede saber en qué página estás a través del paginador.

El numérico (1 ... 5 6 7 8 9 ... 13)

Esta técnica de paginación tiene muchas variantes. La hemos visto integrando los enlaces "Primera / Última" y/o integrando los enlaces "Anterior / Siguiente".

Es el método que utiliza Google aunque ellos no incluyen un "Primera / Última" (ni lo necesitan).

Bajo ningún concepto el paginador debería ser así: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20. Los he llegado a ver con números del 1 al 409.

Tampoco deberías incluir los enlaces textuales de "Anterior / Siguiente" ya que los números contiguos ya hacen esta función.

Otra manera de sacar beneficio a este paginador es omitir los enlaces "Primera / Última" y mantener siempre visible la primera y última página de esta manera: 1 ... 5 6 7 8 9 ... 57.

A favor En contra
Es fácil de identificar por el usuario. Difícil implementación.
Permite saltar (generalmente) una, dos o tres páginas hacia atrás o delante. Si no se incluye primera y última página o se hace sin números, es imposible determinar cuantas páginas hay a simple vista.
Flexibilidad máxima, muchas opciones para generar nuestro paginador y aplicarle un diseño.
Se puede saber en qué página estás.

El scroll infinito

Tema delicado. Se puso tan de moda que algo común era intentar llegar al footer pero el scroll infinito siempre cargaba nuevos datos.

Su mayor penalización es que si pulsas en un enlace y después vuelves atrás, pierdes la posición en la que estabas. Esto se puede solucionar añadiendo a la URL un ancla (anchor) tipo /articulos/#3 que vaya cambiando dinámicamente a medida que se cargan nuevas páginas. Así, leyendo la URL podemos saltar el número de elementos necesarios. Es decir si mostramos 20 elementos por página y tenemos esa URL, mostraremos los elementos a partir del número 60. El problema es que los primeros resultados se omitirán.

A favor En contra
No requiere interacción por parte del usuario. El usuario no puede guardar una posición en la página ni tampoco puede volver a donde estaba usando el botón "Atrás" del navegador. Esto se puede corregir como vimos arriba, pero incrementa la dificultad de implementación.
Se puede implementar un sistema de caché que cargue los siguientes datos en modo background, ganando velocidad al mostrar los siguientes elementos. Cuando se han cargado muchos elementos, el navegador puede ir realmente lento.
Es más probable que los usuarios vean una mayor cantidad de elementos usando este paginador, simplemente porque no tienen que hacer click. Imposible saltar o ir a la última página.
No se puede saber en qué página estás. Aunque se puede añadir algo tipo: "Mostrando resultados 61-90", no tendría mucho sentido porque no se puede llegar hasta ahí directamente.
No se tiene una sensación de orden sobre los elementos.
No se lleva bien con el footer.

El botón "Cargar más"

Este método es similar al scroll infinito pero el usuario tiene el control de cuándo quiere ver más resultados.

A favor En contra
Puede implementar un sistema de caché como el scroll infinito. Sufre las mismas penalizaciones que el scroll infinito.
Se lleva bien con el footer.
Puede reemplazarse fácilmente por un loading cuando el usuario haga click, lo que aumenta el UX.

Cómo elegir el paginador adecuado

Por supuesto esto depende del contenido, pero a continuación expongo un breve resumen sobre en qué casos podemos usar estos paginadores.

Textual

Un ejemplo sería un cómic o una serie de artículos. ¿Para qué íbamos a querer saltar a la página 7? Si tiene un orden, posiblemente este paginador sea el más eficaz.

Numérico

Es el que usaremos la mayoría de veces por ser el más flexible y extendido. Un ejemplo sería una web de artículos o fotografías, donde nos da igual ver la página 2 o la 20, ya que ambas tienen el mismo interés. En este caso dar esa posibilidad al usuario es buena idea.

Scroll infinito

Seguramente el 90% de las veces que pensemos en esta técnica será una mala idea. El otro 10% podría ser webs como Facebook o Twitter donde no estamos buscando nada en concreto, simplemente queremos pasar un rato haciendo scroll y viendo novedades, chistes o fotos de los amigos.

El scroll infinito no funcionaría en una tienda online (obviamente), ya que el usuario no está navegando por entretenimiento sino que busca algo en concreto y espera encontrarlo y saber donde está. En una tienda online, si nuestros productos están ordenados por precio y los primeros resultados muestran productos por valor de 150€, a lo mejor el usuario decide saltar 4 páginas de golpe para llegar a un rango de precios más bajo. En este caso usaríamos el numérico o alguna otra variante.

Otra opción para usar scroll infinito sería una web multimedia. Ya que podemos ver imágenes mucho más rápido que leer texto, poder cargar nuevos elementos sin necesidad de hacer click y esperar, sería una gran ventaja para el usuario.

Cargar más

Lo interesante de esta técnica es que se puede usar por sí sola o junto con el scroll infinito. Un ejemplo que me parece genial es Youtube. En la página de suscripciones, la segunda página carga mediante scroll infinito pero las siguientes necesitan que el usuario haga click en "Cargar más", lo que evita algunos problemas del scroll infinito como el hecho de que el navegador use demasiada memoria.

Por sí solo, este paginador funciona de igual manera que el scroll infinito pero dándole al usuario el control sobre cuando desea ver más resultados.

Hay un mundo ahí fuera

Es cierto, hay muchos más sistemas de paginación.

Algunos ejemplos son: [1-5] [6-10] [11-15] [16-20] [21-25] ... o « Página 1 de 32 ». También hay paginación touch mediante un deslizador.

Hay muchos sistemas originales y nuevos, algunos útiles y otros destinados al fracaso. En tí queda la responsabilidad de elegir el más adecuado para tu sitio web.

Compartir en

Facebook Twitter Google+ LinkedIn