La saisie automatique et les champs pré-remplis sont deux façons de réduire ce que les visiteurs ont à taper. La saisie automatique agit côté navigateur. Les champs pré-remplis agissent côté serveur. Ensemble, ils font nettement monter les taux de complétion.
Ce chapitre explique ce que fait chacun, comment ils fonctionnent, quand utiliser l'un ou l'autre et comment les mettre en place correctement.
Les bénéfices mesurables de la saisie automatique et des champs pré-remplis
Une étude de l'équipe Chrome pour les développeurs a suivi des milliers de formulaires aux États-Unis. Quand les visiteurs utilisent la saisie automatique du navigateur, ils remplissent les formulaires environ 35 % plus vite. Leur taux d'abandon baisse d'environ 75 %, même quand la saisie automatique ne remplit qu'une partie du formulaire. Les utilisateurs doivent encore relire et confirmer ce que le navigateur a rempli, mais c'est la réduction de l'effort de frappe qui fait la différence.
Dans un jeu de données couvrant plusieurs types de formulaires, 23 % des utilisateurs ont déclenché la saisie automatique pendant leur parcours. Ces utilisateurs ont terminé le formulaire dans 71 % des cas. Pour les visiteurs qui ne l'ont pas utilisée, le taux de complétion était de 59 %. Cet écart de 12 points de pourcentage s'accumule vite quand vous faites tourner des formulaires à grande échelle.
Les champs pré-remplis montrent un effet similaire. Quand un formulaire semble déjà en partie rempli, les utilisateurs le terminent plus volontiers que face à un formulaire vide. Cela marche parce que terminer quelque chose déjà commencé paraît plus facile que partir de zéro.
Comment fonctionne la saisie automatique et que faire pour la prendre en charge
La plupart des visiteurs utilisent aujourd'hui un navigateur avec saisie automatique. Chrome et les autres grands navigateurs l'ont tous. Beaucoup utilisent des gestionnaires de mots de passe, qui étendent encore ses capacités. Mais la saisie automatique ne fonctionne que si votre formulaire est configuré pour la recevoir.
Le navigateur examine le nom de chaque champ et son attribut type. Si votre champ s'appelle quelque chose de générique comme « field1 » ou « input2 », le navigateur n'a aucune idée de ce qu'il doit y mettre. Si vous l'appelez « email » et définissez le type « email », le navigateur sait. Si vous l'appelez « shipping_address_line_1 » et réglez l'attribut autocomplete sur « address-line1 », le navigateur sait exactement quoi y mettre.
Votre HTML doit correspondre à ce que les navigateurs attendent. Utilisez des noms de champs standards. Définissez le bon attribut type (email, tel, number, text). Ajoutez l'attribut autocomplete avec la bonne valeur pour chaque champ. Les plus courants que les utilisateurs s'attendent à voir gérés par la saisie automatique sont les champs e-mail (type="email" et autocomplete="email"), les champs de téléphone (type="tel" et autocomplete="tel"), les champs d'adresse (des valeurs autocomplete précises comme autocomplete="address-line1" pour la rue, autocomplete="address-level1" pour la région, autocomplete="postal-code" pour le code postal) et les champs de nom (type="text" et soit autocomplete="given-name" pour le prénom, soit autocomplete="family-name" pour le nom de famille).
Si votre formulaire n'utilise pas du tout l'attribut autocomplete, les navigateurs essaieront quand même de deviner d'après les noms des champs. Mais des valeurs autocomplete explicites marchent mieux. Le temps passé à bien définir ces attributs est rentabilisé chaque fois que le navigateur de quelqu'un remplit son adresse sans qu'il la tape.
Comment fonctionnent les champs pré-remplis et quand ils aident vraiment
Les champs pré-remplis marchent mieux quand l'utilisateur sait que vous avez l'information. Si quelqu'un s'est connecté à son compte, il s'attend à ce que son téléphone et son nom soient déjà là. S'il a cliqué sur un lien dans un e-mail qui disait « Confirmez votre adresse », il s'attend à voir l'adresse pré-remplie. Les données ne sont pas une surprise.
Pré-remplissez les champs courants que l'utilisateur vous a déjà donnés. L'e-mail s'il s'est inscrit avec son e-mail. Le nom de l'entreprise s'il s'est inscrit avec une entreprise. Toute adresse que vous avez déjà demandée. Laissez vides les champs qui demandent une nouvelle information. Un visiteur veut voir que vous avez retenu ce qu'il vous a dit, mais il veut aussi garder le contrôle de ce qui figure dans un formulaire qu'il s'apprête à envoyer.
La transparence compte ici. Expliquez clairement pourquoi ces champs sont pré-remplis. « Nous avons le nom de votre entreprise en dossier » ou « Voici l'adresse que vous nous avez donnée la dernière fois » se met en deux secondes sous forme de petite note au-dessus du formulaire et lève la confusion. La friction apparaît quand les champs semblent remplis sans consentement.
Quand s'abstenir de pré-remplir et ce qui peut mal tourner
Les champs pré-remplis ne marchent que si les données sont exactes et à jour. Si un visiteur a changé de numéro de téléphone mais que le formulaire puise dans une ancienne base, il voit une information fausse et doit la corriger. Cette friction annule l'intérêt. Donnez toujours aux utilisateurs la possibilité de modifier et corriger les données pré-remplies. Ne verrouillez jamais un champ en les obligeant à contacter le support pour le changer.
Si vous n'êtes pas sûr de l'exactitude des données, ne pré-remplissez que les champs que vous mettez à jour régulièrement et laissez les autres vides. Pour les secteurs réglementés comme les services financiers ou la santé, évitez de pré-remplir les champs sensibles même si vous avez les données. Ne pré-remplissez pas les moyens de paiement au moment de payer, sauf si le visiteur a explicitement enregistré ce moyen. L'objectif est de réduire la friction pour les visiteurs, pas de créer l'illusion d'un formulaire terminé.
Utiliser ensemble saisie automatique et champs pré-remplis pour un impact maximal
L'approche la plus forte utilise les deux en même temps. Pour les visiteurs connectés, pré-remplissez les données que votre système possède. Pour les visiteurs qui utilisent un nouveau navigateur ou un nouvel appareil, vérifiez que vos attributs autocomplete sont bien définis pour que la saisie automatique du navigateur puisse agir. Certains visiteurs verront des données pré-remplies. D'autres utiliseront la saisie automatique du navigateur. D'autres feront les deux. Dans tous les cas, le formulaire demande moins de frappe et les taux de complétion s'améliorent.
Les visiteurs n'arrivent pas tous dans le même état. Un client connu et connecté est un cas. Un nouveau visiteur à sa première interaction en est un autre. Un visiteur connu sur un nouvel appareil en est un troisième. Chacun profite de l'un ou l'autre mécanisme. Ensemble, ils créent un formulaire qui paraît efficace quel que soit le chemin du visiteur.
Ce qui se pré-remplit bien et ce qu'il vaut mieux laisser vide
La saisie automatique et le pré-remplissage sont plus efficaces pour les informations générales. E-mail, téléphone, nom, adresse, nom d'entreprise, code postal. Ces champs figurent sur de nombreux formulaires, donc les visiteurs comme les navigateurs gagnent à ce qu'ils soient mémorisés.
Pour les informations sensibles, soyez sélectif. Les formulaires financiers ne doivent pas pré-remplir les moyens de paiement, sauf si le visiteur en a explicitement enregistré un. Les formulaires de santé ne doivent pas pré-remplir l'historique médical. Les champs de sécurité comme les mots de passe ne doivent jamais être pré-remplis à la main (les gestionnaires de mots de passe s'en chargent automatiquement). Si votre secteur a des obligations de conformité, suivez-les quels que soient les avantages de commodité.
Comment mesurer l'effet sur vos taux de complétion
Vous ne voyez pas dans vos envois de formulaire si un visiteur a utilisé la saisie automatique. Mais vous pouvez mesurer l'effet en comparant les taux de complétion avant et après la prise en charge de la saisie automatique. Si votre code n'y est pas adapté aujourd'hui, définissez correctement vos attributs autocomplete. Mesurez le taux de complétion pendant une semaine, puis comparez-le à la semaine suivante. Une hausse mesurable devrait apparaître.
Pour les champs pré-remplis, le test est similaire. Si vous pouvez segmenter votre audience, montrez des données pré-remplies à certains visiteurs et des champs vides à d'autres. Le taux de complétion devrait être plus élevé pour le groupe pré-rempli. Sinon, soit vos données sont inexactes, soit le nombre de champs pré-remplis crée de la confusion au lieu d'un élan.
Questions fréquentes
La saisie automatique fonctionne-t-elle de la même façon sur mobile et sur ordinateur ?
La saisie automatique est-elle sûre pour les champs de mot de passe ?
Puis-je pré-remplir un formulaire avec un paramètre d'URL ?
Que se passe-t-il si les données remplies automatiquement sont fausses ?
Pré-remplir un formulaire réduit-il la qualité des données ou introduit-il des informations périmées ?
Quels types de formulaires profitent le plus de la saisie automatique et du pré-remplissage ?
La saisie automatique et les champs pré-remplis donnent des résultats mesurables. Un gain de vitesse de 35 % et une réduction de l'abandon de 75 % concernent les visiteurs qui les utilisent. Ils marchent mieux avec un formulaire court et des libellés clairs. Ensemble, ces trois éléments cumulent nettement leurs gains de complétion.
Pour en savoir plus sur la réduction de la longueur d'un formulaire, consultez le guide complet sur la longueur idéale d'un formulaire. Pour la mise en œuvre technique, voyez comment pré-remplir des formulaires avec les données de l'utilisateur. Pour la stratégie d'optimisation globale, explorez le guide d'optimisation du taux de conversion des formulaires.