Recommandation : Affichez la plage exacte en haut, par exemple 1–20 sur 350 éléments, et permettez aux utilisateurs d’ajuster la taille de la page à 10, 20 ou 50 en un seul clic. Cette approche, d’un point de vue UX, réduit la confusion et améliore généralement l’achèvement des tâches, ce qui constitue un gain significatif pour la plupart des utilisateurs.

Utilisez un préfixe prévisible comme plage et total pour communiquer la progression. Un motif typique est 1–20 sur 350, mis à jour en temps réel si l’ensemble de données change. Cette approche maintient les utilisateurs directement informés et réduit les erreurs d’interprétation, ce qui renforce la confiance dans l’interface. Elle réduit également le temps d’attente du contenu, en particulier sur les connexions plus lentes. Les décisions doivent être testées et ajustées en conséquence.

Fournissez des contrôles directs : premier, précédent, suivant, dernier, et un champ pour accéder à une page spécifique. Un curseur compact permet de se déplacer rapidement vers une page cible, et une piste de numéros de page visible aide les utilisateurs à comprendre où ils se trouvent dans la liste. La solution doit redonner le focus à la liste après un changement de page pour maintenir le contexte, et le motif choisi dépendra de votre politique et de votre public.

Accessibilité et politique : assurez la opérabilité au clavier et les étiquettes pour lecteurs d’écran ; annoncez les mises à jour de statut via des régions actives. Certains utilisateurs dépendant des technologies d’assistance, cette politique prime sur l’esthétique. Spécifiquement, fournissez des attributs ARIA pour les rôles et les régions actives afin que les utilisateurs obtiennent un retour d’information sans délai. Lorsque les utilisateurs savent exactement où ils en sont, ils se sentent plus confiants et moins dépassés ; c’est particulièrement important lorsque l’ensemble de données est volumineux et provient d’une connexion mobile.

Considérations de performance : récupérez les pages à l’avance ou appliquez un chargement virtuel léger pour minimiser les redessins. Si vous supprimez des éléments obsolètes de la vue, l’utilisation de la mémoire diminue et la vitesse perçue augmente. Généralement, la pré-récupération de la page suivante donne une transition transparente ; si les données sont lourdes, supprimez le contenu non essentiel jusqu’à ce que la page soit prête. Certaines équipes n’ont pas implémenté d’options accessibles complètes, mais l’idée principale reste de maintenir un flux fluide pour la plupart des utilisateurs.

Liste de contrôle d’implémentation : définissez une politique claire, respectez les préférences de l’utilisateur pour la taille de la page et proposez une solution de secours comme une option Charger plus si approprié. Certaines équipes n’ont pas implémenté d’options accessibles complètes, mais une approche réfléchie donne généralement une meilleure expérience. Le résultat probable est un engagement et une satisfaction accrus, avec une diminution mesurable des recherches abandonnées et du temps passé à attendre.

Motifs de pagination et règles pratiques pour les listes

Il y a une règle simple : pour les listes de moins de 100 éléments, utilisez 20 éléments par page ; pour les catalogues plus grands, proposez des options de 40 ou 60 éléments et affichez un nombre total de pages clair ; un catalogue de 3 500 éléments nécessiterait environ 59 pages à 60 éléments par page ou 88 pages à 40 éléments par page.

Trois approches principales offrent une navigation prévisible : un navigateur numéroté traditionnel avec un index de page visible et un sélecteur par page ; un contrôle compact suivant/précédent associé à un menu déroulant de pages ; et une méthode de chargement progressive qui révèle plus d’éléments à la demande tout en affichant un total et une fin explicite.

Règles de fiabilité : maintenez la cohérence des options par page entre les sections ; étiquetez les contrôles avec des chiffres explicites (20, 40, 60) ; assurez le focus clavier et les étiquettes pour lecteurs d’écran ; sur iPhone et autres appareils mobiles, ciblez des zones tactiles d’au moins 44 px et évitez les changements de mise en page lors du changement de page ; soyez prudent avec le contenu dynamique qui se remodifie.

