Sistema de Paginación
Propósito
La habilidad del Sistema de Paginación proporciona una metodología para diseñar la interfaz que divide grandes conjuntos de datos en páginas discretas. Garantiza que los usuarios puedan recorrer listas largas de elementos (productos, resultados de búsqueda, artículos) manteniendo una clara sensación de "dónde están" y "cuánto contenido queda". Un sistema de paginación robusto equilibra la precisión de navegación con la simplicidad, minimizando la carga cognitiva y evitando la desorientación del usuario.
Casos de Uso
- Diseñar páginas de resultados de búsqueda para sitios de comercio electrónico o directorios.
- Organizar archivos largos de blogs o noticias.
- Implementar "Cargar Más" versus paginación numerada tradicional para centros de contenido.
- Crear navegación para tableros de datos o registros con muchos datos.
- Optimizar formularios de varios pasos o asistentes basados en pasos donde las secciones individuales se tratan como vistas distintas.
Cuándo NO Usar
- Conjuntos de datos pequeños (<12 elementos): Si todo el contenido cabe cómodamente en una o dos pantallas, la paginación añade clics y fricción innecesarios.
- Contextos de desplazamiento infinito: Donde el usuario explora feeds sociales o flujos de noticias basados en descubrimiento donde las direcciones de página específicas no son importantes (use
infinite-scroll-implementationen su lugar). - Contenido narrativo único: Para artículos o historias que siguen un flujo lineal donde los enlaces "Anterior/Siguiente" son suficientes.
Entradas
- Recuento total de elementos: ¿Cuántos elementos hay en total en la colección?
- Elementos por página: ¿Cuál es la densidad estándar (ej., 12, 24, 48 elementos)?
- Contexto de página actual: ¿Qué página está viendo actualmente el usuario?
- Restricciones de visualización: ¿Cuánto espacio horizontal está disponible para la barra de paginación (de
responsive-grid-system)?
Salidas
- Especificación de anatomía de paginación: Estilos visuales definidos para números de página, botones Anterior/Siguiente y controles de "Salto" (puntos suspensivos).
- Matriz de estados: Tratamientos visuales para los estados Predeterminado, Actual, Hover, Foco y Deshabilitado (ej., botón "Anterior" en la página 1).
- Estrategia responsiva: Un plan de cómo la barra de paginación se colapsa de escritorio (rango completo) a móvil (vista compacta).
- Mapa de accesibilidad: Definiciones explícitas para roles ARIA, etiquetas y patrones de interacción con teclado.
Flujo de trabajo
1. Definir la estrategia de rango
Determinar cuántos números de página mostrar a la vez según el volumen total:
- Simple (3-5 páginas): Mostrar todos los números de página.
- Moderado (6-10 páginas): Mostrar la primera, la última y una ventana alrededor de la página actual.
- Complejo (10+ páginas): Usar puntos suspensivos (
...) para representar rangos omitidos (ej.,1 ... 4 5 6 ... 20).
2. Diseñar los controles de navegación
Establecer la jerarquía visual de la barra de paginación:
- Acciones principales: Los botones Anterior y Siguiente deben ser claramente visibles y estar situados en los extremos de la barra.
- Indicador de página actual: Usar un estilo de alto contraste (color de fondo o borde grueso) para que la página actual sea inmediatamente obvia.
- Números de página: Asegurarse de que parezcan elementos interactivos (ej., usando
interactive-state-system).
3. Aplicar espaciado y tamaño fluido
Usar el fluid-spacing-system para garantizar que los objetivos sean utilizables:
- Objetivos táctiles: Cada número de página y botón debe tener al menos 44x44px; si la densidad visual requiere controles más pequeños, WCAG 2.2 (2.5.8 Tamaño mínimo de objetivo) establece un piso absoluto de 24x24px con espaciado adecuado entre objetivos para evitar activaciones accidentales.
- Espacios internos: Usar espaciado consistente (ej.,
--space-xs) entre números de página para evitar clics erróneos.
4. Establecer accesibilidad (WCAG AA/AAA)
- Hito: Envolver la paginación en un elemento
<nav>conaria-label="pagination". - Página actual: Usar
aria-current="page"en el enlace de la página activa. - Estados deshabilitados: Asegurarse de que el botón "Anterior" esté visual y programáticamente deshabilitado (ej.,
aria-disabled="true") cuando se esté en la primera página. - Ruta de teclado: Los usuarios deben poder presionar
Taba través de cada número de página y control, y el control enfocado nunca debe estar completamente oculto por encabezados/pies de página fijos (WCAG 2.2, 2.4.11 Foco no oculto).
5. Planificar adaptaciones responsivas
Mapear la transición de escritorio a móvil:
- La regla de reducción: En móvil, ocultar la mayoría de los números de página y solo mostrar "Anterior", "Siguiente" y el estado actual (ej., "Página 4 de 20").
- Escala visual: Si los números de página deben permanecer, reducir la "ventana" solo a la página actual y sus vecinos inmediatos (ej.,
1 ... 4 ... 20).
Reglas de decisión
- Números vs. Cargar Más: Usar números cuando los usuarios necesiten marcar o compartir resultados específicos (ej., "Mira la página 4"). Usar "Cargar Más" cuando el objetivo sea un descubrimiento y comparación prolongados.
- El máximo de "7 elementos": En escritorio, evitar mostrar más de 7-9 elementos en la barra de paginación (incluyendo puntos suspensivos y botones) para mantener el diseño limpio.
- Predecibilidad: Mantener siempre "Anterior" a la izquierda y "Siguiente" a la derecha. Nunca ocultar estos botones; solo deshabilitarlos cuando no sean aplicables.
- Retroalimentación inmediata: Al hacer clic en un número de página, debe desplazar inmediatamente al usuario a la parte superior de la lista de contenido o proporcionar un estado de "cargando" claro.
Restricciones
- Accesibilidad: La paginación debe ser navegable por teclado y compatible con lectores de pantalla. Las etiquetas deben ser descriptivas (ej., "Ir a la página 5" en lugar de solo "5"). Los objetivos interactivos deben cumplir al menos con el mínimo de 24x24px de WCAG 2.2 (2.5.8), prefiriéndose 44x44px para los controles principales Anterior/Siguiente.
- Capacidad de respuesta: La barra de paginación nunca debe causar desbordamiento horizontal ni superponerse a otros elementos de la interfaz.
- Jerarquía visual: La paginación debe ser visualmente distinta del contenido, pero no más prominente que el contenido mismo.
Patrones de fallo comunes
- Objetivos táctiles pequeños: Números pequeños y agrupados que son imposibles de tocar con precisión en móvil.
- Estado activo invisible: Usuarios que no saben en qué página están porque el estilo "Activo" es demasiado sutil.
- Bucle de teclado roto: Olvidar manejar el foco cuando el contenido de la página se actualiza mediante AJAX (el usuario debe ser movido a la parte superior de los resultados).
- La "explosión móvil": Intentar mostrar 10 números de página en una pantalla móvil, causando desplazamiento horizontal o ruptura del diseño.
- Etiquetas vagas: Usar solo números sin
aria-labels, dificultando que los usuarios de lectores de pantalla comprendan el contexto.
Criterios de validación
- La página actual es visualmente distinta y tiene
aria-current="page". - La navegación está envuelta en un
<nav>con unaria-labeldescriptivo. - Los objetivos táctiles cumplen al menos con el mínimo de 24x24px de WCAG 2.2 (44x44px para los controles principales Anterior/Siguiente).
- Los estados deshabilitados (Anterior en página 1, Siguiente en última página) son claros y están definidos programáticamente.
- El comportamiento responsivo está definido (vista compacta para móvil).
- Los usuarios de teclado pueden navegar por toda la barra de paginación.
- Los puntos suspensivos se usan correctamente para rangos grandes.