Mejores prácticas de paginación
No estoy seguro de la mejor manera de manejar alguna paginación que necesito realizar en una tabla que podría llegar a ser muy grande (5,000 filas más).
Mi primera pregunta es si la cantidad de filas que se muestran por página debe ser dictada solo por el diseño, o si la cantidad de páginas también debe considerarse. Por ejemplo, ¿debería decir <1000 mostrar 20 filas,> = 1000 mostrar 30 filas?
La siguiente pregunta es cuál es la mejor manera de navegar entre las páginas, suponiendo que el usuario haya filtrado la tabla tanto como pueda y se hayan quedado con 50 páginas de información, ¿deberían obtener un cuadro de entrada para saltar a la página 45? ¿O deberían saltarse los botones (1) saltar (5)? En este momento no sé cómo el usuario final va a usar las tablas, así que no estoy seguro de qué opción dejar que intenten primero.
Finalmente, ¿alguien tiene buenos ejemplos de paginación bien hechos que puedan compartir? ¡Siempre estoy buscando un buen material de referencia!
Esto puede o no ser una paginación bien hecha, pero así es como hago la paginación en mi aplicación web:
|< First, << Previous, Page [5] of 12, Next >>, Last >|
Las cuatro opciones externas son enlaces, mientras que Page [5] of 12 es un formulario, con [5] como campo de entrada. Para los usuarios con JavaScript habilitado, oculto el botón de envío y envío el formulario en el evento de desenfoque o presiono una tecla. El usuario tiene la opción de cuántas filas desea mostrar, que puede seleccionar de un menú desplegable: 10, 20, 50, 100, Todos. También proporciono la clasificación y el filtrado de los resultados además de la paginación, aunque eso puede no tener sentido en cada situación.
Editar:
Aquí hay un fragmento de una maqueta de nuestra aplicación web para darle una mejor idea. En esta versión, las palabras se han omitido de los botones, pero aparecen como información sobre herramientas al pasar el mouse después de un ligero retraso. Sin embargo, puede encontrar que mantener las palabras dará como resultado un mayor nivel de usabilidad.
Algunas otras cosas para señalar:
- Los botones "Primero" y "Anterior" se han deshabilitado porque es la primera página.
- El azul indica botones activos (tendré que ejecutar este tema en particular a través de un verificador de color para asegurarme de que los usuarios daltónicos puedan notar la diferencia).
- Los botones permanecen siempre, incluso si están deshabilitados. Esto le da consistencia a la interfaz.
- Elegí un campo de entrada en lugar de un cuadro de selección desplegable debido a la escala. Si tiene 3000 páginas, no desea desplazarse hacia abajo para encontrar la página
- La paginación se agrupa en un componente visual singular para indicar similitud en el propósito.
Perdón por tal respuesta, pero depende . ¿Qué tipo de contenido tiene y qué busca el usuario? ¿Cuáles son los objetivos del usuario? ¿Es un sitio web o una aplicación?
En muchos casos, podría evitar la paginación utilizando el desplazamiento infinito, por ejemplo (consulte los resultados de búsqueda de Búsqueda de imágenes de Google ).
El problema con la paginación es que las páginas en sí no tienen significado. ¿Por qué debería ir a la página 45? ¿Por qué no 38? Si el contenido está ordenado, puede intentar dar nombres significativos a las páginas (como letras de un alfabeto o rango de fechas o cualquier otra cosa que tenga sentido). La cantidad de filas por página debe ser lo más grande posible porque el desplazamiento generalmente proporciona una experiencia mucho mejor que navegar por las páginas (sin embargo, no es una regla general y hay algunas excepciones).
Y para los ejemplos y buenas prácticas aquí hay un gran artículo .
En general, el número de elementos por página es algo que usted determina según los siguientes criterios:
- ¿Qué tipo de datos estoy mostrando y por cuánto tiempo un determinado número de elementos ocupará la página?
- ¿Qué consecuencias tienen los elementos X en la página para el rendimiento de la aplicación?
- ¿Deseo permitir que los usuarios personalicen la cantidad de elementos que se muestran por página?
- Si me interesa la navegación entre páginas (por ejemplo, ¿un usuario se preocupará por ir a la página específica no. 512?), ¿Cómo afectará el número de elementos por página a la navegabilidad de la paginación?
- ¿Qué controles de paginación están disponibles para mí?
Si respondes las preguntas anteriores, te llevarán muy bien a las respuestas para tu segunda pregunta. La paginación es un producto de los datos que tiene y la cantidad de elementos que está mostrando. Mi consejo es determinar si sus usuarios desean especificar qué página desean ver. Puede resolver esto haciendo pruebas de usuario y pensando qué tipo de información se enumera. Por ejemplo, los resultados de búsqueda rara vez son lo suficientemente específicos como para poder decir "Quiero ir a la página 47", ya que generalmente están ordenados por un algoritmo críptico y opaco. Pero si está enumerando, por ejemplo, nombres en orden alfabético, ir a la página 47 puede ser muy intuitivo.
Del mismo modo, el tipo de datos que está mostrando también puede afectar la navegación y es posible que desee considerar el patrón de diseño de navegación facetado para simplificar las cosas. En el ejemplo que acabo de dar sobre los nombres alfabéticos, puede considerar la paginación utilizando letras (A | B | C | D, etc.) y páginas dentro de cada letra si tiene muchos datos.
Concretamente:
- No recomiendo dar a los usuarios demasiado control específico a menos que sepan de hecho que es lo que quieren
- En su lugar, ofrezca relleno alrededor de la página actual (1 .. 7 8 [9] 10 11 .. 28)
- Incluya la primera y la última página si está ordenando algorítmicamente, a menos que no pueda hacerlo por razones de rendimiento.
- Si ordena de forma algorítmica, considere varias opciones de clasificación (como invertir el orden de clasificación), depende del tipo de datos
Ejemplos de paginación bien hechos:
- Flickr - clara diferenciación entre el estado seleccionado, inactivo y de enlace; colores accesibles; enlaces acolchados con buenos objetivos de clic; buen relleno alrededor de la página actual; No demasiado complejo. Un favorito personal.
- Funda.nl - Sitio web holandés de bienes raíces con un diseño excelente, simple y fácil de leer que también se refleja en la paginación
- Bing - sin BS, diseño de tipografía minimalista, lo que significa que la paginación es muy sutil pero a la vez fácil de usar
- Google (obviamente) - algo ingenioso, pero a pesar de tener muchas opciones, todavía se siente simple e incluso te hace sonreír
- Chris Messina tiene algunas buenas fotos de paginación en su álbum de patrones de diseño en Flickr.
Patrones de paginación:
En cuanto a su primera pregunta: soy fanático de la coherencia (y la mayoría de los usuarios también lo son). No confunda al usuario y hágales pensar por qué ven más filas esta vez ... Incluso puede dejar que seleccionen "elementos por página", lo cual es una práctica muy común y útil.
Los usuarios prefieren desplazarse y luego buscar. Es mucho más fácil operar la rueda de desplazamiento que apuntar a pequeños enlaces de navegación.