Yahoo, en su developer network, tiene una sección llamada Yahoo Design Patterns, donde muestran los patrones de diseño orientados a interfaz de usuario, que han aplicado en el famosísimo buscador.
Por la falta de información de este tipo en el mundo del diseño de iteración y la usabilidad, esto es un recurso muy valioso, y hoy vamos a hablar de un gran desconocido (en homenaje al Sr. Carlos Herrera), los controles de paginación en las páginas de resultados de búsquedas.
Recordar antes de nada que un patrón es una buena solución dentro de un contexto, pero si el contexto no es el adecuado, este patrón puede convertirse en un anti patrón.
¿Cuándo tendremos la necesidad de usarlo?
Si señores míos, eso es lo que nos tenemos que preguntar ¿Cuándo tendré la necesidad de usar una navegación en páginas de resultados de búsqueda? o ¿en qué contexto tendré que aplicar un patrón de navegación en páginas de resultados de búsquedas?
Como veis, la respuesta es muy simple, este patrón lo vamos a aplicar siempre que nos encontremos con la necesidad de que el usuario vea un conjunto de resultados de búsqueda clasificados por un criterio (ya sea relevancia, fecha etc.…) y los resultados son demasiados, y además este elemento de navegación tiene que ser fácilmente visto, comprendido y usado.
Como aplicar el patrón
Básicamente podemos hacer 2 cosas para aplicarlo:
- Crea subconjuntos de resultados ordenados en función de un criterio determinado.
- Permítele al usuario acceder a la información de los susodichos subconjuntos mediante un sistema de navegación.
Y ahora unas buenas prácticas para crear el control de navegación
En el diseño del control de paginación, puede estar la clave para que los usuarios accedan a los distintos subconjuntos, así que veamos unas guidelines o buenas prácticas definidas por la gente de Yahoo y alguna aportación personal ;-):
- El control de navegación (dado que esto sobre todo los vas a usar en la web y esta además enfocado a la web) deberán ser un conjunto de links.
- Muestra los links de forma horizontal.
- Procura (si quieres que los esfuerzos SEO no sean en balde) que el destino de los links sea una web, es decir, no hagas paginaciones con javascript o tecnologías de servidor que oculten la url de la página destino ya que si no, no se indexara la información.
- Los links deberán mostrar el número de página al que se va a acceder.
- El número se mostrara como 5 y no cinco (por ejemplo), es decir de forma numérica.
- Además de los números, muestra el link anterior y siguiente con sus correspondientes flechas.
- El orden será: Anterior < links numéricos > Siguiente.
- El conjunto de links numéricos, debería tener un máximo de 10 links. Si el conjunto es menor, solo mostraremos los links de las páginas disponibles.
- Cuando estemos entre la página 1 y 6 el primer link será el de la página 1. Cuando estemos en una página superior a 6, el primer link será el de la página actual menos 5.
- En la primera página nunca mostraremos el link de Anterior ni su flecha asociada (<), igualmente, en la ultima página nunca mostraremos el link de Siguiente y su flecha asociada (>).
- Para la página actual no tenemos que usar un link, sino un texto plano.
- Procura que el diseño de links sea simple pero efectivo.
- Si lo posicionas en la parte superior de la página, lo voy a dejar a tu elección, pero eso sí, en la parte inferior es más natural y efectivo, así que ponlo siempre.
Y con esto, es suficiente. Si te ves en la necesidad de crear un control con este propósito, ten presente siempre estas prácticas que como ves son muy simples y muy útiles. Y ya que dicen que una imagen vale más que mil palabras veamos el control de paginación de Yahoo:
A deshoras 
El GridView y sus eventos: El evento PageIndexChanging « a deshoras