Misurare la compilazione automatica del browser nei tuoi moduli

Maud Nalpas
Maud Nalpas

Data di pubblicazione: 20 novembre 2024

Il successo dell'e-commerce si basa su una procedura di pagamento fluida. I moduli sono fondamentali per le conversioni. Per ottimizzare l'esperienza utente, è essenziale capire in che modo gli utenti interagiscono con i tuoi moduli. La compilazione automatica svolge un ruolo significativo in questo processo.

Demo della compilazione automatica in Chrome.
Compilazione automatica in Chrome

Un'esperienza di compilazione automatica fluida può portare a un aumento delle conversioni, a invii più rapidi dei moduli, a una riduzione dell'abbandono dei moduli e a una maggiore soddisfazione degli utenti.

Ma hai visibilità sull'utilizzo e sui problemi relativi alla compilazione automatica sul tuo sito?

Questa guida spiega come raccogliere e analizzare i dati sul modo in cui gli utenti utilizzano la compilazione automatica nei tuoi moduli.

Ecco come utilizzare queste informazioni sulla compilazione automatica:

  • Allinea il tuo approccio di test ai flussi di lavoro degli utenti reali. Se gli approfondimenti sull'utilizzo della compilazione automatica indicano che i tuoi utenti si affidano molto a questa funzionalità, sapete che è fondamentale incorporare i test di compilazione automatica nei vostri flussi di lavoro.
  • Identifica le regressioni. Confronta gli indicatori di utilizzo della compilazione automatica dei singoli campi tra i vari implementazioni che influiscono sull'esperienza utente del modulo. Variazioni significative possono indicare che un comportamento di compilazione automatica è regredito.
  • Assicurati che l'implementazione compatibile con la compilazione automatica funzioni come previsto. Rileva le tendenze in cui gli utenti sembrano compilare manualmente i campi per i quali preferiresti che utilizzassero la compilazione automatica.

Demo e codice

Prova la nostra demo e esamina il codice su GitHub.

Demo dell'osservatore della compilazione automatica.
Utilizza il codice di dimostrazione per osservare in modo programmatico l'azione dell'utente su ogni campo del modulo (lasciare vuoto, compilare manualmente, compilare con la compilazione automatica o compilare con la compilazione automatica e poi modificare il campo). Prova.

Esegui le operazioni indicate di seguito:

  • Compila automaticamente tutti i campi.
  • Compila automaticamente un campo, quindi svuotalo manualmente.
  • Compila automaticamente un campo, quindi modificalo manualmente.
  • Compilare un campo completamente manualmente.
  • Lascia vuoto un campo.

Supporto browser

La demo funziona sulle versioni più recenti dei dispositivi e dei browser. Si basa sul rilevamento della pseudo-classe CSS :autofill, che è ben supportata su tutti i browser.

Passaggio 1: raccogli i dati di compilazione automatica

Definire gli stati della compilazione automatica

Innanzitutto, definisci i possibili stati dei campi di compilazione automatica che ti interessano:

  • EMPTY: l'utente lascia vuoto il campo.
  • AUTOFILLED: l'utente compila il campo utilizzando solo la compilazione automatica.
  • AUTOFILLED_THEN_MODIFIED: l'utente compila prima il campo utilizzando la compilazione automatica, quindi modifica manualmente il valore inserito automaticamente. Ad esempio, l'utente compila automaticamente l'indirizzo e i dati di contatto, ma inserisce manualmente un numero di telefono diverso.
  • ONLY_MANUAL: l'utente compila il campo completamente manualmente.
// Possible values for autofill statuses
const EMPTY = 'empty';
const AUTOFILLED = 'autofilled';
const AUTOFILLED_THEN_MODIFIED = 'autofilled-then-modified';
const ONLY_MANUAL = 'only-manual';

Implementare funzioni di utilità

Ora è il momento di implementare la funzionalità di base di questo codice: verificare se un campo è stato appena compilato automaticamente. Dietro le quinte, vengono utilizzate due funzioni:

  • getAllAutofilledFields esamina tutti gli elementi <input> e <select> all'interno di un determinato modulo e controlla la presenza della pseudo-classe CSS :autofill. Viene visualizzato un elenco di elementi che sono stati compilati automaticamente.
  • checkIsAutofilled controlla quindi se un determinato elemento fa parte di questo elenco.
// 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);

Inoltre, hai bisogno di una funzione di utilità per verificare se un campo è vuoto.

// 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;
}

Inizializza lo stato della compilazione automatica

Crea un oggetto globale, autofillStatuses, per memorizzare lo stato della compilazione automatica di ciascun campo.

Raccogli tutti i campi id dal modulo e inizializza lo stato di ogni campo su 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'));

Per raccogliere tutti gli elementi di campo che ti interessano, initializeAutofillStatuses utilizza una funzione di utilità:

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

Osserva le modifiche

Ora è tutto pronto per osservare il comportamento della compilazione automatica.

Collega un listener di eventi di modifica a ogni elemento del modulo. Quando si verifica una modifica, viene controllato se l'elemento è attualmente in fase di compilazione automatica utilizzando la funzione di utilità checkIsAutofilled. Lo stato della compilazione automatica dell'elemento viene quindi aggiornato nell'oggetto autofillStatuses in base agli stati corrente e precedente.

Ad esempio, se lo stato precedente era AUTOFILLED e ora il campo non è stato completato automaticamente (ovvero non ha la classe :autofill), significa che il campo è stato aggiornato manualmente dopo il completamento automatico. Lo stato viene quindi aggiornato a 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'));

Invia i risultati al tuo server

Al momento dell'invio del modulo, invia l'oggetto autofillStatuses al server. Ad esempio, per un modulo per l'indirizzo, sul server riceverai i seguenti dati:

{
    "name": "only-manual",
    "street-address": "only-manual",
    "postal-code": "autofilled-then-modified",
    "city": "autofilled",
    "country": "autofilled"
}
Demo di osservatore della compilazione automatica: area di visualizzazione per vari stati della compilazione automatica.
Area di visualizzazione degli stati della compilazione automatica di vari campi. Solo a scopo dimostrativo.

Passaggio 2: analizza i risultati

Aggregare gli oggetti autofillStatuses che ricevi da molti utenti e analizzare le tendenze nei dati.

Innanzitutto, esamina le informazioni sull'utilizzo complessivo della compilazione automatica: quale percentuale di utenti utilizza la compilazione automatica del browser per compilare almeno un campo?

A questo punto, puoi esaminare i singoli campi. Ad esempio, noti che una percentuale significativa di utenti non compila automaticamente determinati campi che dovrebbero essere compatibili con il completamento automatico. Ora puoi esaminare i potenziali motivi.

  • I campi <label> non sono chiari? Sono presenti suggerimenti o segnaposto che potrebbero essere fuorvianti?
  • Hai utilizzato la sintassi corretta per il valore autocomplete? Un problema comune è <input autocomplete="first-name">, che i browser non compilano perché il valore corretto è "given-name".

Conclusione

Comprendendo e sfruttando il comportamento di compilazione automatica, puoi migliorare l'esperienza utente sul tuo sito web. Implementa le tecniche descritte in questa guida per ottenere informazioni preziose su come gli utenti interagiscono con i tuoi moduli e identificare le aree di miglioramento.

Ricorda che la compilazione automatica è uno strumento potente per semplificare il percorso dell'utente. L'ottimizzazione dei moduli per la compilazione automatica può creare un'esperienza più user-friendly per i tuoi visitatori.

Consulta tutte le nostre risorse per la compilazione automatica.