Una delle fasi più critiche dell'esperienza utente in un sito web è la compilazione di form: esse solitamente sono la fase preliminare di una conversione e quindi per un sito web è importante che tutto sia tirato al lucido.

Per migliorare le performance in termini di conversione di una form ci può essere d'aiuto Google Analytics, che offre la possibilità di tracciare gli errori di compilazione delle form attraverso gli eventi.

In poche parole, ogni qualvolta un utente visualizza un messaggio di errore ed un invito alla revisione della compilazione, il sistema dovrebbe registrare il motivo dell'errore (ad es. formato CAP non valido, email non valida, ecc.).

In questo modo, avendo le informazioni sugli errori più frequenti, si possono mettere in pratica delle migliorie in termini di interfaccia che prevengano l'incorrere di errori e che di conseguenza migliorino il tasso di conversione.

Se rilevo, per esempio, che il 15% delle compilazioni delle form vanno in errore a causa della scelta di uno username già presente, dovrò prevedere una funzione di controllo della presenza dello username inserito.

Nel post prima suggerisco una possibile configurazione di Google Analytics da fare per ottenere dei buoni dati, per poi analizzare una serie di metriche da calcolare (ce ne potrebbero essere davvero trentamila :-)  ed infine suggerisco un software alternativo a Google Analytics per il tracciamento delle form).

Se per caso avete delle integrazioni o delle migliorie sarei davvero felice di discuterne nei commenti o nei social (non si finisce mai di imparare :-) ).

1. Configurazione di Google Analytics - soluzione 'fatta in casa'

Il primo consiglio, che è considerata una best-practice nel design delle form, è quello di inserire il messaggio di errore affiancato al campo errato evidenziandolo con colore rosso.

Un ulteriore miglioria potrebbe essere l'inserimento in pagina della notifica del messaggio in modo interattivo attraverso AJAX senza necessità di ricaricamento della pagina.

Yahoo può considerarsi un buon esempio:

Nel caso in cui abbiate una validazione delle form di questo tipo, il tracciamento dovrebbe essere generato da due script: uno che traccia l'evento di invio della form (il click sul bottone 'Submit'), ed uno inserito ad-hoc contestualmente al messaggio di errore in pagina.

Il primo script dovrebbe essere inserito contestualmente al bottone di submit per tracciare l'evento "click"  e serve per contare il numero di tentativi di compilazione.

onClick="_gaq.push(['_trackEvent', 'Form-Step', 'Submit', '#tentativi']);"

• Form-Step è l'indicazione della form che è andata in errore seguita da un trattino e dal numero dello step di registrazione, se si tratta di una form a più passi.
• Submit è la stringa che identifica il tipo di evento accaduto per quella form, in questo caso l'invio.
• #tentativi è il numero progressivo di tentativi di compilazione effettuati dall'utente.

Se ad esempio nello step 2 del processo di acquisto un utente clicca sul bottone per proseguire si dovrebbe ottenere una chiamata di questo tipo:

gaq.push(['_trackEvent', 'Purchase-2', ‘Submit', ‘1']);

Il secondo script dovrebbe essere inserito in pagina una sola volta dopo l'azione di invio della form se l'utente ha ottenuto almeno un errore.

L'esempio fornito è pensato per siti con più form composte da più step di registrazione (spesso accade questa necessità per gli e-commerce) e serve per tracciare l'evento "errore" con un'indicazione di che form si tratta (se ne avete più di una da tracciare), quale step di registrazione e la lista dei codici di errore (opportunamente definiti in precedenza).

<script type='text/javascript'>

gaq.push(['_trackEvent', 'Form-Step', ‘Error', ‘ListaCodiciErrore’,#tentativi]);

</script>

• Error è la stringa che identifica il tipo di evento accaduto per quella form, in questo caso errore.
• ListaCodiciErrore, invece conterrà la lista dei codici errore.

Se ad esempio nello step 3 del processo di acquisto un utente che ha fatto il primo submit ha sbagliato il suo codice fiscale e il numero di partita IVA, devo ottenere una chiamata di questo tipo:

gaq.push(['_trackEvent', 'Purchase-3', ‘Error', ‘CodFiscale-PIVA’,1]);

n.b.: nella configurazione viene dato per scontato il tracciamento delle page views della pagina grazie.

2. Configurazione di Google Analytics - tool esterno

Un'altra soluzione per tracciare questo tipo di eventi, potrebbe essere optare per un tool di terze parti che permetta una configurazione più veloce.

Google Analytics jQuery Event Tracking è lo strumento che potrebbe essere l'ideale in questo caso.

In sostanza utilizzando Jquery è possibile eseguire delle chiamate Javascript asincrone quando si verificano particolari eventi, come l'inserimento di input da parte di un utente, gli errori di inserimento, i submit, ecc.

Per l'installarlo è sufficiente uploadare lo script ed una riga di codice  nella pagina da monitorare ed il gioco è fatto. :-)

$('#element').ga('click', ['_trackEvent', 'Click', '#element']);

3. Qualche punto di analisi

Questa metrica può essere molto importante, ad esempio, per la valutazione delle performance di una campagna di web marketing che punta ad una landing page dove l'obiettivo è una form da compilare.

Se il 90% degli utenti non clicca il bottone Submit probabilmente il design della form non è il problema, ma il problema è la campagna che porta utenti non interessati. :-)

Calcolo del Form Error Rate (FER)

Per capire qual'è la percentuale di utenti che hanno incontrato dei problemi nelle form è sufficiente prendere il numero di errori (SubmitError) e dividerlo per il numero di invii del form (SubmitAll).

 

Con l'impostazione di tracciamento suggerita è possibile anche poter capire la percentuale di errori per ogni singolo errore. Ad esempio per capire la percentuale di utenti che sbagliano username è sufficiente fare:

In questo modo sarà più semplice prevedere una prioritizzazione degli interventi da effettuare in base alla gravità.

Successo degli utenti che hanno visualizzato la form

Il modo migliore per capire se effettivamente la form è un ostacolo per la compilazione dell'utente è sufficiente valutare il numero di utenti che hanno ottenuto la pagina grazie, rispetto a quelli che hanno provato a compilare la form.

Questo calcolo è molto più preciso ed indicativo rispetto a prendere come riferimento le pagine viste sulla form, poichè non è detto che tutti gli utenti fossero motivati nella compilazione.

4. Software Alternativi

5. Letture interessanti

Per finire per i feticisti delle form qualche buona lettura che ho trovato interessante:

• How To Measure The Quality Of An Online Form dal Blog di Google Analytics
• Improve The User Experience By Tracking Errors dal blog Smashing Magazine, autrice Sarah Swanson
• Useful Ideas And Guidelines For Good Web Form Design dal blog Smashing Magazine, autore Shawn Borsky
• Blog del guru delle form, Luke Wroblewski