L’alignement de la politique est important pour chaque liste d’interface utilisateur ; les membres, les familles et les utilisateurs uniques devraient ressentir du bien-être lors de la navigation. Sur les marchés avec des appareils divers (y compris l’iPhone), fournissez des contrôles clairs par page et des éléments nommés afin que les utilisateurs puissent collecter leurs propres données. Si du contenu comme des enlèvements apparaît, filtrez-le et enregistrez les rapports envoyés. Les réflexions des utilisateurs aident à accroître la confiance ; le reste de l’interface doit rester stable, nos utilisateurs ne sont-ils pas désorientés par des changements soudains ? Ils ne le sont pas si vous testez d’année en année et maintenez des frais généraux financiers prévisibles. Des harnais de test alpins sur le porche fournissent des signaux du monde réel.

Afficher les comptes exacts avec un formatage cohérent X sur Y

Affichez les comptes exacts au format X sur Y dans une position fixe et avec une typographie cohérente sur toutes les vues. L’utilisation d’un bloc unique et prévisible améliore la clarté pour les autres ; ils sont plus confiants quant à l’endroit où chercher après un filtre ou un événement. Des ensembles de données plus importants amplifient le besoin de comptes exacts ; cette approche est vraiment meilleure pour la confiance et l’apprentissage. Sachez quand actualiser les chiffres une fois le chargement des données terminé, afin que l’utilisateur voie une valeur stable plutôt qu’un scintillement.

Règles de formatage : X et Y sont des entiers ; alignez sur la même largeur ; utilisez des séparateurs de milliers ; conservez un simple espace autour du mot « sur » et maintenez un alignement de ligne de base fixe. Cela minimise les changements de mise en page et rend le comptage plus facile à parcourir, réduisant la charge cognitive pour les mineurs et les utilisateurs plus âgés. Un petit signe ou une icône peut accompagner le nombre pour signaler les mises à jour sans distraire de la valeur principale.

Accessibilité et fiabilité : fournissez une étiquette aria-live polite comme « Nombre actuel : X sur Y éléments » et assurez un contraste élevé pour la lisibilité. Lorsque les données sont en cours de chargement, affichez un état squelette mais révélez les nombres exacts une fois l’événement terminé ; si le total n’était pas connu, laissez le placeholder visible jusqu’à ce que le vrai total soit disponible. Cette approche est accessible aux technologies d’assistance et appréciée par les utilisateurs qui ont besoin d’indications précises sur la progression.

Exemples et impact : les tableaux de bord de tickets affichent souvent 23 sur 500, ce qui est plus facile à suivre lors d’événements ; les analyses de bureau montrent 1 204 sur 1 204 lorsque des étapes sont franchies, et la clarté soutient l’apprentissage dans les ventilations par année de naissance ou quartier sans nuire à la lisibilité. Après avoir mis en œuvre cette approche, les utilisateurs signalent moins de confusion, ils connaissent leur position dans l’ensemble et l’expérience semble plus cohérente et digne de confiance.

Choisir le motif de pagination par contexte : numérotée, suivant/précédent, ou défilement infini

good Choisissez la navigation numérotée pour les catalogues où les utilisateurs ont besoin d’atterrir sur une page précise et de suivre leur position après les filtres. Recommandez 10 à 40 éléments par page et 5 à 7 liens de page visibles pour soutenir la mémoire et la recherche rapide. Les signaux envoyés sont clairs : les utilisateurs peuvent sauter, en avant et en arrière en toute confiance, et le nombre total de pages est disponible sur le site web. Il y a un besoin majeur d’atterrir précisément et de se souvenir de l’emplacement lorsque les filtres changent, ce qui rend ce motif robuste pour les porteurs de données et le contenu stable qui peut être identifié publiquement et parcouru rapidement. Ce motif aide à montrer la position et ce qui vient ensuite.

Suivant/Précédent convient aux tâches séquentielles, aux petits catalogues ou aux articles lorsque l’atterrissage au milieu est moins essentiel. Il maintient une interface épurée, prend en charge la navigation au clavier et réduit la