Rédiger une liste à puces sur un site web

Les listes à puces facilitent la lecture à l’écran quand on doit énumérer plusieurs points similaires dans un texte, qu’il s’agisse de liste ordonnée (numérotée) ou de liste non ordonnée (non numérotée). Mais encore faut-il bien les rédiger ! Voici 8 conseils tirés de ma propre expérience de la rédaction web, sous forme de FAQ (Foire Aux Questions) pour créer une liste à puce en ligne.

1. Pourquoi créer une liste à puces ?

Parce que c’est plus facile à lire pour les internautes et que Google en tient compte ! Cela favorise à la fois l’accessibilité de vos contenus web et leur référencement naturel ou SEO (Search Engine Optimization).

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 :

Sans 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.

Avec 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 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 que le premier. Et encore plus si vous lisez ce texte sur un écran de téléphone mobile.

Comme les internautes apprécient les listes à puces, Google aussi ! On remarque ainsi que le moteur de recherche affiche fréquemment des listes à puces numérotées dans les rich snippets qu’il insère parfois en haut des résultats naturels de recherche, par exemple pour des recettes de cuisine ou des tutoriels de bricolage.

2. Combien d’items peut-on lister ?

En règle générale, les listes d’énumération doivent contenir au moins 3 items ou puces (pour que la liste ait un sens) et ne pas dépasser 5 ou 6 items (pour qu’elle reste lisible).

Tout dépend en fait de la longueur de vos items ou objets énumérés 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 (par exemple s’il s’agit de longues phrases), mieux vaut opter pour des paragraphes séparés par un saut de ligne. D’autant plus que les feuilles de style CSS des CMS (Content Management System) comme WordPress ou Drupal 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 des premiers éléments, puis sans répétition en début d’item :

Liste à puces avec répétition

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

Liste à puces sans répétition

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 numéroter les listes à puces ?

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 dans la page web ?

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

Quand je rédige une page web de 300-400 mots, j’en utilise généralement une ou deux maximum dans le corps du texte et une à la fin. La première liste sert à mettre en valeur des informations. La seconde liste 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. Quelle ponctuation sur 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.

Pour le print

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 un site Web : d’abord il surcharge inutilement la lecture, ensuite il oblige à coder en html 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 français pour l’adapter au Web, comme le font les Anglais ou les Américains. 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 :

Pour le Web

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 :

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

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

7. Comment coder une liste à puce en html ?

Certes vous pouvez utiliser l’éditeur de texte intégré dans  votre CMS (Content Management System), mais ces derniers ont parfois du mal à comprendre ce que vous voulez faire de vos listes. Ainsi WordPress a une fâcheuse tendance à ne pas vouloir clore les listes créées dans l’onglet « Visuel », à 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 en cliquant sur l’onglet « Texte » dans WordPress :

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

Ce qui donne pour notre exemple fétiche :

Liste non ordonnée (non numérotée)

<ul>
<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>

Liste ordonnée (numérotée)

<ol>
<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>
</ol>

Une fois que vous aurez codé vos listes en <ol> ou <ul> dans la page, c’est le fichier CSS qui gère les styles de votre site que se chargera tout seul de la mettre en page : taille, couleur, police, forme de la puce ou bullet point (point, tiret, carré, étoile, etc.). Il est déconseillé de « forcer » la mise en page via l’éditeur pour conserver la cohérence de la mise en page sur tout le site et surtout éviter d’avoir peut-être à les recoder à la main page par page si vous changez un jour d’avis…

8. Peut-on imbriquer des listes à puces ?

Oui, il est possible de créer des listes imbriquées à l’intérieur d’une autre liste, mais personnellement, j’évite car cela est souvent difficile à lire.

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

Si vous cherchez des conseils en rédaction web, je vous conseille d’autres articles à lire sur ce blog (un bel exemple de liste à puces finale d’appel à l’action dont je vous parlais plus haut !) :

• 10 astuces pour écrire plus simplement
• Réécrire un texte pour le Web
• Concevoir un gabarit éditorial pour rédiger un site web