Votre visiteur parcourt votre formulaire en deux secondes avant de taper le moindre caractère. Il lit la taille des champs, l'espacement, la mise en page. Un champ de code postal aussi large que tout le formulaire crie la confusion. Un champ de texte d'une seule ligne pour un avis détaillé envoie le message que vous n'attendez pas grand-chose.
La largeur de votre champ indique à l'utilisateur la quantité de texte que vous attendez. Une toute petite case dit « donnez-moi votre nom ». Une grande zone de texte dit « racontez-moi votre histoire ». Si vous vous trompez, vous provoquez de la confusion, de l'effort de saisie et des abandons.
Votre formulaire contient deux types de champs de texte : le champ sur une seule ligne et la zone de texte sur plusieurs lignes. Ils ont un aspect différent, se comportent différemment et résolvent des problèmes différents. Choisir le bon n'est pas compliqué, mais cela influence la perception de votre formulaire et la décision de le remplir.
Qu'est-ce qu'un champ de saisie de texte
Un champ de saisie de texte est une case d'une seule ligne où l'utilisateur tape un texte court. Il ne passe pas à la ligne quand on atteint le bord. Il ne gère pas plusieurs paragraphes. Quand on appuie sur Entrée, le formulaire est envoyé (ou passe au champ suivant). Il est conçu pour des données brèves et limitées.
Un champ de saisie de texte établit un contrat mental avec l'utilisateur. Vous demandez quelque chose de rapide. Un nom. Un e-mail. Un code postal. Une date. Une seule information.
Qu'est-ce qu'une zone de texte
Une zone de texte (textarea) est une case multiligne qui s'agrandit pendant la saisie. Quand on appuie sur Entrée, on obtient une nouvelle ligne. Elle défile verticalement quand le contenu dépasse la zone visible. Elle signale à l'utilisateur que vous attendez plus que quelques mots. Les paragraphes sont les bienvenus. Les réflexions détaillées sont attendues.
Une zone de texte lève la contrainte. L'utilisateur sait qu'il peut écrire autant qu'il le faut sans entasser sa réponse sur une seule ligne.
Quand utiliser un champ de saisie sur une seule ligne
Utilisez un champ de saisie quand la réponse attendue tient sur une ligne et que l'utilisateur peut répondre en quelques mots ou moins.
Coordonnées
Nom, e-mail, numéro de téléphone. Ces champs sont toujours des champs sur une ligne. L'utilisateur s'attend à taper un nom et passer à la suite, pas à ouvrir un éditeur de texte pour son numéro de téléphone.
Identifiants courts
Nom d'utilisateur, numéro de compte, code postal, mot de passe. Ils ont une longueur définie ou doivent rester brefs. Un champ sur une ligne est logique.
Champs de lieu et de logistique
Ville, état, pays, adresse (première ligne). Ce sont généralement des saisies sur une ligne. Vous pouvez découper l'adresse en plusieurs champs d'une ligne plutôt qu'utiliser une grande zone de texte.
Recherche et filtres
Barres de recherche. Filtres de produits. Plages de dates. Ils attendent une saisie rapide, pas un paragraphe. Les champs sur une ligne sont adaptés.
Dates et nombres
Tout champ où l'utilisateur saisit une date, une heure, une quantité ou un prix précis. Champ sur une ligne. Parfois, vous voudrez un type de champ spécialisé pour les dates (comme un sélecteur de date), mais le mode d'interaction reste sur une ligne.
Quand utiliser une zone de texte
Utilisez une zone de texte quand vous attendez de l'utilisateur plus d'une phrase ou quand la réponse est naturellement plus longue qu'une ligne.
Commentaires et avis
Si vous demandez « Quel est votre avis ? », l'utilisateur pense en paragraphes, pas en mots isolés. Une zone de texte indique qu'il y a de la place pour sa pensée entière. Il ne se sentira pas à l'étroit.
Formulaires de message et de demande
Quand un visiteur remplit un formulaire de contact avec un champ de message, il a besoin de place pour expliquer sa situation. La quantité de texte varie beaucoup. Une zone de texte convient aussi bien à une question rapide en deux phrases qu'à une demande détaillée de deux paragraphes.
Champs de description et de détails
Descriptions de produit, cahiers des charges, besoins de service. Tout champ qui demande du contexte ou des détails. Une zone de texte invite à ces détails.
Notes et instructions particulières
Un champ qui dit « Ajoutez vos demandes particulières » ou « Une remarque pour la livraison ? » demande souvent une zone de texte, car on ne peut pas prévoir si l'utilisateur a deux mots ou deux paragraphes à ajouter.
Le principe de taille : la largeur du champ indique la longueur attendue
La taille de votre champ envoie un message avant que l'utilisateur ne tape quoi que ce soit. Un champ de code postal qui occupe toute la largeur du formulaire crée de la confusion. L'utilisateur voit tout cet espace et se demande « ai-je mal compris ce qu'on me demande ? »
Appliquez cette règle : la taille visuelle du champ doit correspondre à la longueur attendue de la réponse.
Champs de saisie courts
Pour un code postal, faites un champ étroit. Peut-être 80 à 120 pixels de large sur ordinateur. Ce signal visuel dit à l'utilisateur « tapez cinq chiffres, pas un paragraphe ».
Pour un champ de nom, utilisez une largeur moyenne. Peut-être 200 à 300 pixels. Assez long pour « Alexander Thompson » mais pas assez large pour inviter à écrire une biographie.
Zones de texte
Les zones de texte s'étendent en largeur et en hauteur. Une zone de quatre lignes de haut signale une réponse plus longue qu'une zone de deux lignes. Faites correspondre la taille de la zone à l'effort attendu.
Si vous attendez quelques phrases, commencez avec trois à cinq lignes visibles. Si vous demandez un avis détaillé, commencez avec six à huit lignes. Les utilisateurs peuvent redimensionner le champ s'ils ont besoin de plus de place, mais la taille initiale fixe leur attente.
Règles de design pour les champs de saisie
Associez toujours un libellé
N'utilisez jamais le texte indicatif à la place d'un libellé visible. Le texte indicatif disparaît quand l'utilisateur commence à écrire, ce qui nuit à l'accessibilité et le laisse deviner ce que le champ voulait. Utilisez un libellé clair au-dessus ou à côté du champ, et n'utilisez le texte indicatif que comme un discret indice.
Mauvais exemple : un champ sans libellé, juste un texte indicatif gris « Saisissez votre nom ».
Bon exemple : un libellé « Nom » au-dessus du champ, avec un texte indicatif facultatif comme « Jean Dupont ».
Signalez clairement les champs obligatoires
Marquez les champs obligatoires avec un astérisque (*) ou le mot « (obligatoire) » entre parenthèses. Ne laissez pas les utilisateurs deviner si un champ est facultatif.
Validez tôt, corrigez en douceur
Si un utilisateur saisit une adresse e-mail invalide ou un numéro de téléphone mal formaté, n'effacez pas sa saisie. Affichez un message d'erreur qui explique précisément le problème, et gardez sa saisie partielle pour qu'il la corrige au lieu de tout retaper.
Prenez en charge le type de saisie attendu
Pour l'e-mail, utilisez type="email" afin que les utilisateurs mobiles aient un clavier adapté. Pour le téléphone, utilisez type="tel". Pour les nombres, utilisez type="number". Ces types de champs spécialisés améliorent l'expérience mobile sans travail supplémentaire de votre côté.
Règles de design pour les zones de texte
Laissez la zone de texte grandir avec le contenu
Si un utilisateur écrit un long message et que la zone garde une taille fixe, il doit faire défiler dans le champ pendant qu'il écrit. Cela casse l'expérience d'écriture. Utilisez du CSS ou du JavaScript pour que la zone s'agrandisse automatiquement quand l'utilisateur ajoute des lignes. Il écrit naturellement, le champ grandit, sans défilement dans le champ lui-même.
Montrez clairement la taille initiale
Une zone de texte doit avoir assez de hauteur visible pour signaler que vous attendez plus qu'une ligne. Montrez au moins trois à cinq lignes vides pour que les utilisateurs comprennent que ce n'est pas un champ d'une ligne.
Fixez une limite de caractères raisonnable si nécessaire
Certaines zones de texte ont des limites. Un formulaire de support client peut limiter les avis à 5 000 caractères. Si vous avez une limite, affichez le nombre de caractères restants pendant la saisie. Laissez les utilisateurs voir la place qui leur reste, sans la découvrir en butant dessus.
Utilisez une police à chasse fixe pour le code ou les saisies techniques
Si la zone de texte sert à des extraits de code ou à des données techniques, utilisez une police à chasse fixe pour que l'espacement et l'alignement comptent visuellement. Pour du texte ordinaire comme des messages ou des avis, utilisez la police sans empattement par défaut, en accord avec votre marque.
Erreurs courantes avec les champs de saisie
Donner la même largeur à tous les champs de texte
Si tous les champs de votre formulaire ont la même largeur, vous perdez le signal visuel sur la longueur attendue. Un champ de code postal ne doit pas être aussi large qu'un champ de nom. Laissez la taille exprimer l'attente.
Utiliser le texte indicatif à la place des libellés
C'est mentionné plus haut, mais c'est capital. Le texte indicatif aide comme indice, pas comme libellé. Un utilisateur de lecteur d'écran ne verra pas le texte indicatif. Un utilisateur qui a rempli quelques champs et qui revient oubliera ce que le champ demandait.
Ne pas afficher les erreurs de validation en contexte
Si l'utilisateur tape un e-mail invalide et que le message d'erreur apparaît en haut du formulaire alors que le champ e-mail est en bas, il doit faire défiler pour trouver le problème. Gardez les messages d'erreur près du champ concerné, en couleur (rouge ou orange) avec une icône qui signale que « quelque chose ne va pas ».
Ne pas permettre d'annuler un effacement
Si l'utilisateur efface un champ par accident, ou si le formulaire a un bouton « Effacer » qui vide tout, assurez-vous qu'il peut annuler cette action. Un seul toucher ne doit pas détruire cinq minutes de saisie.
Erreurs courantes avec les zones de texte
Des zones de taille fixe qui ne s'agrandissent pas
Une zone de texte qui garde la même taille alors que le contenu déborde et oblige à faire défiler force l'utilisateur à écrire dans une minuscule fenêtre. Son expérience semble cassée. Faites grandir la zone avec le contenu.
Aucune indication claire d'une limite de caractères
Si votre zone de texte a une longueur maximale, l'utilisateur doit le savoir avant de l'atteindre. Affichez un compteur de caractères qui se met à jour pendant la saisie. « 500 caractères restants » ou « 2 sur 5000 caractères » lui dit tout de suite de combien de place il dispose.
Commencer trop petit
Une zone de texte d'une seule ligne de haut ne communique pas « je veux votre avis détaillé ». Elle ressemble à un champ d'une ligne. Commencez avec au moins trois à quatre lignes visibles pour que l'utilisateur comprenne qu'il peut écrire plus.
Exemples : champ de saisie ou zone de texte en contexte
Un formulaire de contact
Champ nom : champ sur une ligne. Assez large pour un long nom mais assez étroit pour signaler « juste votre nom ».
Champ e-mail : champ sur une ligne avec type="email".
Champ téléphone : champ sur une ligne avec type="tel".
Champ message : zone de texte, assez haute pour quelques paragraphes.
Un formulaire d'avis sur un produit
Votre nom : champ sur une ligne.
Votre e-mail : champ sur une ligne avec type="email".
Note (1 à 5 étoiles) : un type de champ spécialisé, mais pas une zone de texte.
Votre avis : zone de texte.
Recommanderiez-vous à d'autres : une case à cocher, pas un champ de texte.
Un formulaire de paiement
Prénom, nom, e-mail, téléphone : tous des champs sur une ligne.
Adresse de livraison (rue, ville, état, code postal) : généralement plusieurs champs sur une ligne, pas une seule zone de texte pour toute l'adresse.
Instructions de livraison particulières : zone de texte. L'utilisateur peut avoir une phrase ou trois selon ses besoins.
Formulaires WEMASY : créer des champs de saisie et des zones de texte
Le créateur de formulaires de WEMASY inclut les champs de saisie de texte et les zones de texte. Quand vous ajoutez un champ à votre formulaire, vous choisissez son type selon ce que vous demandez.
Pour un formulaire de contact dans WEMASY, vous ajouteriez un champ de saisie pour le nom et l'e-mail du visiteur, puis une zone de texte pour son message. WEMASY gère automatiquement le style pour que vos champs et vos zones de texte respectent les couleurs et la typographie de votre marque. Vous vous concentrez sur les bonnes questions. Le créateur de formulaires gère la mise en page et le comportement des champs.
Si vous avez besoin d'un champ spécialisé (comme un sélecteur de date ou une validation d'e-mail), WEMASY le prend aussi en charge. La taille du champ, son comportement et sa validation fonctionnent ensemble pour guider l'utilisateur jusqu'au bout.