Cuando se trata de mostrar grandes cantidades de información en una web, ya sean productos de una tienda, resultados de una búsqueda o anuncios en una web de empleo, tradicionalmente se ha venido utilizando un recurso de interfaz conocido como paginación web. Esta técnica permite mantener el tamaño de cada página dentro de lo manejable en cuanto a navegación e interfaz. Al mismo tiempo, permite reducir el tamaño de la página la cantidad de información a transferir, ganando en velocidad.
Soluciones a nivel de concepto y de diseño sobre una paginación para una web concreta puede haber muchas. Este apunte pretende únicamente mostrar algunos ejemplos recogidos de ciertas webs: qué elementos son comunes y cuáles originales e interesantes. A partir de ahí, cada cual puede meditar la solución más adecuada para su web.
Tres ideas para enfrentarse a la situación
Lo primero que hay que apuntar es existen tres tipos de conceptos que resuelven esa necesidad habitual de mostrar grandes listas de información más o menos repetitiva o en el mismo formato:
- La paginación tradicional: Divide los contenidos en grupos arbitrarios de 10, 25, 100 o cualquier otra cantidad de resultados. Al final del listado incluye enlaces para avanzar y retroceder página a página. El usuario puede usar estos enlaces o bien los botones de avance y retroceso del propio navegador web.
- La opción Cargar más: La programación AJAX popularizó esta técnica que consiste en añadir contenidos en la misma página web bajo petición. Esto se hace con un clic en un enlace o botón. Resulta muy intuitivo pero por contra puede crear monstruosas páginas difíciles de navegar con el ratón/trackpad.
- El scroll infinito: Elegante como ninguno, ese concepto resuelve los problemas de interfaz haciendo que la página web «crezca» con solo bajar con el ratón – y recordemos que ¡todo el mundo hace scroll, cojones! Los cargan estilo AJAX pero no hace falta ningún clic. Entre sus desventajas: tiende a generar páginas gigantescas (transfiriendo muchas veces información innecesaria o no solicitada), quedan inutilizadas las anclas de las URLs (#) para enlazar a secciones de la página desde otras y resulta un tanto inconsistente respecto a los botones del navegador web.
La mayor parte de las páginas webs, incluyendo periódicos, foros, tiendas y otros servicios utilizan la paginación tradicional. Otros usan desde hace tiempo el «Cargar más» como solución más conveniente (ej. YouTube, Apple) y en sitios sociales más modernos, donde dominan las cronologías (Twitter, Facebook) el scroll infinito es el rey.
La paginación tradicional
En los siguientes ejemplos se indican algunos de los elementos habituales de este tipo de paginación, que con más o menos variaciones –algunas muy interesantes– se repiten de unos sitios a otros:
Podría considerarse Google como el ejemplo canónico de paginación: ha de mostrar miles de resultados para cada búsqueda y hacerlo fácil. Su solución es tan simple como dos enlaces Anterior y Siguiente (también forma de flechas) junto con los números de página. Siempre se muestran diez números alrededor de la página en la que se está (ej. de 5 a 14 si se está en la página 10).
El huevo de pascua o genialidad de Google consiste en utilizar el logotipo de la empresa con otro nombre alargado de forma totalmente artificial y casi superflua. Pero con una guinda: las primeras letras (antes de la «o» roja) llevan a la página Anterior, las últimas a Siguiente.
Gmail
En el caso de los listados de correo en Gmail se utilizan dos botones con flechas junto con un recordatorio numérico de la posición actual. Hay que reconocer que aquí la situación es un poco distinta de otro tipo de webs dado que el listado suele ser muy compacto y además estos botones están accesibles en la parte de arriba de la página. Solo existen esos dos botones; probablemente más tampoco ayudarían mucho. Un pequeño problema: una superficie muy pequeña sobre la que afinar los clics.
IMDb
La versión de la paginación que hace la Internet Movie Database no se emplea mucho en su web aunque en ciertos listados limita a 250 por página los contenidos de los millones de datos con los que cuenta. Es similar a la paginación de Google pero en modo texto, más a la antigua usanza. La superficie de clic es similar a la de Gmail y otras opciones: mejorable.
Amazon
Amazon utiliza varios tipos de paginación. Las primeras emplean los elementos básicos (flechas + Anterior/Siguiente + numeración, puntos suspensivos…) pero en modo texto. Una solución completa y efectiva.
La segunda opción aparece los listados de los pedidos realizados. Es visualmente más atractiva (aunque también se puede opinar que es un poco «retorno a los años 90») y parece más consistente y elegante. Hace buen uso de los colores y el contraste, incluyendo las páginas ya visitadas con estilo distinto, además de que el uso de botones aumenta la superficie de clic, facilitando la navegación.
Eso sí, esto abre otro debate: ¿acaso no es un tanto inconsistente utilizar dos tipos de paginación en la misma tienda? Probablemente. Sobre todo teniendo en cuenta que la segunda opción es quizá la más completa, elegante y efectiva que se puede usar.
Alexa
Para paginar resultados Alexa utiliza un diseño muy similar al de Amazon, también de forma muy elegante. Y añade un detalle interesante: la numeración y el total de resultados del «universo de contenidos» a explorar. Es algo que puede parecer poco importante pero que permite al usuario hacerse una idea de la magnitud de los contenidos por los que transcurrirá la navegación.
Craigslist
Para demostrar que la popularidad de una web puede estar reñida con el diseño basta echar un vistazo a la paginación de Craigslist: tan fea (textos superpuestos) como incorrecta (erratas) y viejuna (flechas, bordes). Sin embargo ahí está: sirviendo millones de páginas cada hora.
Wikipedia
… Aunque podría ser peor: la solución de nuestra querida Wikipedia para listar secciones como el historial de cambios y otras similares es tan poco práctica como ininteligible. Salida de la mente de algún retorcido programador, demuestra que ningún diseñador pasó nunca por allí o que simplemente esa sección no se considera en absoluto importante. Mucho número y poca chicha.
Bing
Microsoft ha diseñado la paginación de su buscador Bing con algunos interesantes detalles. El primero: no hay texto, por tanto nada que traducir si la web es internacional – además que un icono frente a un texto es todo un ahorro de neuronas para los cerebros de los visitantes. El segundo: adiós a los puntos suspensivos, aunque también a los datos numéricos sobre totales, ítems en la página, etc. Y para recalcar toda esa simplicidad, adiós colores: todo es gris. Sin duda adecuado, resultón y muy profesional.
phpBB
El caso de phpBB es reseñable por su dilatada experiencia (son el más popular sistema de foros desde hace más de una década), así que de algo deben saber respecto a cómo ordenar y presentar una buena paginación cuando de miles de mensajes tipo conversación se trata. El diseño estándar es muy claro, incluyendo el número total de ítems por los que se está navegando y los botones numerados, además de las flechas de Anterior/Siguiente. Eso sí, el área de clic es demasiado pequeño. Incluso hay un curioso expediente-X: la aparición un icono más propio de mando a distancia descarriado que de una web de contenidos, una especie de «salto». Interesante en general.
eBay
La solución de eBay es también una de las más completas y elegantes, que incluye como útil detalle la posibilidad de elegir el número de elementos a mostrar por página, algo extremadamente útil para cierto tipo de webs.
El País
Los periódicos españoles suelen utilizar poco la paginación, con excepción de los resultados de búsqueda (que a veces proviene de Google o similar) y áreas como los comentarios. En el caso del El País/Eskup la solución dista de ser adecuada: tan solo hay dos pequeños iconos con flechas –de tamaño insuficiente que apenas proporcionan zona de clic– y la cabecera se mezcla con un icono de… RSS (?!) Por si fuera poco, la numeración de los resultados está erróneamente «pegada» al texto y ni se expresa la separación de los miles. Altamente mejorable.
El Mundo
Aunque el diario El Mundo tampoco hace gran uso de la paginación en artículos (prefiere un botón del tipo Cargar más en la misma página) donde lo hace es breve, directa y sencilla, similar a Amazon y Bing. Eso sí: increíble que se use en un tamaño tan pequeño – algo que si además se está leyendo la página en un dispositivo móvil resulta especialmente doloroso.
20 Minutos
Bajo el lema de la simplicidad, la paginación del diario 20 Minutos en diferentes zonas opta por botones de alto contraste, bordes rectos, tamaño razonable y texto explicativo en vez de iconos. Es menos intuitivo pero casi igual de práctico.
Los botones «Cargar más»
Este tipo de botones simplemente cargan más resultados, ítems o contenidos en la misma página en la que se encuentra el usuario, utilizando programación AJAX. Son una alternativa al Scroll infinito que evita perderse en la navegación, transferir datos innecesarios e incluso probablemente sobrecargar los servidores innecesariamente:
Youtube
El ejemplo canónico sería YouTube. Este botón suele variar de unas webs a otras en cuanto a tamaño y texto. Curiosamente no parece que exista un icono estándar como sí existe para Atrás/Adelante.
Apple
Lo mismo pero con estilo Apple: tipo de letra, tamaño, sombreado… Cuestión de diseño y consistencia con el resto de elementos de la página.
Shutterstock
El ejemplo de Shutterstock es interesante porque este servicio de stock de imágenes añade en sus resultados la numeración e incluso una caja para escribir el número de página y «saltar» – probablemente por necesidades del guión y el tipo del servicio. No obstante el aspecto final no resulta demasiado elegante (varios tamaños de letra, tonos de gris, etc); tal vez fruto de intentar mezclar varios conceptos.
En busca de la mejor solución
Repasando el estado de la cuestión parece claro que cualquier aplicación moderna –especialmente si entra en el campo de las cronologías, foros, muros gráficos, etcétera– evitará la paginación utilizando el scroll infinito como solución óptima. Pero a veces esto no es posible ni fácil de utilizar, por motivos técnicos o prácticos; en ese caso optar por la alternativa en AJAX de solo botón Cargar más puede ser la mejor idea.
Finalmente algunas veces se prefiera o se esté limitado a la paginación tradicional por bloques. Esto puede deberse a diversas causas: limitaciones del CMS (sistema de publicación), de la programación o quizá por la integración con otro tipo de contenidos o servicios. En este caso los elementos más relevantes a tener en cuenta serían:
- Botones de Anterior/Siguiente, preferiblemente solo dos y en forma de iconos claramente visibles.
- Lista numerada de las páginas, con diferenciación visual (por ejemplo en los enlaces) indicando la posición actual y a ser posible una indicación del total de contenidos/resultados y de cuántos ítems contiene cada página, para que el usuario pueda ubicarse respecto al universo que está navegando.
- Un tamaño adecuado para los enlaces y botones: recuérdese que la gente ha de hacer clic y «acertar» con el ratón, una superficie de pocos píxeles (ej. 10×10 = 100px) puede ser escasa.
- Los botones y enlaces son mejores grandes y con mucha zona de clic. Por ejemplo un número «1» a tamaño 12px puede quedar convertido en una zona de 12×5 píxeles nada más (60px). Se pueden utilizar rectángulos visibles o invisibles que faciliten el clic. Esto es crítico en navegación en dispositivos móviles, donde las pantallas son más pequeñas y los dedos más torpes e imprecisos que el ratón.
El último consejo es el que todo desarrollador y diseñador web conoce: estas son las reglas y están ahí para saltárselas. Si el contenido o las circunstancias lo requieren no hay problema en inventarse otra solución – eso debieron pensar los que inventaron el «scroll infinito» o el «arrastrar para cargar más». Pero viendo lo que hacen los grandes de Internet –que han dedicado años y probablemente cientos de personas e infinidad de recursos a trabajar en ello– es cauto aprovechar toda esa experiencia para ir sobre seguro.
