Les titres et les sous-titres
👉

Les titres et les sous-titres

← Revenir au cours

Les titres et les sous-titres

Les titres et sous-titres ont pour objectif de structurer l’information sur une page web ou sur un écran d’application.

Les titres

Un titre (aussi appelé header) correspond au texte qui figure en haut d’un écran ou d’une page.

Il a pour fonction :

  • De décrire l’objet principal de cet écran ou page
  • D’informer l’utilisateur sur l’action à réaliser ou l’information dont il doit prendre connaissance
  • De communiquer la valeur délivrée suite à l’action réalisée

Le tout, avec quelques mots seulement !

Les sous-titres

Un sous-titre (ou une description) complète le titre en apportant plus d’éléments de contexte sur l’action à réaliser ou l’information à prendre en compte. Il peut également guider l’action plus précisément, ou la décrire, en fonction du contexte.

Le but étant toujours d’aider l’utilisatrice à comprendre (l’enjeu, l’impact, comment ça fonctionne…) et à prendre une décision.

Un sous-titre ne doit pas répéter le titre, mais bien donner un complément d’information. D’ailleurs, s’il n’est pas nécessaire d’ajouter quoi ce que soit, il n’est pas nécessaire d’avoir un sous-titre. Dans ce cas-là, less is more*.

Exemples
  1. Articulation d’un titre et d’un sous-titre dans un empty state (état vide) sur l’espace Documents de Doctolib

Ici, le titre de l’empty state explicite de façon actionnable ce que l’utilisateur ou l’utilisatrice peut faire dans cet espace. Le sous-titre, quant à lui, donne un deuxième niveau de précision pour guider l’utilisation en expliquant quelles sous-actions sont réalisables. Il rassure également sur la sécurité liée à ces actions sensibles et à la protection des données.

☝️ Pour aller encore plus loin et ne laisser aucun doute, il pourrait être utile d’ajouter quelques exemples de document médicaux dans le texte.

image
  1. Articulation de titres et sous-titres - Google Slides

Ici, le titre fait un état des lieux et donne la solution à l’utilisatrice. Il ne laisse aucun doute sur le fait que l’accès à la page soit conditionné à une autorisation, et le sous-titre rappelle les possibilités pour obtenir l’autorisation d’accéder au fichier.

La formule < quoi + comment > fonctionne à merveille, et le texte du bouton call-to-action permet aussi de débloquer la situation sans l’aide du sous-titre.

☝️Un rappel du nom du fichier à l’aide d’une variable aurait pu être un plus… mais pour des raisons de confidentialité, il peut être bien de ne pas le mentionner. ⚖️

image
💡
Bien souvent, le titre a une taille de police grande et est en caractères gras. Il peut parfois être centré ou aligné à gauche. Le sous-titre peut avoir une taille de police spécifique, inférieur au titre, comme c’est le cas dans une page de site Internet, ou être similaire à la taille d’un texte classique, comme cela peut être le cas au sein d’une application.

*Le mieux est l’ennemi du bien.

← Revenir au cours