Liste
La liste à puces, ou énumération verticale, permet de balayer rapidement l’information et facilite la lecture lorsqu’elle est bien utilisée.
Même si une liste à puces occupe plus d'espace vertical dans l'écran, les utilisateurs n'hésitent pas à faire défiler le contenu s’ils sentent qu'ils obtiennent des informations importantes.
Exemple
Quand l’utiliser
La liste sert à mettre en valeur des informations prioritaires et importantes.
Il faut limiter son utilisation : la page contient principalement du texte et non des listes.
L’énumération qui contient moins de 3 éléments est généralement excessive et fonctionne mieux lorsqu’elle est intégrée dans une phrase.
Si des éléments de la liste contiennent plusieurs phrases, le contenu doit aussi être présenté à l’aide de phrases ou de paragraphes.
Comment l’utiliser
Prévoir une introduction pour chaque liste
Une bonne liste est toujours introduite par une phrase claire et descriptive qui permet à l’utilisateur de savoir pourquoi l’information est importante.
Les niveaux de titres ne sont pas des introductions.
À faire
À ne pas faire
Être concis
La liste contient de 3 à 7 éléments concis (maximum 1 ou 2 phrases).
Les lignes devraient être environ de la même longueur.
Uniformiser les éléments
Tous les éléments de la liste suivent la même logique.
Le début de chaque élément est uniforme. Par exemple, si le premier mot du premier élément est un verbe impératif, les autres éléments débutent aussi par un verbe impératif.
Il est recommandé de placer les mots-clés pertinents au début de chaque élément.
Typographie
La mise en forme de la liste varie selon ses éléments. À noter que le texte est toujours en romain dans une liste, car les puces (ou autres marqueurs visuels) font déjà fonction de mise en évidence.
Éléments courts
Si les éléments sont courts, la liste est présentée comme suit.
À faire
Phrases autonomes
Si les éléments sont des phrases autonomes, la liste est présentée comme suit.
À faire
Phrase complète
Si les éléments font partie de la structure normale de la phrase, la liste est présentée comme suit.
À faire
Listes imbriquées
Les listes imbriquées sont à éviter puisqu’elles sont difficiles à suivre. Un deuxième niveau peut être utilisé dans de rares cas.
La plupart du temps, on peut remonter la liste d’un niveau en apportant des modifications mineures au contenu.
Exemple d'une liste imbriquée
Exemple
Exemple de la même liste, une fois modifiée
Puces décoratives
Les puces dites décoratives sont ajoutées devant des éléments qui ne font pas partie d’une liste. L’utilisation de la puce n’est pas justifiée lorsque les hyperliens servent déjà de mise en évidence et qu’il ne s’agit pas d’une énumération.
À ne pas faire
Informations techniques
Les éléments de premier niveau sont précédés de puces pleines, et les éléments de second niveau, de puces vides.
Exemple
Un dégagement de 8 px se trouve entre la puce et son contenu. Une puce de second niveau comporte une indentation de 8 px.
Les éléments de listes ont un dégagement de 16px entre eux.
Les puces ont un diamètre de 6px.
CSS du contenu
Color : #223654
Font-family : Open Sans
Font-size : 1rem
Line-height : 1.5
