Paginación

Se realiza una paginación cuando consideramos que la cantidad de información que vamos a mostrar al usuario debe der ser fraccionada, para de ese modo ayudarle a encontrarla, bien. Pero si ese es el motivo, hagámoslo bien hasta el final ¿no?.

La paginación no es sólo colocar un siguiente y anterior, o un sin fín de índices de páginas para que el usuario las pulse. Tan importante como la movilidad entre las páginas es la información mostrada en cada una de esas páginas. Vamos a ver el proceso en varios apartados.

LA PÁGINA

Para diseñar una página de resultado (sea o no resultado de un buscador), tenemos que pensar en lo que el usuario quiere encontrar. Un ejemplo lo tenemos en cualquier web de venta o subasta. Si por ejemplo estamos buscando coches, lo lógico es que nuestra página, nos de la opción de ordenar ese resultado por precio, por ciudad, o por kilometraje, y ese orden debe de afectar a la paginación completa, de ese modo ayudaremos al usuario a encontrar lo que busca. En definitiva, la página resultado debe, si así lo requiere, tener la opción de ordenar el resultado y que este orden afecte a las sucesivas páginas.

UBICACIÓN DE LA PAGINACIÓN

Una vez más depende de varios factores. La página puede ser más o menos larga, luego ocurre también que nos pueda interesar que el usuario haga todo el scroll porque comercialmente nos interesa que vea todo, en cualquier caso siempre tendrá que estar al final de la página y destacada de tal modo que sea fácil encontrarla.

Existen ocasiones en las que yo aconsejo meterlo también al principio de la página. Si por ejemplo un buscador me devuelve los resultados de todos los artistas que tengo de música pop, y he metido un filtro para que salgan alfabéticamente, no parece lógico que tenga que tragarme todo el scroll de cada página hasta llegar a la letra que me interesa. En casos así, facilita mucho el tener un siguiente a principio de página.

¿CÓMO TIENE QUE SER LA PAGINACIÓN?

• Usemos áreas suficientemente amplias para que el usuario no tenga que hacer puntería con el ratón para encontrar el enlace.
• Identificar siempre la página actual.
• Suficiente espacio entre los vínculos de navegación.
• Proporcionar opciones de anterior y siguiente.
• Si es necesario proporcionar las opciones de primero y último.
• Soy partidario de informar al usuario no solo de en qué página se encuentra, si no también de la cantidad de resultados y páginas que hay.
• Si es posible, dar la opción de moverse más deprisa. Bien pudiendo elegir la página destino, bien haciendo enlaces del tipo «10 siguientes» o «100 siguientes»….

Quizás la paginación que más me ha gustado ha sido la que encontré en dirty.ru. Se trata de un sistema que informa del número total de páginas, indica correctamente la página en la que nos encontramos, nos muestra franjas de 15 páginas para trasladarnos, pero además tiene un scrollo para trasladarnos rápidamente entre los resultados, ver ejemplo

Otros sistemas de paginación, nos dan la opción de además, elegir la cantidad de resultados que queremos por página, o trasladarnos directamente a una página en concreto. Por ejemplo en Stock. xchng vemos como nos muestra paginación al principio y final de la página y nos da la opción de elegir la cantidad de resultados y la movilidad a una página concreta.

CÓDIGO CSS GRATIS PARA HACER TU PAGINACIÓN

• Existen numerosos sitios en los que encontrar código para hacer una paginación, os recomiendo este post de «Mis algoritmos«, en el que se muestran varios modos de paginar con CSS
• Otro sitio en el que puedes descargarte por ejemplo la paginación de Flickr es Woork.
• Dynamic Drive, como siempre muy buenos códigos para descarga gratuita.