Les formulaires et les barres de recherche
Un formulaire ou une barre de recherche contient généralement un ou plusieurs libellés (labels) associés à un champ de saisie ou de sélection. Dans ces champs, se trouve également un texte que l’on appelle « texte de remplacement » ou placeholder en anglais.
Illustration des composants textuels d’un formulaire - Cal.com
Les labels
Un label est un texte court qui vise à nommer le champ à remplir ou à saisir. En fonction du contexte et du style d’écriture de l’entreprise, il peut être descriptif du champ ou contenir une action pour compléter le champ.
Par exemple :
- « Adresse e-mail », « Titulaire de la carte », « Nombre de voyageurs », etc.
- « Sélectionnez un pays », « Indiquez un numéro de téléphone », etc.
Un label aide ainsi l’utilisateur ou l’utilisatrice à comprendre ce qui lui est demandé et à réaliser sa tâche. Tout en utilisant le moins de mots possible (idéalement, un seul mot).
✅ Exemple de labels dans un formulaire d’inscription - Ausha
La plateforme de podcasts Ausha a opté pour des labels ultra concis mais clairs pour la création d’un compte utilisateur. Notez que dans les champs, les placeholders ont été rédigés avec un peu d’humour (Thomas Pesquet est un spationaute français, NDLR).
⛔️ Exemple de labels dans un formulaire de cooptation - Trusty
Quoique clairs, les labels de Trusty alternent entre la concision (des labels courts, pour les deux premiers champs) et un côté plus conversationnel pour les champs suivants. Les deux premiers champs sont facilement lisibles, mais les suivants demandent un peu plus d’effort de lecture et de compréhension.
☝️ De plus, chaque champ est indiqué comme « Requis » — cela alourdit l’écran et ajoute une certaine charge mentale pour l’utilisateur·trice. Si la plupart des champs sont obligatoires, il serait préférable de mentionner ceux qui sont plutôt optionnels.
Les placeholders
Comme précisé plus haut, les placeholders sont de courts textes qui figurent dans un champ de saisie ou de sélection (comme c’est le cas dans un formulaire ou une barre de recherche) en attendant qu’il soit complété ou sélectionné par un utilisateur ou une utilisatrice. Généralement, la couleur du texte est plus claire pour signifier que la valeur n’est pas encore saisie. Ce texte disparaît ensuite pour laisser place à l’édition.
Les placeholders visent à faciliter la saisie ou la sélection par les utilisateurs et utilisatrices en leur indiquant comment faire, en leur montrer la voie.
Le placeholder peut :
- Décrire l’objet du champ à remplir ou à sélectionner, voire l’expliquer — mais attention à ce qu’il ne soit pas redondant avec le label
- Décrire l’action à réaliser — idem
- Donner un exemple de ce que doit écrire l’utilisateur·trice ou montrer le format attendu, quitte à parfois mettre plusieurs exemples pour favoriser l’identification
Le placeholder peut également être l’occasion de montrer le tone of voice de la marque/du produit, et particulièrement si la sympathie ou l’humour est la marque de fabrique.
Exemple de placeholder actionnable dans un champ de recherche - Twitter
Les paramètres de compte sont assez nombreux sur Twitter. Les utilisateurs et utilisatrices peuvent alors être amenés à écrire directement ce qu’ils ou elles cherchent dans la barre de recherche.
Exemples de placeholders descriptifs et dynamiques - Airbnb
Le placeholder devient un label lorsque l’utilisateur ou l’utilisatrice commence sa saisie, et se transforme pour donner un exemple précis du format attendu.
Exemple de placeholder qui guide avec une touche d’humour - Alan
Puisque Alan est une mutuelle, l’équipe design a joué la carte de la santé en donnant comme exemple l’adresse e-mail (fictive, bien sûr…) de Marie Curie (prix Nobel de chimie, NDLR).
- Un champ vide peut donner envie de le remplir. Toutefois, pour des questions d’accessibilité, un champ vide peut perdre certains utilisateurs ou utilisatrices qui utilisent des lecteurs d’écrans.
- Dans certains cas, une valeur par défaut peut être pré-sélectionnée. Ce n’est pas toujours une bonne pratique, mais elle peut être utile et plus rapide, d’autant plus si c’est l’option qu’aurait choisie un utilisateur.
- On est parfois tenté de répéter le label, toutefois, le placeholder vise à guider l’utilisateur·trice encore plus.
