Comment optimiser les formulaires pour profiter du remplissage automatique

Surprendre! Vous pouvez faciliter l'achat de vos produits en ligne par les utilisateurs grâce à la puissance de la saisie automatique.

Ce doit être votre jour de chance. Ou bien, des années ?

La saisie automatique n'est pas nouvelle, même si elle s'est améliorée au fil du temps. C'est cependant un moyen fantastique d'encourager les utilisateurs à remplir vos formulaires Web - que vous souhaitiez qu'ils vous contactent ou qu'ils saisissent leurs informations de paiement afin qu'ils puissent appuyer sur ce gros et magnifique bouton d'achat.

Le remplissage automatique des formulaires élimine tous les efforts des formulaires Web qui peuvent être fastidieux, prendre du temps et constituer un obstacle à la conversion. Lorsque vous remplissez automatiquement les données de formulaire pour vos utilisateurs, vous fournissez une meilleure interface utilisateur et une meilleure expérience utilisateur (UX) en faisant gagner du temps aux utilisateurs et en réduisant le risque d'erreurs (comme les fautes de frappe).

Cela évite également aux utilisateurs d'avoir à trop réfléchir, ou pire encore, à se lever du confort de leur canapé pour parcourir la distance redoutée jusqu'à leur portefeuille.

Vous pourriez penser que nous exagérons, mais parfois après une longue journée de travail, votre chef est trop épuisé pour se lever. Ou c'est une maman occupée qui pensait faire un achat rapide pendant sa pause de 5 minutes, et soudain, elle n'a plus le temps.

Dans une étude, Google a constaté que les utilisateurs remplissaient les formulaires 30 % plus rapidement avec le remplissage automatique des formulaires activé. Cette vitesse, combinée à la commodité du remplissage automatique, augmente les taux de soumission des formulaires et les conversions tout en rendant les utilisateurs heureux dans le processus. Et les utilisateurs satisfaits reviennent.

C'est pourquoi les fonctionnalités automatiques figurent sur notre liste des meilleures pratiques de conception de formulaires.

Alors, comment faites-vous pour que le remplissage automatique fonctionne sur vos formulaires Web ?

Tout commence par demander à votre développeur Web d'optimiser vos formulaires pour qu'ils fonctionnent avec le navigateur de l'utilisateur afin qu'il puisse reconnaître vos champs de formulaire pour ce qu'ils sont.

Comment fonctionne la saisie automatique ?

Que diriez-vous de commencer ici : qu'est-ce que la saisie automatique ?

Le remplissage automatique est un outil astucieux offert par la plupart des navigateurs à leurs utilisateurs. Lorsque les utilisateurs activent le remplissage automatique, leur navigateur remplit automatiquement les formulaires pour eux avec toutes les données utilisateur applicables qu'il a enregistrées. Ainsi, l'utilisateur n'a pas à remplir chaque champ à la main.

Différents navigateurs enregistrent des données utilisateur légèrement différentes, mais sont globalement similaires :

Remarque : « Adresses » comprend les numéros de téléphone, les adresses e-mail et les adresses de livraison.

Maintenant, comment le remplissage automatique exécute-t-il sa magie ?

C'est assez simple. Le navigateur recueille les informations qu'un utilisateur a saisies dans des formulaires antérieurs sur d'autres sites Web ou sur le vôtre. Certains utilisateurs peuvent même configurer le remplissage automatique dans les paramètres de remplissage automatique de leur navigateur et fournir directement les informations pour se simplifier la vie. Dans ce cas, le navigateur peut enregistrer des données sensibles, comme un moyen de paiement, via une procédure d'authentification.

Les utilisateurs contrôlent les préférences de remplissage automatique de leur côté via leurs paramètres de remplissage automatique et peuvent choisir de l'activer ou de le désactiver.

Tant qu'il est activé, leur navigateur utilisera plusieurs heuristiques pour déterminer lequel de vos champs de formulaire il peut remplir automatiquement en fonction des autorisations de l'utilisateur.

