Design de Formulaire Web: Champs, Erreurs et Conversion

Chaque champ supplémentaire est un point de friction qui augmente le risque d'abandon. Sur un formulaire de demande de service, le nom, le téléphone et une courte description suffisent généralement; l'adresse, le poste occupé ou le budget peuvent se recueillir plus tard, lors d'un appel de suivi, pas au premier contact.

Certains secteurs font exception; l'information manquante y ralentit le travail. Le formulaire de réservation d'un loueur de véhicules ne peut pas traiter une demande sans date ni type de véhicule; l'objectif n'est pas le minimum de champs mais les bons champs.

Si un champ est incorrect, le visiteur doit le voir au moment où il le quitte, pas après avoir envoyé tout le formulaire. Un champ e-mail qui signale immédiatement un format incorrect est bien moins fatigant que dix erreurs qui apparaissent d'un coup après l'envoi.

Mais un avertissement à chaque frappe est tout aussi gênant; si le visiteur voit «invalide» avant même d'avoir fini de taper le mot, le formulaire paraît inutilement sévère. Le bon moment est celui où le champ perd le focus.

Un message générique comme «saisie invalide» ne dit pas au visiteur quoi faire. Un message concret, du type «l'adresse e-mail doit contenir un @», évite de reproduire la même erreur.

Si le format du numéro de téléphone varie selon le pays sur un formulaire d'adhésion associative, le message d'erreur doit montrer le format attendu avec un exemple; une indication comme «saisir au format 06 12 34 56 78» évite au visiteur de deviner.

La plupart des formulaires sont désormais remplis sur téléphone; la taille des champs, le type de clavier et la zone tactile méritent donc une attention particulière. Un champ téléphone doit ouvrir le clavier numérique, un champ e-mail un clavier où le @ est facilement accessible; ces petits détails s'additionnent et rendent un formulaire nettement plus facile à remplir.

• Le nombre de champs se limite à ce que le premier contact exige réellement
• La validation intervient à la perte de focus du champ, pas à chaque frappe
• Les messages d'erreur indiquent concrètement quoi corriger
• Type de clavier adapté et zones tactiles suffisamment grandes sur mobile
• Ce qui se passe après l'envoi (remerciement, e-mail, rappel) est clairement indiqué

L'endroit où atterrissent les données après l'envoi fait partie du design autant que l'apparence. Une demande qui tombe directement dans un CRM est traitée plus vite qu'une demande enfouie dans une boîte mail; sans ce lien, même un formulaire bien conçu peut finir en demande perdue côté équipe.

Aussi important que la destination des données: qui répond, et en combien de temps; une entreprise qui met trois jours à répondre après l'envoi d'un formulaire laisse la même impression qu'une entreprise qui n'en propose aucun.

Un formulaire long tenu sur une seule page peut décourager; le répartir en deux ou trois étapes avec une barre de progression peut améliorer le taux de complétion. Mais découper en étapes un formulaire court avec peu de champs produit l'effet inverse, cela ajoute simplement des clics inutiles.

Sur une commande de produit numérique, séparer le choix du produit, puis les informations de facturation, puis le paiement en étapes distinctes rend chacune plus légère; mais cela ne se justifie qu'à partir de cinq ou six champs.

Peu après sa mise en ligne, un formulaire peut commencer à recevoir des envois de robots; un champ caché que seul un robot remplirait (honeypot) filtre l'essentiel du spam sans imposer d'étape supplémentaire à un vrai visiteur.

Si le formulaire de contact d'un cabinet d'avocats reçoit chaque semaine des dizaines d'envois sans intérêt, cela vient généralement non pas de l'absence de captcha, mais d'une protection anti-robots inexistante; un champ honeypot et une limite de fréquence d'envoi suffisent dans la plupart des cas.

Un captcha visible ne s'ajoute qu'en dernier recours, quand ces mesures ne suffisent pas; car chaque captcha est aussi un point de friction supplémentaire pour un visiteur authentique.