Système de Pagination

Que fait Système de Pagination ?

Objectif

La compétence Système de Pagination fournit une méthodologie pour concevoir l'interface qui divise les grands ensembles de données en pages discrètes. Elle garantit que les utilisateurs peuvent parcourir de longues listes d'articles (produits, résultats de recherche, articles) tout en maintenant une perception claire de "où ils se trouvent" et "combien de contenu reste". Un système de pagination robuste équilibre la précision de navigation avec la simplicité, minimisant la charge cognitive et prévenant la désorientation.

Cas d'utilisation

• Concevoir des pages de résultats de recherche pour des sites e-commerce ou des annuaires.
• Organiser de longues archives de blogs ou de nouvelles.
• Implémenter "Charger plus" vs. la pagination numérotée traditionnelle pour des hubs de contenu.
• Créer une navigation pour des tableaux de données ou des journaux riches en données.
• Optimiser des formulaires multi-pages ou des assistants pas à pas où des sections individuelles sont traitées comme des vues distinctes.

Quand NE PAS utiliser

• Petits ensembles de données (<12 articles) : Si tout le contenu tient confortablement sur un ou deux écrans, la pagination ajoute des clics et une friction inutiles.
• Contextes de défilement infini : Là où l'utilisateur explore des flux sociaux ou de nouvelles axés sur la découverte où les adresses de page spécifiques ne sont pas importantes (utiliser plutôt infinite-scroll-implementation).
• Contenu narratif unique : Pour des articles ou des histoires qui suivent un flux linéaire où les liens "Précédent/Suivant" suffisent.

Entrées

1. Nombre total d'articles : Combien d'articles total y a-t-il dans la collection ?
2. Articles par page : Quelle est la densité standard (par exemple, 12, 24, 48 articles) ?
3. Contexte de la page courante : Quelle page l'utilisateur consulte-t-il actuellement ?
4. Contraintes d'affichage : Combien d'espace horizontal est disponible pour la barre de pagination (depuis responsive-grid-system) ?

Sorties

1. Spécification de l'anatomie de la pagination : Styles visuels définis pour les numéros de page, les boutons Précédent/Suivant et les contrôles "Saut" (points de suspension).
2. Matrice d'états : Traitements visuels pour les états Par défaut, Courant, Survol, Focus et Désactivé (par exemple, bouton "Précédent" à la Page 1).
3. Stratégie responsive : Plan pour la façon dont la barre de pagination se réduit du Bureau (plage complète) au Mobile (vue compacte).
4. Carte d'accessibilité : Définitions explicites des rôles ARIA, des étiquettes et des modèles d'interaction au clavier.

Workflow

1. Définir la stratégie de plage

Déterminer combien de numéros de page afficher à la fois en fonction du volume total :

• Simple (3-5 pages) : Afficher tous les numéros de page.
• Modéré (6-10 pages) : Afficher la première, la dernière et une fenêtre autour de la page courante.
• Complexe (10+ pages) : Utiliser des points de suspension (...) pour représenter les plages ignorées (par exemple, 1 ... 4 5 6 ... 20).

2. Concevoir les contrôles de navigation

Établir la hiérarchie visuelle de la barre de pagination :

• Actions primaires : Les boutons Précédent et Suivant doivent être clairement visibles et situés aux extrémités de la barre.
• Indicateur de page courante : Utiliser un style à contraste élevé (couleur de fond ou bordure épaisse) pour rendre la page courante immédiatement évidente.
• Numéros de page : S'assurer qu'ils ressemblent à des éléments interactifs (par exemple, en utilisant le interactive-state-system).

3. Appliquer un espacement et un dimensionnement fluides

Utiliser le fluid-spacing-system pour garantir que les cibles sont utilisables :

• Cibles tactiles : Chaque numéro de page et bouton doit mesurer au moins 44x44 px ; si la densité visuelle nécessite des contrôles plus petits, la norme WCAG 2.2 (2.5.8 Taille minimale des cibles) fixe un seuil absolu de 24x24 px avec un espacement adéquat entre les cibles pour éviter les activations accidentelles.
• Écarts internes : Utiliser un espacement cohérent (par exemple, --space-xs) entre les numéros de page pour éviter les clics erronés.

