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.
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.
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"
}
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.