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é entre le champ texte et le groupe de boutons iconiques « Précédent » et « Suivant ». L’espacement entre à 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 : 21 décembre 2022