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: version numérique avec chevrons
Exemple: version alphabétique
Exemple: 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 10 é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, causé par 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.
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 12 à 20 é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.
Comment l’utiliser
Version numérique avec chevrons
La pagination est composée de chevrons pour naviguer en avant et en arrière, et de boutons de page numéroté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.
Il faut toujours afficher le premier et le dernier bouton de numéro de page. La page sur laquelle se trouve l'utilisateur doit être clairement identifiée en affichant le numéro de façon distincte. Peu importe le nombre de pages, il est primordial que le premier et le dernier numéro de page soient montrés.
La troncature utilise les points de suspension (...) et montre que plusieurs pages existent, mais que leur numéro de page n’est pas affiché. Les points de suspension ne sont pas cliquables. Lorsque le nombre de pages dépasse la limite d'affichage maximale, des points de suspension sont utilisés pour tronquer les pages restantes. 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.
Exemple (troncature simple et troncature double)
S'il n'y a qu'un petit nombre de pages (5 pages et moins), affichez tous les boutons de page sans troncature. En incluant les boutons numérotés, les boutons de chevrons et les troncatures, il devrait y avoir entre 3 et 11 éléments.
Si la version numérique avec chevrons est utilisée en mobile, il faut limiter le nombre d’éléments afin qu’ils soient disposés sur une seule ligne (cela veut dire 7 éléments pour les écrans de 320px ou 8 éléments pour les écrans de 375px et moins).
Exemple (minimum et maximum d’éléments)
Version 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 ».
Version condensée / mobile
É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.
Informations techniques
Positionnement
Il est recommandé de centrer horizontalement la pagination dans la zone de contenu.
Dimensions
Chaque bouton a une hauteur de 40 px.
Les boutons numérotés et les boutons de chevrons ont également une largeur de 40 px. La largeur des boutons numérotés pourrait être plus large que 40 px si son numéro comporte plusieurs caractères (exemple : 1000).
Les icônes de chevrons ont une hauteur de 16 px et une largeur de 9 px.
Les boutons alphabétiques ont la largeur définie par leur libellé et le dégagement intérieur prescrit ci-bas, mais doivent être d’une largeur minimale de 40 px.
Espacement
Chaque bouton numéroté et chaque bouton alphabétique sont affichés l’un à la suite de l’autre, sans aucun espace entre eux.
Dans la version alphabétique, l’espacement à droite de la mention « Aller à » est de 8 px.
Le même espacement de 8 px se trouve avant et après la mention « sur X » dans la version condensée / mobile.
Dégagement
Les numéros, les chevrons et les libellés alphabétiques sont centrés verticalement dans le bouton. Si les éléments sont à la bonne taille, le dégagement en haut et en bas se fait automatiquement.
Le dégagement intérieur des boutons est de 4 px à gauche et à droite du libellé.
Version numérique avec chevrons
Les troncatures (points de suspension) ne sont pas cliquables.
Lorsque vous êtes sur la première page, le chevron de gauche n’est pas présent. Lorsque vous êtes sur la dernière page, le chevron de droite n’est pas présent.
Version alphabétique
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.
Tous les boutons alphabétiques doivent être sur une même ligne.
Version condensée / mobile
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).
La mention « sur X » (où X est le numéro de la dernière page) est placée entre le champ texte et le groupe de boutons iconiques « Précédent » et « Suivant ». L’espacement à gauche et à droite de la mention « sur X » est de 8 px.
États
Les boutons numérotés, les boutons alphabétiques et les boutons de chevrons ont les mêmes états (à l'exception du bouton de chevron, qui n'a pas d'état sélectionné).
Les états par défaut et au focus du champ texte de la version condensée / mobile sont spécifiés dans la fiche Champ texte.
Exemple
CSS du bouton par défaut
font-family: Open Sans
font-weight: regular
font-size: 18px
line-height: 24px
font-color: #095797
background-color: transparent
CSS du bouton sélectionné
font-weight: bold
font-color: #223654
CSS du bouton au survol
background-color: #F1F1F2
CSS du bouton appuyé
background-color: #DAE6F0
CSS du bouton au focus
background-color: transparent
outline: 2px solid #4A98D9
Dernière mise à jour : 23 février 2023