Mesurer la saisie automatique dans le navigateur sur vos formulaires

Maud Nalpas
Maud Nalpas

Publié le 20 novembre 2024

Le succès de l'e-commerce repose sur un processus de paiement fluide. Les formulaires sont essentiels pour les conversions. Pour optimiser l'expérience utilisateur, il est essentiel de comprendre comment les utilisateurs interagissent avec vos formulaires. Le remplissage automatique joue un rôle important dans ce processus.

Démonstration de la saisie automatique dans Chrome.
Saisie automatique dans Chrome

Une expérience de saisie semi-automatique fluide peut entraîner une augmentation des conversions, une soumission de formulaires plus rapide, une réduction de l'abandon de formulaire et une meilleure satisfaction des utilisateurs.

Mais avez-vous une visibilité sur l'utilisation de la saisie automatique et les frictions sur votre site ?

Ce guide explique comment collecter et analyser les données sur la façon dont les utilisateurs utilisent le remplissage automatique dans vos formulaires.

Voici comment utiliser ces insights sur le remplissage automatique:

  • Alignez votre approche de test sur les workflows réels des utilisateurs. Si les insights sur l'utilisation de la saisie automatique indiquent que vos utilisateurs s'appuient fortement sur la saisie automatique, vous savez qu'il est essentiel d'intégrer des tests de saisie automatique à vos workflows.
  • Identifier les régressions. Comparez les signaux d'utilisation de la saisie automatique sur des champs individuels entre les déploiements qui affectent l'expérience utilisateur des formulaires. Des variations importantes peuvent signifier qu'un comportement de saisie automatique a régressé.
  • Assurez-vous que votre implémentation compatible avec le remplissage automatique fonctionne comme prévu. Détectez les tendances où les utilisateurs semblent remplir manuellement des champs pour lesquels vous préférez qu'ils utilisent la saisie automatique.

Démo et code

Testez notre démo et examinez le code sur GitHub.

Démonstration de l'observateur de saisie automatique.
Utilisez le code de démonstration pour observer de manière programmatique l'action de l'utilisateur sur chaque champ de formulaire (laisser vide, remplir manuellement, remplir avec la saisie automatique ou remplir avec la saisie automatique, puis modifier le champ). Essayez-la.

Solutions possibles

  • Remplissez automatiquement tous les champs.
  • Renseignez automatiquement un champ, puis videz-le manuellement.
  • Renseignez automatiquement un champ, puis modifiez-le manuellement.
  • Remplir un champ entièrement manuellement
  • Laissez un champ vide.

Prise en charge des navigateurs

La démonstration fonctionne sur les derniers appareils et les dernières versions de navigateur. Il repose sur la détection de la pseudo-classe CSS :autofill, qui est bien compatible avec tous les navigateurs.

Étape 1: Collectez les données de saisie automatique

Définir les états de saisie automatique

Commencez par définir les états de champ de saisie automatique qui vous intéressent:

  • EMPTY: l'utilisateur laisse le champ vide.
  • AUTOFILLED: l'utilisateur remplit le champ à l'aide de la saisie semi-automatique uniquement.
  • AUTOFILLED_THEN_MODIFIED: l'utilisateur remplit d'abord le champ à l'aide de la saisie automatique, puis modifie manuellement la valeur renseignée automatiquement. Par exemple, l'utilisateur renseigne automatiquement son adresse et ses coordonnées, mais saisit manuellement un autre numéro de téléphone.
  • ONLY_MANUAL: l'utilisateur remplit entièrement le champ manuellement.
// Possible values for autofill statuses
const EMPTY = 'empty';
const AUTOFILLED = 'autofilled';
const AUTOFILLED_THEN_MODIFIED = 'autofilled-then-modified';
const ONLY_MANUAL = 'only-manual';

Implémenter des fonctions utilitaires

Il est maintenant temps d'implémenter la fonctionnalité de base de ce code: vérifier si un champ vient d'être renseigné automatiquement. En arrière-plan, cela utilise deux fonctions:

  • getAllAutofilledFields examine tous les éléments <input> et <select> d'un formulaire donné, et vérifie la présence de la pseudo-classe CSS :autofill. Elle renvoie une liste des éléments qui ont été renseignés automatiquement.
  • checkIsAutofilled vérifie ensuite si un élément particulier fait partie de cette liste.
// Get all elements that are autofilled, using the :autofill pseudo-class
function getAllAutofilledFields(formElement) {
  return formElement.querySelectorAll(':autofill');
}

// Check if the passed element is in the list of autofilled fields
function checkIsAutofilled(allAutofilledFields, fieldElement) {
  return Array.from(allAutofilledFields).includes(fieldElement);
}

// Usage
const allAutofilledFields = getAllAutofilledFields(formElement);
const isAutofilled = checkIsAutofilled(allAutofilledFields, fieldElement);

Vous avez également besoin d'une fonction utilitaire pour vérifier si un champ est vide.

// Check if the value of the element is empty
function checkIsEmpty(fieldElement) {
  const value = fieldElement.value.trim();
  // value is a string, even for a type = number field
  const isEmpty = value === '';
  return isEmpty;
}

Initialiser l'état de la saisie automatique

Créez un objet global, autofillStatuses, pour stocker l'état de saisie semi-automatique de chaque champ.

Collectez tous les id de champ du formulaire et définissez l'état de chaque champ sur EMPTY.