Comment ajouter le remplissage automatique de formulaires à vos formulaires Web

Êtes-vous prêt pour une bonne nouvelle ?

Tant que vous créez vos formulaires Web en utilisant les meilleures pratiques de formulaire, le remplissage automatique est généralement une évidence, car la fonctionnalité principale est intégrée au navigateur ou à l'appareil de l'utilisateur. Ainsi, vous n'avez qu'à vous concentrer sur le développement de formulaires qui répondent aux normes de codage. Gérez cela et le remplissage automatique devrait fonctionner sur vos formulaires mobiles et de bureau.

Si ce n'est pas le cas, Google donne deux raisons pour lesquelles la saisie automatique peut ne pas fonctionner pour les utilisateurs :

1. 1. Votre site Web n'est peut-être pas suffisamment sécurisé pour que Chrome fournisse des données utilisateur.
   2. Si votre site Web est sécurisé, Chrome peut ne pas être en mesure de détecter vos champs de formulaire.

Pour éviter ces problèmes avec vos formulaires Web, assurez-vous que votre site Web est suffisamment sécurisé pour répondre aux normes du navigateur. Définissez des directives de sécurité, maintenez votre site Web et vos logiciels à jour, utilisez un pare-feu et un VPN et évitez les silos de données.

Si votre site Web est sécurisé et que la saisie automatique ne fonctionne pas de manière autonome, confirmez que votre formulaire respecte les bonnes pratiques de code de formulaire suivantes.

Bonnes pratiques de formulaire pour garantir le fonctionnement de la saisie automatique

Alors que les navigateurs opèrent leur magie pour faciliter la vie de l'utilisateur, il existe des moyens de les aider. En développant des formulaires Web qui fournissent les bonnes indications au navigateur, vous pouvez garantir qu'il sera en mesure de remplir automatiquement les données de formulaire pour vos utilisateurs.

Commencez par donner aux navigateurs des indications sur le type de données avec lesquelles ils doivent remplir les champs de votre formulaire, afin qu'il soit plus facile pour le navigateur de lire votre formulaire et de faire son travail.

Pour ce faire, assurez-vous d'utiliser le type d'entrée correct et les étiquettes d'entrée correspondantes. Vous voudrez également fournir l'attribut de nom et l'attribut de saisie semi-automatique pour chaque élément d'entrée. L'image ci-dessous montre le nom commun et les attributs de saisie semi-automatique selon les normes HTML dont vous pourriez avoir besoin.

Photo des développeurs Google.

Pour se conformer aux pratiques de formulaire HTML standard, vous ou votre développeur de site Web devez également vous assurer que les éléments d'entrée sont enveloppés dans une balise <form> pour activer le remplissage automatique. Le navigateur Web Google Chrome exige que les champs de formulaire soient dans une balise de formulaire HTML, sinon il n'offrira que des suggestions et ne remplira pas automatiquement les données du formulaire.

Ce qu'il ne faut pas faire : les pratiques qui empêchent la saisie automatique

Alors que certaines pratiques aident les navigateurs à remplir automatiquement les données des formulaires, d'autres gênent. Lors de la création de formulaires, assurez-vous que vous :

• • Évitez les pièges de la validation sur le terrain comme la validation côté client
  • Utilisez des champs de saisie standard au lieu de créer les vôtres
  • Utilisez l'attribut d'espace réservé dans les champs de saisie au lieu de faux espaces réservés
  • Ne copiez pas une adresse de livraison dans l'adresse de facturation
  • Assurez-vous que vos formulaires fonctionnent avec les gestionnaires de mots de passe
  • Parfois, les données du navigateur ne sont pas la seule aide lorsqu'il s'agit de remplir automatiquement des formulaires.

Les utilisateurs en ont assez de garder une trace d'un million de mots de passe, et pouvez-vous leur en vouloir ? Rien n'est pire que de deviner un mot de passe jusqu'à ce que vous soyez bloqué sur un compte ou d'abandonner et de réinitialiser un mot de passe juste pour vous dire que vous ne pouvez pas utiliser l'actuel. (Tu n'as pas déjà essayé celui-là ?!)

