La plupart des formulaires de contact sont un mur de champs : on demande tout, tout de suite, à tout le monde. Résultat, le visiteur hésite, se trompe, ou abandonne. J’ai voulu l’inverse pour la page de contact : un formulaire qui guide, ne montrant que ce qui est pertinent, et qui révèle les champs au fur et à mesure des choix. C’est le principe de la découverte conditionnelle (ou progressive disclosure).
Ce billet explique la démarche et les principes UX qui la sous-tendent. La version détaillée (schémas, logique de révélation, états de validation) est dans le PDF lié ci-dessus.
Le principe : la découverte conditionnelle
Introduit par Jakob Nielsen en 1995, le progressive disclosure consiste à n’afficher d’emblée que l’essentiel, et à différer les options secondaires jusqu’à ce qu’elles deviennent pertinentes. On réduit ainsi la charge cognitive : le visiteur traite une chose à la fois. Appliqué à un formulaire, cela signifie faire apparaître un champ seulement après le choix qui le rend nécessaire.
Progressive Disclosure — N Norman → ou Progressive Disclosure (version francaise) →.
Orienter avant de demander
La toute première étape n’est pas un champ, c’est une orientation. Le pays (France par défaut) détermine l’interlocuteur le plus pertinent : selon les cas, le visiteur est redirigé vers le fabricant ou son réseau, ou reste sur le formulaire local. On ne déroule le reste du formulaire que pour les demandes réellement destinées à ce point d’entrée. C’est de la disclosure appliquée au routage : personne ne remplit un formulaire qui n’est pas le sien.
La cascade de l’objet
L’objet de la demande pilote la suite. Choisir un modèle propose de préciser le besoin ; choisir une nature (devis, documentation, maintenance…) propose de préciser le modèle concerné. Et selon la nature, on révèle — ou non — un champ numéro de série ou description du problème. Chaque champ conditionnel qui redevient masqué est vidé avant l’envoi, pour ne jamais transmettre de donnée parasite.
Cette logique est pilotée par les données (des référentiels), pas codée en dur : un indicateur du type needs_serial ou precision_required décide de l’affichage. On fait évoluer le comportement en éditant une table, pas le JavaScript.
Deux niveaux d’identification, sans mur
Pour un professionnel identifié (e-mail d’entreprise, identifiant légal reconnu), un formulaire court suffit. Si le contexte est plus incertain — adresse grand public, identifiant absent ou douteux — on bascule vers un formulaire complet qui demande société et coordonnées. Le point clef : cette bascule est une escalade, jamais un rejet. On ne bloque pas, on demande juste un peu plus de contexte quand c’est utile, avec un bouton pour revenir en arrière dès que l’identifiant redevient valide.
Valider sans bloquer
Chaque champ sensible porte un retour visuel immédiat à côté de son étiquette : vert (reconnu), orange (à vérifier) ou rouge (non conforme), doublé d’un texte (jamais la couleur seule, pour l’accessibilité). Mais un doute ne bloque pas l’envoi : il fait basculer en mode complet.
Le bouton Envoyer ne s’active que lorsque les champs critiques sont suffisants ; s’il reste grisé, un message indique précisément ce qui manque (plutôt que de laisser deviner). Et pour ne jamais perdre un contact en cas de pépin, un lien e-mail de secours pré-rempli reste toujours visible.
Réduire la charge cognitive des formulaires — NN/g →.
Accessibilité et anti-spam
- Champs obligatoires marqués visuellement et via
required/aria; un marqueur distinct pour les champs recommandés (avec infobulle). - Le retour de validation ne repose pas uniquement sur la couleur (texte +
aria-label). - Un honeypot invisible piège les robots sans captcha, tant que le trafic reste modéré.
Références
- NN/g — Progressive Disclosure (Jakob Nielsen).
- NN/g — Reduce Cognitive Load in Forms.
- GOV.UK Design System — patrons de formulaires (dont « one thing per page »).
- MDN — ARIA & accessibilité des formulaires.
Bilan
Un bon formulaire de contact se comporte moins comme un questionnaire que comme une conversation : il oriente, ne dévoile que le nécessaire, valide en douceur et ne bloque jamais. La découverte conditionnelle est l’outil central de cette approche.
Les détails (carte des champs, états de validation, logique d’activation) sont dans le PDF compagnon. Le prochain billet abordera la mise en forme (look & feel) cohérente avec le site.