// Global variable storing autofill statuses for each field
const autofillStatuses = {};
// Example: {
//     "name": "autofilled",
//     "street-address": "autofilled-then-modified",
//     "country": "only-manual"
// }

// Initialize autofill status for all fields
function initializeAutofillStatuses(formElement) {
  const allFieldsAsArray = getAllFieldsAsArray(formElement);
  allFieldsAsArray.forEach((fieldElement) => {
    autofillStatuses[fieldElement.id] = EMPTY;
  });
}

initializeAutofillStatuses(document.getElementById('form'));

Pour collecter tous les éléments de champ qui vous intéressent, initializeAutofillStatuses utilise une fonction utilitaire:

// Collect all field elements for a given form
function getAllFieldsAsArray(formElement) {
  return Array.from(formElement.querySelectorAll('input, select'));
}

Observer les changements

Tout est maintenant prêt pour observer le comportement de saisie semi-automatique.

Associez un écouteur d'événements de modification à chaque élément du formulaire. En cas de modification, il vérifie si l'élément est actuellement renseigné automatiquement à l'aide de la fonction utilitaire checkIsAutofilled. L'état de saisie semi-automatique de l'élément est ensuite mis à jour dans l'objet autofillStatuses, en fonction des états actuels et précédents.

Par exemple, si l'état précédent était AUTOFILLED et que le champ n'a pas été renseigné automatiquement (c'est-à-dire qu'il n'a pas la classe :autofill), cela signifie que le champ a été mis à jour manuellement après la saisie automatique. L'état est donc défini sur AUTOFILLED_THEN_MODIFIED.

// Add event listener to all fields to update autofill status
function initializeChangeObserver(formElement) {
  const allFieldsAsArray = getAllFieldsAsArray(formElement);
  allFieldsAsArray.forEach((fieldElement) => {
    fieldElement.addEventListener('change', () => {
      updateAutofillStatus(formElement, fieldElement);
    });
  });
}

// Update autofill status
function updateAutofillStatus(formElement, fieldElement) {
  const isEmpty = checkIsEmpty(fieldElement);
  const allAutofilledFields = getAllAutofilledFields(formElement);
  const isAutofilled = checkIsAutofilled(allAutofilledFields, fieldElement);
  const previousAutofillStatus = autofillStatuses[fieldElement.id];
  if (isEmpty) {
    autofillStatuses[fieldElement.id] = EMPTY;
    // NOTE: if (previousAutofillStatus === AUTOFILLED), the field has just been emptied manually. Autofill can't empty fields.
  } else {
    if (isAutofilled) {
      autofillStatuses[fieldElement.id] = AUTOFILLED;
    } else {
      if (
        previousAutofillStatus === ONLY_MANUAL ||
        previousAutofillStatus === EMPTY
      ) {
        // NOTE: ONLY_MANUAL is only used for fields where autofilled was *never* used. A field where autofilled was used will be AUTOFILLED_THEN_MODIFIED, even if the user has completely retyped the whole value
        autofillStatuses[fieldElement.id] = ONLY_MANUAL;
      } else if (
        previousAutofillStatus === AUTOFILLED ||
        previousAutofillStatus === AUTOFILLED_THEN_MODIFIED
      ) {
        autofillStatuses[fieldElement.id] = AUTOFILLED_THEN_MODIFIED;
      }
    }
  }
}

initializeChangeObserver(document.getElementById('form'));

Envoyer les résultats à votre serveur

Au moment de l'envoi du formulaire, envoyez votre objet autofillStatuses au serveur. Par exemple, pour un formulaire d'adresse, vous recevrez les données suivantes sur le serveur:

{
    "name": "only-manual",
    "street-address": "only-manual",
    "postal-code": "autofilled-then-modified",
    "city": "autofilled",
    "country": "autofilled"
}
Démonstration de l&#39;observateur de saisie automatique: zone d&#39;affichage des différents états de saisie automatique.
Zone d'affichage des états de saisie automatique de différents champs. À des fins de démonstration uniquement.

Étape 2: Analysez les résultats

Aggrégez les objets autofillStatuses que vous recevez de plusieurs utilisateurs et analysez les tendances des données.

Commencez par examiner les insights sur l'utilisation globale de la saisie automatique: quel pourcentage de vos utilisateurs utilisent la saisie automatique du navigateur pour remplir au moins un champ ?

Vous pouvez ensuite examiner les différents champs. Par exemple, vous constatez qu'une partie importante des utilisateurs ne remplit pas automatiquement certains champs qui devraient être compatibles avec le remplissage automatique. Vous pouvez maintenant examiner les raisons possibles.

  • Les champs <label> sont-ils peu clairs ? Y a-t-il des indices ou des espaces réservés qui pourraient être trompeurs ?
  • Avez-vous utilisé la syntaxe appropriée pour la valeur autocomplete ? <input autocomplete="first-name"> est un problème courant, que les navigateurs ne remplissent pas, car la valeur appropriée est "given-name".

Conclusion

En comprenant et en exploitant le comportement de saisie semi-automatique, vous pouvez améliorer l'expérience utilisateur sur votre site Web. Implémentez les techniques décrites dans ce guide pour obtenir des insights précieux sur la façon dont les utilisateurs interagissent avec vos formulaires et identifier les points à améliorer.

N'oubliez pas que le remplissage automatique est un outil efficace pour simplifier le parcours utilisateur. En optimisant vos formulaires pour le remplissage automatique, vous pouvez offrir une expérience plus conviviale à vos visiteurs.

Consultez toutes nos ressources sur la saisie semi-automatique.