Communications numériques gouvernementales Beta

Système de design gouvernemental

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

Dernière mise à jour : 28 juillet 2020