4. Établir l'accessibilité (WCAG AA/AAA)

• Point de repère : Envelopper la pagination dans un élément <nav> avec aria-label="pagination".
• Page courante : Utiliser aria-current="page" sur le lien de la page active.
• États désactivés : S'assurer que le bouton "Précédent" est visuellement et programmatiquement désactivé (par exemple, aria-disabled="true") lorsqu'il est sur la première page.
• Parcours clavier : Les utilisateurs doivent pouvoir naviguer avec Tab à travers chaque numéro de page et contrôle, et le contrôle focalisé ne doit jamais être complètement caché par des en-têtes/pieds de page collants (WCAG 2.2, 2.4.11 Focus non masqué).

5. Planifier les adaptations responsive

Cartographier la transition du bureau au mobile :

• La règle de réduction : Sur mobile, masquer la plupart des numéros de page et n'afficher que "Précédent", "Suivant" et le statut courant (par exemple, "Page 4 sur 20").
• Échelle visuelle : Si les numéros de page doivent rester, réduire la "fenêtre" à la page courante et à ses voisins immédiats (par exemple, 1 ... 4 ... 20).

Règles de décision

• Numéros vs. Charger plus : Utiliser des numéros lorsque les utilisateurs ont besoin de mettre en favori ou de partager des résultats spécifiques (par exemple, "Voir page 4"). Utiliser "Charger plus" lorsque l'objectif est une découverte et une comparaison prolongées.
• Le maximum "7 articles" : Sur bureau, éviter d'afficher plus de 7 à 9 articles dans la barre de pagination (y compris les points de suspension et les boutons) pour garder la mise en page propre.
• Prévisibilité : Toujours garder "Précédent" à gauche et "Suivant" à droite. Ne jamais masquer ces boutons ; les désactiver simplement lorsqu'ils ne sont pas applicables.
• Retour immédiat : Cliquer sur un numéro de page doit immédiatement faire défiler l'utilisateur vers le haut de la liste de contenu ou fournir un état de "chargement" clair.

Contraintes

• Accessibilité : La pagination doit être navigable au clavier et compatible avec les lecteurs d'écran. Les étiquettes doivent être descriptives (par exemple, "Aller à la page 5" au lieu de simplement "5"). Les cibles interactives doivent respecter au moins le minimum de 24x24 px de la WCAG 2.2 (2.5.8), avec 44x44 px préféré pour les contrôles primaires Précédent/Suivant.
• Responsivité : La barre de pagination ne doit jamais provoquer de débordement horizontal ni chevaucher d'autres éléments de l'interface utilisateur.
• Hiérarchie visuelle : La pagination doit être visuellement distincte du contenu mais pas plus proéminente que le contenu lui-même.

Schémas d'échec courants

• Cibles tactiles minuscules : Petits numéros regroupés impossibles à taper avec précision sur mobile.
• État actif invisible : Les utilisateurs ne savent pas sur quelle page ils se trouvent car le style "Actif" est trop subtil.
• Boucle clavier cassée : Oublier de gérer le focus lorsque le contenu de la page est mis à jour via AJAX (l'utilisateur doit être déplacé vers le haut des résultats).
• "L'explosion mobile" : Essayer d'afficher 10 numéros de page sur un écran mobile, provoquant un défilement horizontal ou une rupture de mise en page.
• Étiquettes vagues : Utiliser uniquement des numéros sans aria-labels, rendant difficile pour les utilisateurs de lecteurs d'écran de comprendre le contexte.

Critères de validation

• La page courante est visuellement distincte et possède aria-current="page".
• La navigation est enveloppée dans un <nav> avec un aria-label descriptif.
• Les cibles tactiles respectent au moins le minimum de 24x24 px de la WCAG 2.2 (44x44 px pour les contrôles primaires Précédent/Suivant).
• Les états désactivés (Précédent à la Page 1, Suivant à la Dernière Page) sont clairs et définis programmatiquement.
• Le comportement responsive est défini (vue compacte pour mobile).
• Les utilisateurs au clavier peuvent naviguer dans toute la barre de pagination.
• Les points de suspension sont utilisés correctement pour les grandes plages.