Titres, descriptions, listes à puces

Les titres, descriptions et listes à puces sont des éléments essentiels pour dialoguer avec les utilisatrices et utilisateurs. Ils doivent toujours faciliter leur lecture et leur compréhension des informations.

Ces éléments reprennent en partie les règles de la microcopie. Ici, on liste leurs règles spécifiques.

Les titres

Les titres créent la conversation à travers des informations ou indications sur une marche à suivre. Voilà pourquoi ils doivent attirer le regard et exprimer clairement les objectifs.

On ponctue chaque titre avec une majuscule sur le premier mot et sans point final (sauf !, ?, ...)
On évite de dépasser 2 lignes en version mobile : on fait au plus court en supprimant les mots inutiles
On donne rapidement l’information et les objectifs de la page ou du parcours en diffusant un seul message, pas plus
On évite les titres génériques qui ne donnent aucune information
On évite les formules impératives : si possible, on privilégie la formulation interrogative ou l’infinitif
On privilégie des formulations cohérentes sur les titres d’une même page ou d’un même parcours
On peut utiliser “Mon/Ma/Mes” lorsqu’on parle d’une offre ou d’un équipement que l’utilisatrice ou l’utilisateur possède déjà ou qu’on décrit une action qui lui est propre

Les titres répondent à des typographies spécifiques : Titre 1/2 en Speak et Titre 1/2/3/4/5/6 en Read. Ces typographies dépendent :

Du support utilisé : web ou app
Du contexte de la page : titres de page, de section, autres titres (étapes, box, cards, steppers...)

Les titres de page

Web

On utilise le Titre 1 en Speak pour les titres de page web
On met 1 lettre penchée sur ces titres, 2 lettres penchées de suite sur les mots qui contiennent 2 lettres identiques de suite. Les lettres penchées autorisées : b, d, g, o, p, q
Ces titres doivent tout de suite faire comprendre l’objectif de la page ou du parcours

App

On utilise le Titre 2 en Speak pour les titres de page de l’app
On met 1 lettre penchée sur ces titres, 2 lettres penchées de suite sur les mots qui contiennent 2 lettres identiques de suite. Les lettres penchées autorisées : b, d, g, o, p, q.
Ces titres doivent tout de suite faire comprendre l’objectif de la page ou du parcours

Les titres de section

Web

On utilise le Titre 2 en Speak pour les titres de section web, excepté pour les titres annonçant des étapes dans la page ou le parcours
On met 1 lettre penchée sur ces titres, 2 lettres penchées de suite sur les mots qui contiennent 2 lettres identiques de suite. Les lettres penchées autorisées : b, d, g, o, p, q

App

On utilise le Titre 3 pour les titres de section de l’app

Les autres titres : étapes, box, cards, steppers...

Web

On utilise les Titres 3 à 6 en Read pour ces titres web généralement intégrés à des étapes sur une page, un bloc, une box, une card, un stepper...
Dans tous les cas, on ajuste toujours la taille des Titres selon leur importance dans la hiérarchie d’informations de la page ou du parcours
On utilise la typographie recommandée pour certains composants, comme les alertes (Body 1 Bold), spécifiée dans les composants

App

On utilise les Titres 4 à 6 en Read pour ces titres de l'app généralement intégrés à des étapes sur une page, un bloc, une box, une card, un stepper...
Dans tous les cas, on ajuste toujours la taille des Titres selon leur importance dans la hiérarchie d’informations de la page ou du parcours
On utilise la typographie recommandée pour certains composants, comme les alertes (Body 1 Bold), spécifiée dans les composants

Les descriptions

Les descriptions sont tous les paragraphes qui décrivent en détails les informations données par les titres. Elles attirent moins le regard de l’utilisateur. Voilà pourquoi il faut bien hiérarchiser leur contenu.

On ponctue chaque phrase avec une majuscule sur le premier mot et un point final (ou !, ?, ...)
On écrit toujours des descriptions claires, concises et utiles
On donne une idée par phrase, un message par paragraphe
On va de l’essentiel vers le plus spécifique. C’est le modèle de la pyramide inversée : on donne immédiatement l’information principale qu’on développe ensuite dans les détails
On peut mettre en gras certaines informations importantes, avec modération
On privilégie les listes à puces pour exprimer des idées complexes

Les listes à puces

Les listes à puces permettent d’exprimer plusieurs idées ou une idée complexe de façon claire et aérée. Ils attirent le regard et facilitent la lecture. Voilà pourquoi il faut les rédiger selon certaines règles.

On ponctue chaque phrase avec une majuscule sur le premier mot et un point final (ou !, ?, ...)
On peut utiliser des puces, mais aussi des chiffres, des icônes, des checkboxs ou encore des radio buttons
On les introduit avec un titre, une phrase ou un paragraphe
On utilise les mêmes formulations tout le long des listes à puces
On donne une idée par point
On privilégie les points avec une seule phrase