Rédiger une liste à puces

Les listes à puces facilitent la lecture à l’écran. Mais encore faut-il bien les rédiger ! Voici quelques conseils tirés de ma propre expérience de la rédaction web, sous forme de FAQ (Foire Aux Questions).

1. Pourquoi créer une liste à puces ?

Depuis les études de eyetracking de l’ergonome Jakob Nielsen, on sait que la lecture à l’écran diffère de la lecture sur le papier. En effet l’internaute va plus balayer du regard un site web qu’il ne le lit vraiment. Il faut donc guider son oeil par des « aspérités » visuelles qui vont rythmer la page web : des intertitres, des mots en gras, des blocs citations, des images, des paragraphes non justifiés à droite, etc. Et des listes à puces, bien sûr.

Pour l’exemple, voici le même texte rédigé sans, puis avec une liste à puces :

En matière de loteries, jeux et concours, la loi du 21 mai 1836 interdit les loteries d’une manière générale dès lors que les quatre éléments suivants sont simultanément réunis : une offre au public, généralement une publicité ; l’espérance d’un gain ; l’intervention du hasard, fréquemment un tirage au sort ; un sacrifice pécuniaire du participant, même minime.

En matière de loteries, jeux et concours, la loi du 21 mai 1836 interdit les loteries d’une manière générale dès lors que les 4 éléments suivants sont simultanément réunis :

• Une offre au public, généralement une publicité
• L’espérance d’un gain
• L’intervention du hasard, fréquemment un tirage au sort
• Un sacrifice pécuniaire du participant, même minime

Si vous réagissez comme la majorité des internautes, le second texte devrait  vous sembler plus facile à survoler rapidement que le premier.

2. Combien d’items peut-on lister ?

En règle générale, les rédacteurs web conseillent de lister au moins 3 items (pour que la liste ait un sens) et de ne pas dépasser 5 ou 6 items (pour qu’elle reste lisible).

Tout dépend en fait de la longueur de vos items et de leur signification. Personnellement, il m’arrive d’en lister 2 seulement, s’il s’agit par exemple de présenter un plan en 2 parties très distinctes. Ou d’en lister plus de 6  si chaque item est suffisamment court pour ne pas dépasser une ligne.

Autrement dit, si vos items sont trop longs, mieux vaut opter pour des paragraphes séparés par un saut de ligne. D’autant plus que les feuilles de style des CMS (Content Management System) ne ménagent généralement pas de sauts de ligne entre les items, ce qui ne facilite pas la lecture de blocs trop longs.

3. Comment rendre une liste plus lisible ?

A mon avis, les 2 erreurs qu’on voit le plus fréquemment sont de lister des items trop longs (voir le point ci-dessus) et de répéter les mêmes mots au début de chaque item. Cette répétition inutile rend la lecture plus difficile car l’internaute est obligé de chercher l’élément nouveau dans chaque item. Ce qui annule l’effet visuel recherché par la liste !

Pour l’exemple, voici la même liste avec répétition, puis sans répétition en début d’item :

Liste des fiches produits de la gamme Abzac :

• Télécharger la fiche produit du fût kraft Standard en PDF
• Télécharger la fiche produit du fût kraft Abzalis en PDF
• Télécharger la fiche produit du fût kraft Abzaplus en PDF

Télécharger les fiches produits (PDF, 1 page) de la gamme de fûts kraft Abzac :

• Fût Standard
• Fût Abzalis
• Fût Abzaplus

4. Faut-il les numéroter ?

Il existe 2 types de listes à puces : ordonnées (ou numérotées) et non ordonnées. Dans le premier cas, les items (ou lignes) sont précédées d’un chiffre en ordre croissant, dans le second cas d’un simple signe (point, tiret, flèche, etc.) généré par la feuille de style du CMS (Content Management System).

Personnellement, j’utilise plus fréquemment les listes non numérotées (déformation littéraire ?), mais j’opte pour la liste numérotée dès lors qu’il y a une progression logique d’item en item (chronologique ou hiérarchique). Autrement dit que l’item 1 précède forcément l’item 2.

