Chiedi solo quello che è necessario
Bisogna imparare ad inserire solo i campi che servono. L’esempio qui accanto è la registrazione di Airbnb. Il numero di telefono è l’unico valore utile che serve all’azienda per capire se sei già un utente registrato oppure no. Quindi hanno deciso di mostrare solo il campo del numero di telefono e poi negli step successivi chiedere le altre informazioni.
Se ci sono dei campi opzionali conviene eliminarli perché la presenza di meno campi rende più invitante la compilazione
Sono stati fatti molti A/B test provando le due versione con e senza i campi opzionali ed è emerso che le seconde hanno performato meglio. Quindi il consiglio è quello di non mettere campi se non sono strettamente necessari. Le informazioni possono essere richieste in un secondo momento.
Interessante l’esempio di Expedia “How Expedia’s A/B Test Could Increase Your Leads by 25%“.
“Apparently, this field may have been confusing visitors who began entering their bank name and address, instead of their billing address. It definitely generated a higher bounce rate than the shortened form on the right. Simply removing a field THAT THEY WEREN’T EVEN REQUIRING, increased their site’s annual profit by $12 million!”.
Amir Amirrezvani
Indica chiaramente quello che è opzionale
Come detto sopra è meglio non inserire campi opzionali perché possono bloccare le persone nella compilazione ma se è necessario inserirli converrebbe evidenziare solo quale è il campo opzionale, scrivendolo accanto alla label.
Lunghezza di campi
La lunghezza dei campi deve essere conforme con il dato da inserire. Una email ha sicuramente molti più caratteri di un CAP.
Questo non vuol dire fare lunghezze differenti per ogni campo, ma il suggerimento è quello di creare tre grandezze standard: una small, una medium e una large che sono come dei mattoncini che si utilizzano per comporre la pagina. Le lunghezze vanno decise in modo da creare armonia nella composizione.
Inserimento delle date
Bisogna fare attenzione all’inserimento delle date e all’uso del calendar. Non tutte le date sono uguali.
Le date di nascita spesso sono un po’ indietro nel tempo e selezionarle con i calendar non è sempre facile. Si preferisce quindi utilizzare dei campi di testo.
Scegliere l’elemento giusto
Quando si progetta è importante capire quale elemento utilizzare per agevolare la compilazione.
Non esistono solo text area e select. Ricordiamoci che sono presenti anche radio button (una selezione unica tra più scelte), check box (selezione multipla) e altri elementi come slider e molti altri, soprattutto da mobile.
La select va utilizzata quando è presente una scelta tra molti elementi, è sconsigliata quando le selezioni sono poche (2 o 3), ad esempio si sconsiglia di utilizzarla quando le opzioni sono “Si” o “No” o nel Genere. Ricordiamoci inoltre che la select è un elemento molto difficile da utilizzare nel mobile.
Suggerimenti per il completamento – Autocomplete
Dove è possibile consigliamo di inserire degli aiuti per il completamento delle text area (autocomplete). Questo strumento è molto utile soprattutto nella selezione dei comuni e città perché previene gli errori di battitura e fa risparmiare tempo.
Si consiglia di aggiungere anche dei tooltip o overlay di spiegazione quando si richiedono informazioni che non sono comprensibili da tutti, come il CVV della carta di credito o il numero del MAV. Molto utile in questi casi è utilizzare un overlay dove inserire l’immagine fisica della carte di credito o del bollettino con evidenziato il numero da riportare.
Potrebbe interessarti anche
Reference e dove imparare di più
Luke Wroblewski – https://www.lukew.com/resources/web_form_design.asp