À leur tour, les gestionnaires de mots de passe qui gardent une trace de tous vos noms d'utilisateur et mots de passe en un seul endroit ont gagné en popularité. Les meilleurs de ces gestionnaires, comme LastPass et 1Password, offrent la possibilité de remplir automatiquement les mots de passe dans les formulaires de connexion.

Pour les propriétaires de sites Web, cela signifie s'assurer que vos formulaires de connexion fonctionnent avec les applications de remplissage automatique de mots de passe.

Heureusement, les gestionnaires de mots de passe s'accrochent eux-mêmes à des formulaires correctement construits, tout comme les navigateurs. Suivez les conseils de formulaire ci-dessus et votre formulaire devrait fonctionner de manière transparente avec LastPass et 1Password.

Mais, tout comme les navigateurs, il existe des moyens d'aider les gestionnaires de mots de passe à lire votre formulaire et à garantir leur fonctionnement :

• • N'utilisez pas de formulaires de connexion qui ajoutent ou suppriment dynamiquement des champs
  • Affichez votre formulaire sur le premier rendu de la page Web
  • Utilisez les attributs d'espace réservé comme prévu
  • Évitez d'utiliser des formulaires de connexion multi-pages lorsque cela est possible

Comment remplir automatiquement : autres conseils

Lorsqu'il s'agit de former UX, répondre aux attentes des utilisateurs est l'exigence minimale et dépasser les attentes est l'objectif. Parfois, cela signifie mettre en œuvre une flexibilité de mise en page du formulaire pour s'adapter aux différences d'attentes des utilisateurs.

Dans le cas de la fonctionnalité de remplissage automatique, la création d'une mise en page de formulaire flexible peut être cruciale pour les entreprises qui font des affaires ou desservent des consommateurs dans plusieurs pays, car les gens du monde entier écrivent les adresses différemment. Pour répondre aux attentes et aux navigateurs de ces utilisateurs, envisagez de fournir un formulaire flexible qui ajuste les champs d'adresse en conséquence.

Configuration des formulaires de remplissage automatique pour les applications

Lors de la création d'une application à laquelle les utilisateurs accéderont sur les appareils Apple, assurez-vous que votre application prend en charge la fonctionnalité de saisie automatique du mot de passe d'Apple et configurez les domaines associés à votre application comme indiqué ici :

Exigences de remplissage automatique iOS

Pour les applications sur les appareils Android, le cadre de remplissage automatique Android remplira automatiquement les formulaires tant que votre application utilise des vues standard. Vous pouvez optimiser le fonctionnement de votre application dans le cadre en effectuant un workflow de remplissage automatique, en configurant des domaines associés, en marquant des champs comme importants et en utilisant l'attribut android:autofillHints comme décrit ici :

Opération et instructions de remplissage automatique Android

Soyez remercié dans les conversions

S'assurer que vos formulaires fonctionnent bien avec les fonctionnalités de remplissage automatique des navigateurs et des gestionnaires de mots de passe est l'un des meilleurs moyens d'améliorer l'UX des formulaires et de réduire les frictions entourant les soumissions de formulaires. Qui n'aime pas obtenir le même résultat avec la moitié (ou moins !) de l'effort ?

Le remplissage automatique facilite la vie des utilisateurs en rendant les formulaires plus rapides et plus simples à remplir, ce qui signifie que les utilisateurs obtiennent ce qu'ils cherchaient et que vous obtenez plus de conversions.

Et, à notre avis, les conversions sont le meilleur moyen pour un utilisateur de dire merci.

Vous souhaitez rendre vos formulaires à tomber par terre (c'est-à-dire rapides, magnifiques, conviviaux et optimisés pour remplir automatiquement les données de formulaire) ? Notre équipe est passionnée par tout cela et nous aimons parler. Atteindre.