I forms online sono diventati parte integrante della maggior parte dei siti web e di internet in generale. Il loro scopo principale è quello di aiutare sia gli utenti che le aziende a raggiungere i loro obiettivi, stabilendo una relazione o iniziando una conversazione.
I forms di registrazione sono ciò che permette alle persone di diventare membri di comunità o servizi online. Pensate a Facebook – i suoi oltre 1 miliardo di utenti si sono tutti uniti attraverso un form di registrazione;
I forms di checkout permettono alle transazioni di avvenire attraverso il web. L’iscrizione a un servizio a pagamento e l’acquisto di prodotti sono un paio di esempi che avvengono attraverso un form di checkout.
I forms di presentazione dei dati sono il modo in cui le persone condividono la conoscenza, pubblicano informazioni e comunicano online. Forum, blog e comunità sociali fanno tutti affidamento sugli utenti che pubblicano questi forms per far crescere i loro siti web.
I visitatori decideranno sistematicamente se completare o meno il tuo form in base a una serie di fattori, tra cui il beneficio atteso e lo sforzo percepito per compilare quel form insieme alle informazioni che dovranno darti.
Esploriamo gli elementi che compongono un form
Etichette
Queste etichettano letteralmente i vostri campi di input e dicono agli utenti quali informazioni devono fornire in ciascuno di essi.
- Le etichette allineate in alto sono generalmente una scommessa sicura e rendono più facile per le etichette di diverse dimensioni di adattarsi più facilmente all’interno dell’interfaccia utente;
- Le etichette allineate a sinistra sono migliori quando il form è breve e pone domande molto simili, come gli intervalli di date;
- Le etichette non sono testi di aiuto. Usa etichette succinte, brevi e descrittive in modo che gli utenti possano scansionare rapidamente il tuo form;
Campi di inserimento
I campi di inserimento sono ciò che permette ai vostri utenti di riempire il form. A seconda delle informazioni che chiedi, ci sono vari tipi che puoi usare – campi di testo, campi password, drop-down, caselle di controllo, selezionatori di date e altri.
- Evita i menu a discesa con meno di 4 opzioni.
- Raggruppa visivamente i dettagli correlati, come il nome e il cognome (ancora meglio: combinali in un unico campo ‘Nome e cognome’);
- La data di nascita può essere un singolo selezionatore di date, non tre menu a tendina separati;
- Cerca di evitare i campi opzionali del form. Se non puoi, un semplice ‘(opzionale)’ nell’etichetta è sufficiente per differenziarlo dagli altri campi.
Call To Action
Quando vengono cliccati, questi pulsanti attivano una CTA come l’invio del form.
- Evita istruzioni generiche come ‘Clicca qui‘. Invece, dichiara quali azioni fanno i pulsanti quando vengono cliccati, come ‘Crea il mio account GRATUITO‘ o ‘Inviami offerte settimanali‘;
- Evita i pulsanti di CTA’s multiple perché potrebbero distrarre gli utenti dall’obiettivo a portata di mano – in questo caso, l’invio del form;
- Il pulsante Reset è da evitare;
- Assicurati che i pulsanti di CTA abbiano l’aspetto di pulsanti;
- I pulsanti di CTA non allineati ai campi di input tendono ad essere poco estetici;
- Indicare chiaramente che il form è in fase di elaborazione dopo che l’utente lo ha inviato (e disabilitare il pulsante di invio a quel punto). Questo fornisce un feedback all’utente e allo stesso tempo evita i doppi invii.
I PULSANTI SONO DISPONIBILI IN DIVERSE FORME, DIMENSIONI E COLORI. SCEGLIETE LO STILE CHE MEGLIO SI ADATTA AL VOSTRO SITO E RICORDATEVI SEMPRE DI ETICHETTARE I VOSTRI PULSANTI IN BASE ALLA AZIONE CHE COMPIONO. QUESTO RENDERÀ ESTREMAMENTE SEMPLICE CAPIRE COSA FA IL FORM.
Aiuto
Fornisce assistenza su come compilare i campi di input quando le etichette dei campi da sole non sono sufficienti.
- I campi di input che richiedono aiuto dovrebbero essere tenuti al minimo o evitati completamente – specialmente sui dispositivi mobili;
- Un modo pulito di integrare l’aiuto è quello di mostrarlo sul lato destro del campo quando l’utente si concentra su di esso in modo che sia sempre nel contesto;
- Se lo spazio è un problema, i tooltip sono una buona soluzione.
- Cerca di evitare le icone di aiuto con una CTA di hover o click. Invece usa testi descrittivi come ‘Cos’è questo?‘ o ‘Perché è necessaria questa informazione?‘
Feedback/convalida del form
Il tuo form online deve essere in grado di fornire un feedback.
- Agli utenti dovrebbe essere sempre permesso di cliccare sul pulsante di invio. La validazione in linea in tempo reale è una buona pratica – specialmente quando diversi campi di input sono in relazione tra loro;
- Quando l’invio del form fallisce, un messaggio di errore dovrebbe apparire con una doppia enfasi visiva (tipicamente di colore rosso con un’icona di avvertimento) sopra il form e indicare perché è fallito;
- I campi errati (se presenti) dovrebbero essere evidenziati e associati visivamente all’errore
Il testo di convalida dovrebbe essere fornito accanto ai campi errati fornendo una soluzione di facile comprensione su come correggerli; - Per evitare confusione, riservare il colore rosso e le icone di avvertimento solo per i messaggi di errore
SII DESCRITTIVO NEI TUOI MESSAGGI DI ERRORE. ‘NOME UTENTE GIÀ IN USO‘ È UN MESSAGGIO MIGLIORE DI ‘NOME UTENTE NON VALIDO‘ – FAI CAPIRE AGLI UTENTI COSA È ANDATO STORTO.
Ora che abbiamo visto gli elementi essenziali del form, vediamo le 10 best practices per ottimizzare il form nel suo complesso
1. Chiedi solo ciò che è indispensabile
Ogni singolo campo che aggiungi a un form influenzerà il suo tasso di conversione, quindi assicurati di chiedere solo ciò di cui hai veramente bisogno. Hai davvero bisogno di sapere il loro numero di telefono se li contatterai solo se hanno bisogno di supporto? Non puoi chiederlo quando richiedono assistenza? Hai davvero bisogno di sapere il loro ‘titolo’ o se sono uomini o donne? A seconda del tuo business potresti averne bisogno. Chiedetevi sempre perché e come vengono usate le informazioni che chiedete ai vostri utenti.
Siete mai entrati in un negozio di abbigliamento e vi è stato chiesto di fornire il vostro numero di carta di credito prima di provare qualcosa? Probabilmente no. Se il vostro form è per permettere ai vostri utenti di accedere ad una prova gratuita di 30 giorni, non chiedete i dati della loro carta di credito. Facendo questo, i vostri utenti inizieranno immediatamente a pensare:
– ‘Oh, pensavo fosse una prova gratuita, perché hanno bisogno della mia carta di credito?’;
– ‘Mi faranno pagare dopo 30 giorni? E se non mi piace e me ne dimentico?’
Questo è esattamente ciò che dovete evitare – far sì che i vostri utenti si interroghino sul perché state chiedendo queste informazioni così presto nella vostra relazione. Assicurati di chiedere solo le informazioni di cui hai bisogno in quel momento e concentrati sul rendere la prova gratuita una esperienza fantastica.
2. Evita il form a più colonne
Vai su un form e ci sono campi che si muovono sia orizzontalmente che verticalmente.
Quello che dovresti fare è rendere il form il più semplice possibile. Non vuoi che i visitatori debbano pensare a come compilare un form, quindi il modo per risolvere questa situazione è assicurarsi che i tuoi forms siano tutti a colonna singola e preferibilmente verticale. Ma anche orizzontale, se ci sono pochi campi del form e non hai molti spazi verticali, funzionerà.
3. Il posizionamento del form
Se molti dei visitatori del tuo sito sono visitatori in fase iniziale in termini di ricerca, molto probabilmente non saranno pronti a compilare un form. Potrebbero volere prima delle informazioni e abbiamo visto dei successi con forms online ad alta conversione nel posizionare il form più in basso nella pagina piuttosto che essere in cima alla pagina.
4. Rendi facile per i tuoi utenti la scansione del form
Evita di usare titoli generici come ‘Compila questo form per continuare‘ e opta invece per uno più descrittivo come ‘Registrati per la tua prova gratuità o ‘Unisciti alla nostra comunità‘.
Tutti i diversi elementi del form dovrebbero essere visivamente distinti l’uno dall’altro. Gli utenti devono essere in grado di scansionare il form e capire immediatamente qual è il pulsante di invio, quali sono le etichette e quali sono i campi di input che devono inserire e stimare il tempo di completamento. Includere spazi bianchi migliorerà la leggibilità.
5. Ordina il form in modo logico
I dettagli dovrebbero essere chiesti in modo logico dal punto di vista dell’utente, non del database. In genere, è insolito chiedere l’indirizzo di qualcuno prima del suo nome. Per i forms lunghi, struttura più campi raggruppandoli visivamente in sottosezioni come: Dettagli dell’account, informazioni di contatto, dettagli di pagamento, ecc;
6. Usa i default intelligenti
I default intelligenti sono molto buoni in quanto riempiono i campi per il 90% dei casi, risultando in compilazioni più veloci. Un paio di esempi: Un menu a tendina della lingua può essere predefinito alla lingua del browser e il paese può essere predefinito al paese dell’IP dell’utente usando la geolocalizzazione.
7. Spezza forms complessi in un processo a più fasi
Per i forms più lunghi che non possono essere accorciati, l’opzione migliore è quella di dividere il processo in vari passi di dimensioni ridotte. Il processo del form in più fasi può aumentare le percentuali di successo e in generale rendere il tuo form meno intimidatorio da una prima impressione. Assicurati di dividere le informazioni richieste in modo logico e che agli utenti venga mostrato il loro progresso all’interno del processo. Questo può essere ottenuto indicando il passo in cui si trovano (esempio: Passo 2 di 3) e fornendo un indizio visivo come una barra di progresso o una percentuale – che è il modo in cui il form di sondaggio tipicamente gestiscono la cosa.
Ricorda che i visitatori prenderanno la decisione in base allo sforzo percepito. Quindi, se vengono su una pagina e vedono un form lungo, stanno vedendo tutto in una volta, lo sforzo percepito sarà enorme. Se vanno su un sito e vedono solo uno o due campi del form con un pulsante successivo, potrebbero non avere una chiara indicazione o idea di quanti campi del form ci saranno, ma penseranno comunque che lo sforzo percepito sarà inferiore in base a ciò che vedono visivamente dal form.
8. Test di usabilità
Non fatevi spaventare dal termine – i test di usabilità sono indispensabili in una parte così cruciale del vostro sito web o applicazione. Molto spesso, eseguire solo due test o semplicemente chiedere a un collega o un amico di passare attraverso un prototipo del form può darvi ampie intuizioni su quanto sia usabile il form e su ciò che non è immediatamente ovvio osservando come lo compilano.
9. Effettua A/B split test
Anche se i forms su diversi siti hanno molto in comune, non significa che copiare il form di iscrizione di Amazon funzionerà anche per il tuo sito web. Gli A/B split test ti permettono di fare piccole alterazioni al tuo form che migliorano gradualmente il suo tasso di conversione. I test includono l’alterazione del pulsante di CTA nel testo, nella dimensione e nel colore, rendendo i fattori di fiducia più prominenti, regolando le posizioni dei campi, rimuovendo i campi opzionali, trovando campi non correlati non necessari e molti altri.
10. Conformati agli standard
Assicuratevi che gli utenti possano saltare attraverso i campi usando il tasto Tab e che la tabulazione sia in un ordine logico. È anche importante conformarsi agli standard del web, per esempio mettendo i forms all’interno dei tag HTML
