7 segreti per la progettazione di grandi forme
Quasi ogni design del sito web include un qualche tipo di modulo. Dalla semplice raccolta di indirizzi e-mail per iscriversi a una newsletter o una notifica a moduli di raccolta di pagamento completi, è imperativo progettare un modulo che sia facile da usare e da comprendere.
Anche gli standard del design delle forme si stanno evolvendo. Sebbene molti moduli includessero più colonne e richiedessero molte informazioni, la maggior parte delle migliori pratiche suggerisce ora di mantenere le forme il più semplici possibile. E c'è molto anche per il design. Una buona forma è scansionabile, non richiede molta digitazione e include un'etichettatura e una formattazione intelligenti per aiutare gli utenti a compilare correttamente i moduli la prima volta.
Ecco alcuni segreti per assicurarti di aver progettato un modulo compilato dagli utenti.
1. Rendilo facile da scansionare e leggere
Sapete che gli utenti analizzano i siti Web per raccogliere informazioni e determinare quali azioni intraprenderanno o se il contenuto e il design li interessano o meno. Lo stesso vale per le forme. L'utente dovrebbe essere in grado di dire quali informazioni sono necessarie a colpo d'occhio e fornire una chiara spiegazione di cosa è il modulo e come inviarlo.
Una forma altamente scansionabile include quanto segue:
- Contrasto: il testo deve essere breve e di facile lettura. Evita molto colore e aderisci al buio tradizionale su combinazioni di testo chiare.
- Raggruppamento e spazio: informazioni di gruppo simili su moduli più lunghi. Per esempio, quando si raccolgono le informazioni di pagamento, raggruppare le informazioni sui clienti, le informazioni di pagamento e le informazioni sulla spedizione. Tre blocchi più brevi sono più facili da digerire rispetto a uno lungo. Usa la spaziatura intelligente per collegare le etichette al campo che spiegano, piuttosto che una spaziatura uniforme tra il testo e gli elementi del campo.
- Finale chiaro / invito all'azione : rendi il pulsante grande e facile da vedere. La microcopia all'interno del pulsante dovrebbe dire agli utenti cosa accadrà, come "invia", "paga ora" o "procedi al passaggio successivo". Ricorda di chiudere il ciclo di feedback e comunicare agli utenti quando un modulo viene presentato correttamente.
2. Considerare le etichette mobili
C'è stato un sacco di dibattito sull'opportunità o meno di usare il testo di suggerimento nei campi del modulo. Il problema principale è che troppo spesso questo testo non va via con un clic e gli utenti devono eliminarlo attivamente per iniziare a digitare. Questo e'imbarazzante.
Inoltre, il Trovato Nielsen Norman Group i campi vuoti possono attirare l'attenzione e aiutare gli utenti a inserire le informazioni in modo più chiaro.
Se senti la necessità di utilizzare i suggerimenti, considera una soluzione interattiva, etichette fluttuanti. Includi le informazioni dell'etichetta all'interno dei campi modulo in modo che assomiglino al testo segnaposto, ma consenti al testo di animare e passa alla posizione in alto a sinistra quando l'utente passa sopra o fa clic sul campo. L'etichetta o il suggerimento non scompare mai e non interferisce con il tentativo dell'utente di compilare il modulo. (Inoltre la piccola animazione è una sorpresa divertente per gli utenti.)
3. Usa Field Masks
Le maschere di campo possono fornire alcuni degli stessi indizi e suggerimenti sulla forma, ma senza interferire con l'usabilità. Una maschera di campo viene visualizzata solo quando un utente attiva un campo e fornisce un ulteriore indizio di scansione su quali informazioni sono necessarie. La maschera può aiutare ulteriormente l'utente formattando automaticamente le informazioni nel tentativo di evitare errori che daranno il via al modulo in fase di invio.
Un buon esempio di una maschera di campo in azione è con i numeri di telefono. Considera le opzioni di più formati:
- (000) 000-0000
- 000-000-0000
- 0000000000
In che modo un utente sa quale funzionerà? Il campo modulo specifica e regola il formato come un utente, quindi non deve pensarci e deve solo digitare numeri. (Ciò evita anche il fastidio di dover passare da una tastiera all'altra su un dispositivo mobile.)
4. Rendi i tasti sensibili alla tastiera
Non hai modo di sapere su quale tipo di dispositivo un utente incontrerà il tuo modulo, ma dovrebbe essere ugualmente facile da compilare comunque. Prendi in considerazione tutti i diversi tipi di tastiere che potrebbero inviare informazioni al modulo e modificare i campi per rilevare e utilizzare l'opzione appropriata.
Sui desktop, gli utenti dovrebbero essere in grado di inserire un modulo e compilare ciascun campo senza dover fare clic con il mouse. Avanzare automaticamente da un campo a quello successivo al completamento o utilizzare le schede o immettere per spostarsi. W3.org ha una solida serie di raccomandazioni sulla tastiera per te da seguire
Sui dispositivi mobili, abbina il tipo di tastiera ai dati richiesti. Se l'input è per lettere, solleva la tastiera alfa; per i numeri, visualizzare l'opzione numerica. Da Google: "Gli utenti delle app apprezzano le app che forniscono una tastiera appropriata per l'immissione di testo. Assicurati che questo sia implementato in modo coerente in tutta l'app anziché solo per determinati compiti ma non per altri. "
5. Optare per il formato verticale
Le forme verticali sono più facili per gli utenti rispetto a più formati di colonne. Per la regola di best practice è assicurarsi che tutti i campi possano adattarsi allo schermo senza scorrere in un formato dall'alto al basso.
L'unica eccezione è per i moduli super-brevi in cui un utente deve solo inserire un indirizzo e-mail o un nome e un indirizzo e-mail. Due colonne affiancate seguite da un pulsante di invito all'azione possono funzionare bene in questa situazione, purché la casella di posta elettronica sia sufficientemente lunga per consentire agli utenti di visualizzare tutte le lettere del loro indirizzo.
Ricorda di ordinare gli elementi logicamente anche in una forma verticale. Se stai raccogliendo nome, cognome, indirizzo email e colore dei capelli, fai una sequenza in questo modo.
6. Digitare il limite
Utilizzare il maggior numero possibile di soluzioni di pre-riempimento con i moduli. Niente è più piacevole se si aggiunge un indirizzo e dopo i primi pochi tocchi, l'API di Google inizia e suggerisce le opzioni di indirizzo.
Questo fa tre cose:
- Rende più facile per gli utenti, in particolare sui dispositivi mobili.
- Aiuta a limitare il numero di campi necessari.
- Può aiutare a eliminare alcuni errori dell'utente, come l'errata digitazione.
Considera la stessa cosa con gli indirizzi email, in modo tale che agli utenti vengano assegnati domini di posta popolari dopo il simbolo @. Quando un utente digita [email protected] .... il campo suggerisce automaticamente [email protetta] .
7. Keep It Short and Sweet
Sarai tentato di chiedere agli utenti molte informazioni nei moduli. Resistere all'impulso!
Chiedete solo informazioni vitali nei moduli. C'è una maggiore probabilità che gli utenti compilino moduli che richiedono meno impegno. Se hai bisogno di ulteriori informazioni in seguito, puoi inviarli via email dal tuo elenco per chiedere ulteriori dettagli. (Come qualcuno che ha già aderito, l'utente è più propenso a interagire con te per ulteriori informazioni in questo momento.)
Evita i campi opzionali. Non chiedere informazioni ridondanti. Non utilizzare più campi in cui è possibile utilizzarne uno (ad esempio numeri di telefono).
Conclusione
Offri agli utenti qualcosa in cambio della compilazione di un modulo. Rendilo divertente o interessante. Grazie per l'utente.
Creare un modulo facile da leggere e facile da usare aumenterà le possibilità di raccogliere dati e trasformare un visitatore di un sito Web in un utente ripetuto.