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

Varios sistemas de paginación a examen: paginador númerico, scroll infinito, botón de cargar más...

Introducción

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.

1 2 3 ...<next >1 ... 3 4 5 6 7 ... 29PREVNEXT... 2 3 4 5 6 7 8 ...<><3 OF 10><>Cargar más<>PREVNEXT
Infinidad de sistemas de paginación disponibles, ¿cual es el adecuado?

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 ayudar o afectar 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:

  • Es fácil de implementar.
  • Mantiene un orden muy estricto.

En contra:

  • 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.
  • 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 diseño del paginador.

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

Esta técnica de paginación tiene muchas variantes. Lo podemos ver 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: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 .... Los he llegado a ver con números del 1 al 409.

Tampoco es muy útil incluir enlaces textuales de "Anterior / Siguiente" ya que los números contiguos ya hacen esta función.

Otra manera de sacar beneficio a este método de paginación 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:

  • Es fácil de identificar por el usuario.
  • Permite saltar (generalmente) una, dos o tres páginas hacia atrás o delante.
  • Flexibilidad máxima, muchas opciones para generar nuestro paginador y aplicarle un diseño.
  • El usuario puede saber en qué página está.

En contra:

  • Difícil implementación.
  • Si no se incluye primera y última página o se incluyen sin números, es imposible determinar cuantas páginas hay a simple vista.

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 (como /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:

  • No requiere interacción por parte del usuario.
  • Se puede implementar un sistema de caché que cargue los siguientes elementos en segundo plano, ganando velocidad al mostrarlos.
  • Es más probable que los usuarios vean una mayor cantidad de elementos usando este paginador, simplemente porque no tienen que hacer click.

En contra:

  • 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.
  • Cuando se han cargado muchos elementos, el navegador puede ir realmente lento.
  • 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:

  • Puede implementar un sistema de caché como el scroll infinito.
  • Se lleva bien con el footer.
  • Puede reemplazarse fácilmente por un texto de loading cuando el usuario haga click, lo que mejora el UX.

En contra:

  • Sufre las mismas penalizaciones que el scroll infinito.

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 sistemas de paginación.

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, 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.

Puedes apoyarme para que pueda dedicar aún más tiempo a escribir artículos y tener recursos para crear nuevos proyectos. ¡Gracias!