Il m’arrive aussi de recourir aux numéros quand l’introduction cite d’emblée le nombre d’items. Comme on aurait pu le faire dans l’exemple sur les loteries.

5. Où placer la liste à puces ?

La liste à puces a pour objectif de rythmer visuellement la page. Si vous en utilisez plusieurs dans la même page, il faut donc mieux les éloigner les unes des autres pour qu’elles restent efficaces. Trop de liste à puces tue la liste à puces !

Quand je rédige une page web, j’en utilise généralement une ou deux maximum dans le corps du texte et une à la fin. Cette liste finale me sert généralement à mettre en valeur des calls-to-action (ou appels à l’action) en direction de l’internaute : télécharger un document, aller sur une autre page du site, remplir un formulaire, voir un autre site complémentaire, etc.

6. Comment ponctuer une liste à puces ?

Faut-il ou non mettre une majuscule au début de chaque item ? Faut-il une virgule, un point-virgule, un point ou rien du tout à la fin de chaque item ? Toutes ces règles typographiques sont en général mal maîtrisées par les rédacteurs web (et papier !).

Que dit la Bible des typographes : Le Code typographique en usage à l’imprimerie nationale ? Théoriquement, la liste à puces est une phrase continue comme les autres, qui bénéficie simplement d’une mise en page particulière. Ce qui implique de ne pas placer de majuscule en tête d’item, de clore chaque  item par une virgule (ou un point-virgule si un des items contient déjà une virgule) et le dernier item par un point. Comme ci-dessous.

En matière de loteries, jeux et concours, la loi du 21 mai 1836 interdit les loteries d’une manière générale dès lors que les quatre éléments suivants sont simultanément réunis :

• une offre au public, généralement une publicité ;
• l’espérance d’un gain ;
• l’intervention du hasard, fréquemment un tirage au sort ;
• un sacrifice pécuniaire du participant, même minime.

Conçu pour l’imprimerie papier, ce code typo provoque 2 problèmes sur le web : d’abord il surcharge inutilement la lecture, ensuite il oblige à coder des espaces insécables avant les points-virgules pour empêcher qu’ils ne se baladent seuls en début de ligne suivante.

Personnellement, j’ai donc décidé de simplifier le code typo pour l’adapter au web. A Editoile, nous appliquons donc la règle suivante pour les listes à puces : une majuscule en début d’item et pas de ponctuation à la fin. Comme ci-dessous.

En matière de loteries, jeux et concours, la loi du 21 mai 1836 interdit les loteries d’une manière générale dès lors que les quatre éléments suivants sont simultanément réunis :

• Une offre au public, généralement une publicité
• L’espérance d’un gain
• L’intervention du hasard, fréquemment un tirage au sort
• Un sacrifice pécuniaire du participant, même minime

Pour ne pas l’oublier, cette règle maison est inscrite dans nos chartes éditoriales.

7. Comment ça se code en html ?

Les éditeurs intégrés dans les CMS (Content Management System) ont parfois du mal à comprendre ce que vous voulez faire de vos listes. Ils ont ainsi une fâcheuse tendance à ne jamais les clore, à transformer tous vos paragraphes en puces et à se perdre dès que vous créez un deuxième niveau à l’intérieur d’une liste…

Pour éviter de s’énerver, mieux vaut apprendre les 3 balises html qui régissent les listes à puces pour les coder directement dans le CMS :

• <ul> liste non ordonnée
• <ol> liste ordonnée (ou numérotée)
• <li> item

Ce qui donne pour notre exemple fétiche non ordonné :

<li>Une offre au public, généralement une publicité</li>
<li>L’espérance d’un gain</li>
<li>L’intervention du hasard, fréquemment un tirage au sort</li>
<li>Un sacrifice pécuniaire du participant, même minime</li>
</ul>

Et vous, comment utilisez-vous vos listes à puces ? Avez-vous des questions ou des cas particuliers à soumettre ?