Praticamente tutti i siti web includono almeno un form. Dalla semplice raccolta di indirizzi mail per iscriversi a una newsletter, a complesse form per la gestione di pagamenti, è imperativo progettare il form per renderlo facile da usare e comprendere.

Gli standard dei form evolvono assieme a tutto il resto. La pratica migliore e sempre consigliata è quella di rendere i form i più semplici possibili, senza chiedere decine di dati ai clienti. Ecco perchè vi darò questi 7 consigli per rendere i vostri form i più performanti possibile.

1. FACILE LETTURA

Gli utenti generalmente non iniziano a guardare dalla prima riga un sito internet, ma fanno come una rapida scansione per capire se i contenuti saranno di loro interesse o meno. Lo stesso accade con i form. A una rapida occhiata del modulo si dovrebbe essere in grado di capire a cosa serve e come inviarlo.

Un form di facile lettura comprende:

  • Contrasto: il testo deve essere corto e di facile lettura. Lasciate perdere strane tonalità di colore e puntate sul tradizionale scuro su chiaro.
  • Gruppi e spaziature: raggruppate le informazioni simili nei form di medio-grande lunghezza. Quando raccogliete le informazioni di pagamento per esempio, raggruppate le informazioni del cliente, quelle di pagamento e quelle di spedizione in 3 gruppi diversi, sicuramente più leggibili rispetto a un blocco solo. Usate una spaziatura intelligente tra la label e il campo a cui sono collegate.
  • Pulsante d’invio ben visibile: rendete questo pulsante grande e ben visibile. Il testo al suo interno dovrebbe comunicare ciò che succederà cliccandolo, come “invia”, “paga ora” o “passo successivo”. Ricordate di mostrare all’utente quando il form viene correttamente inviato.

Web Form

2. LABEL MOVIBILI

Ci sono molti dibattiti sull’usare i testi indicativi dentro i campi. Il problema è che troppe volte il testo non sparisce con un semplice click, ma l’utente è costretto a eliminarlo manualmente per iniziare a scrivere. Pessimo.

Label Movibili
Personalmente reputo la presenza dei placeholders fondamentale, preferendoli decisamente alle label. Tuttavia potrebbe essere un buon compromesso l’utilizzo di una soluzione interattiva: floating labels. La label sarà inclusa nella input, come se fosse un placeholder, per poi spostarsi al click ma senza scomparire, il tutto accompagnato da un effetto gradevole.

3. USATE LE MASCHERE DI CAMPO

Una maschera di campo appare solo quando l’utente attiva il campo cliccandoci sopra, proponendo un ulteriore suggerimento sul tipo d’informazione richiesta da quel campo. La maschera può assistere l’utente formattando il dato automaticamente nel modo corretto, evitando errori che non farebbero completare la compilazione del form.

Un buon esempio della maschera di campo in azione è con i numeri di telefono. Consideriamo i seguenti numeri:

  • (000) 000-0000
  • 000-000-0000
  • 0000000000

Come sa l’utente quale di questi funzionerà? Il campo aggiusterà automaticamente il dato durante la scrittura dell’utente, lasciando l’unico pensiero di inserire il numero (inoltre questo sistema risolve il problema del cambio di tastiera per i caratteri speciali su dispositivi mobile).

Maschere di Campo

4.RENDETE I FORM KEYBOARD-FRIENDLY

Per voi è impossibile sapere quale tipo di dispositivo userà l’utente per compilare il vostro form. Considerate tutti i tipi di tastiera che affronteranno il vostro form, e aggiustate i campi per utilizzare la migliore opzione.

Sui desktop, gli utenti dovrebbero essere in grado di entrare in un form e compilare tutti i campi senza dover cliccare col mouse. Fate avanzare automaticamente al prossimo campo terminata la compilazione di quello precedente, o utilizzare il tasto tab o enter per proseguire.

Sui dispositivi mobile, fate corrispondere la giusta tastiera al tipo di dato richiesto. Se il campo è per le lettere, fate alzare la tastiera alpha; per i numeri, la tastiera numerica.

Tastiera

5. OPTATE PER FORM VERTICALI

I form verticali sono più facili per gli utenti rispetto a quelli a colonna multipla. Inoltre bisognerebbe far si che tutti i campi fossero visibili senza dover scrollare la finestra.

L’unica eccezione è per i form super corti, dove all’utente è richiesto di inserire una mail e un nome. Due campi affiancati più la CTA possono funzionare in questo caso, a patto che i due campi siano lunghi abbastanza per mostrare tutto il contenuto scritto all’utente.

Ricordatevi inoltre di inserire i campi secondo un ordinamento logico e non a caso.

Web Form

6. LIMITATE IL DIGITARE

Utilizzate il maggior numero di soluzioni pre-compilate possibile. Non c’è niente di più delizioso dell’inserire il proprio indirizzo e dopo pochi caratteri vedersi suggerire dalle API di Google l’indirizzo completo.

Questo ci porta a 3 considerazioni:

  • Rende il tutto più facile agli utenti, specialmente su mobile.
  • Aiuta a ridurre il numero di campi necessari.
  • Aiuta ad eliminare eventuali errori di battitura da parte degli utenti.

Autocompletamento

7. MANTENETELO CORTO E BELLO

Sarete tentati di chiedere all’utente decine di informazioni. Resistete!

Dovete chidere solo le informazioni vitali. Studi confermano che gli utenti rinunciano più spesso a compilare form che richiedono grandi quantità di dati. Se avete bisogno di altre informazioni, potete sempre inviare una mail successivamente, chiedendo ciò di cui avete bisogno.

Rinunciate alle informazioni opzionali. Non chiedete dati rindondanti. Non usate campi multipli dove potete usarne solo uno.

form breve

CONCLUSIONI

Date qualcosa in cambio della compilazione. Rendete il form divertente o interessante. Ringraziate l’utente.

Creare form cosi facili da leggere e da usare, incrementerà le vostre possibilità di accumulare dati, convertendo un visitatore in un utente abitudinario.

16 consigli per aumentare il traffico e le visite al tuo Sito Web

1 COMMENTO

LASCIA UN COMMENTO