- Accueil
- Design
- Composants
- Navigation
- Pagination
Pagination
La pagination est utilisée pour diviser le contenu ou les données en plusieurs pages. Elle permet à l’utilisateur de naviguer vers la page suivante ou précédente, ou de choisir une page environnante à la page en cours. Elle évite à l’utilisateur de se sentir dépassé par la quantité de contenu. Chaque clic doit rapprocher l’utilisateur de son objectif.
Exemple
Vue d’ensemble
Cette section offre un aperçu des contextes d’utilisation, de l’anatomie du composant et des contenus. Pour plus d’informations sur la composition, le comportement et les interactions, consulter l’onglet « Spécifications ».
Variantes disponibles
Ce composant se décline en trois variantes :
- Version numérique avec chevrons
- Version alphabétique
- Version condensée/mobile
Quand l’utiliser
Voici quelques situations qui requièrent l’utilisation d’une pagination :
- Lorsqu’une grande quantité de données est disponible et occasionne une surcharge cognitive chez les utilisateurs. Généralement, la pagination est utilisée s’il y a plus de dix éléments affichés dans une liste de données.
- Lorsque l’utilisateur doit pouvoir repérer les éléments paginés dans un ordre défini.
- Lorsque l’utilisateur recherche des informations plutôt que de balayer l’information du regard.
- Lorsque le temps de chargement du site est trop long, dû à une trop grande quantité d’éléments à charger.
- Lorsque le contenu occupe un trop grand espace dans l’écran.
La pagination est particulièrement utile dans certains contextes, tels que des listes de tableaux de données, des résultats de recherche et des répertoires.
Voici des indications sur les contextes d’utilisation selon les variantes :
- Version numérique avec chevrons : La pagination numérique avec chevrons est la version par défaut. Elle peut être utilisée autant en version bureau qu’en version mobile.
- Version alphabétique : La pagination alphabétique permet de trouver facilement un nom (de personne, d’entreprises, etc.) par son initiale. Elle est idéale pour les répertoires dont la quantité d’informations par page est limitée de douze à vingt éléments. Au-delà de cette quantité, la recherche et la pagination par défaut (numérique avec chevrons) sont plus efficaces.
- Version condensée/mobile : Dans le format mobile, il est possible d’utiliser la pagination condensée. Au lieu des boutons numérotés, un champ texte permet de saisir la page. Étant donné qu’il s’agit principalement de la version mobile de la pagination numérique avec chevrons, la pagination condensée est principalement utilisée lorsque l’espace en largeur est restreint.
Anatomie
- Chevron(s)
- Bouton numéroté
- Page en cours
- Troncature
- Mention « Aller à »
- Bouton alphabétique
- Champ texte de page en cours
- Nombre de pages au total
Contenus
Cette section définit les règles et contraintes sur les types de contenus (textuels, graphiques, interactifs, etc.) acceptés par chaque élément du composant.
Version numérique avec chevrons (complète)
En incluant les boutons numérotés, les boutons de chevrons et les troncatures, il devrait y avoir entre trois et onze éléments. En format mobile, il faut limiter le nombre d’éléments afin qu’ils soient disposés sur une seule ligne (cela veut dire sept éléments pour les écrans de 320 px ou huit éléments pour les écrans de 375 px et moins).
Il faut toujours afficher le premier et le dernier bouton de numéro de page.
Peu importe le nombre de pages, il est primordial que le premier et le dernier numéro de page soient montrés.
S’il n’y a qu’un petit nombre de pages (cinq pages et moins), tous les boutons de page doivent être affichés, sans troncature.
Troncature
La troncature utilise les points de suspension (…) et montre que plusieurs pages existent, mais que leur numéro de page n’est pas affiché.
La double troncature est utilisée lorsque la page actuelle est séparée par plusieurs pages de la première et de la dernière page.
Mention « Aller à »
En format bureau, les boutons alphabétiques sont précédés du libellé « Aller à » sur la même ligne. En anglais, le libellé est « Jump to ». En format mobile, si l’espace ne le permet pas, le libellé « Aller à » peut être placé par-dessus les boutons alphabétiques.
Bouton alphabétique
Les boutons pour accéder aux pages sont divisés de façon équivalente, par exemple : « A-E », « F-J », « K-O », « P-T » et « U-Z ».
Nombre de pages au total
La mention « sur X » indique le nombre total de pages.
Spécifications
Cette section présente des informations techniques sur la composition, les comportements fonctionnels et les interactions du composant. Les spécifications techniques détaillées sont disponibles dans les trousses de design.
Composition
Description détaillée des éléments constitutifs du composant, avec des informations précises sur son anatomie.
Pagination (complète)
Positionnement et alignement : Il est recommandé de centrer horizontalement la pagination dans la zone de contenu.
Bouton numéroté ou alphabétique
Dimensions : La largeur des boutons numérotés pourrait être plus large que 40 px si son numéro comporte plusieurs caractères (exemple : 1000).
Champ texte de page en cours
Dimensions : Le champ texte est juste assez large pour contenir le nombre de caractères nécessaire pour écrire le numéro de la dernière page (s’il y a 999 pages, le champ a la largeur pour 3 caractères).
Comportements
Description des interactions possibles avec les éléments du composant, y compris l’utilisation de la souris et du clavier pour naviguer et effectuer des actions.
Fonctionnel
Fonctionnalités principales et secondaires, ainsi que leur comportement et les actions qu’ils déclenchent.
Chevron(s)
Un clic sur le chevron de droite fait avancer d’une page, un clic sur le chevron de gauche fait reculer d’une page.
Le chevron de gauche n’est pas présent lorsque l’utilisateur est sur la première page. Celui de droite n’est pas présent lorsqu’il est sur la dernière page.
Bouton numéroté ou alphabétique
Charge directement la plage de résultats associée.
Page en cours
Ne déclenche aucune action si cliquée (déjà active).
Troncature
Les troncatures (points de suspension) ne sont pas cliquables.
Mention « Aller à »
En mobile, la mention « Aller à » peut se placer au-dessus par manque d’espace.
Champ texte de page en cours
Le champ texte permet de saisir directement le numéro de la page.
Interaction
Assistance sur la manière d’interagir avec le composant, que ce soit via la souris ou le clavier.
Souris
Instructions sur l’interaction avec le composant via la souris :
- Cliquer sur un chevron pour passer à la page précédente ou suivante.
- Cliquer sur un bouton numéroté pour accéder directement à la page correspondante.
- Cliquer sur un bouton alphabétique pour charger la plage de lettres correspondante.
- Dans la version condensée, cliquer dans le champ texte pour saisir un numéro, puis valider (ex. bouton d’action ou déclencheur contextuel).
Clavier
Instructions sur l’interaction avec le composant via le clavier :
- Tab/Shift+Tab : parcourir les éléments interactifs dans un ordre logique (chevron gauche → boutons de page → chevron droit → champ texte, le cas échéant).
- Entrée ou Espace : activer l’élément focalisé (chevron, bouton numéroté, bouton alphabétique).
- Flèche gauche/Flèche droite : déplacer le focus vers le bouton de page précédent/suivant au sein du groupe actif (numérique ou alphabétique).
- Home/End : déplacer le focus directement vers le premier/dernier bouton de page.
- Saisie numérique (version condensée) : entrer le numéro de page dans le champ ; Entrée valide et navigue si le numéro est compris entre 1 et X.
- Après navigation, le focus revient sur la page en cours correspondante pour préserver la continuité d’interaction.
Contribuer à améliorer le système de design
Pour nous assurer que cette page est utile et à jour, vous pouvez remplir le
- nous transmettre des questions ou commentaires sur le système de design ;
- être ajouté à la liste d'envoi du système de design ;
- faire une demande de trousse, d'information pour un nouveau projet, etc. ;
- rapporter un bogue dans le site Web ou dans la trousse de développement.
Dernière mise à jour : 7 octobre 2026