Fai tutto il possibile per creare un sito Web che porterà i visitatori alla conversione. Quando studi l'analisi, sei entusiasta di vedere che il percorso dell'utente che hai creato è supportato dai suoi visitatori, più e più volte. Tuttavia, c'è qualcosa che impedisce loro di essere convertiti.
Le modulo di contatto è una parte essenziale del viaggio dei tuoi visitatori. Anche se in realtà hai quasi tutto ciò che un sito web può offrire, a modulo di contatto potrebbe rovinare l'esperienza se non utilizzato correttamente. Pulsanti "rotti", campi confusi, troppi passaggi, un'interfaccia disorganizzata... anche il posizionamento dei modulo di contatto potrebbe disturbare l'esperienza dell'utente.
Ci sono molte cose che possono andare storte.
Regole 5 per la creazione del modulo di contatto perfetto
Uno studio di tracciamento oculare di Google pubblicato nel 2014 ha dimostrato che seguire le linee guida di utilizzo più basilari per la progettazione forme migliorerà significativamente l'esperienza dell'utente. Nello specifico, quando un modulo di contatto rispetta tutte le regole, il 78% degli utenti riesce a compilarlo e inviarlo in un solo tentativo. Quando un modulo di contatto viola queste regole, tuttavia, solo il 42% è in grado di farlo in un solo tentativo.
Curioso di sapere quali sono queste regole? Quindi continua a leggere.
Regola n. 1: concentrati sull'allineamento
Come vedrai in altre regole qui, le persone sono spesso preoccupate per la lunghezza di forme di contatto, che spesso porta a scelte progettuali sbagliate. Prendiamo ad esempio la questione dell'allineamento.
Potresti vedere un modulo come questo sul sito BrainTraffic e pensare: Hmmm ... ma non è un po 'troppo lungo per essere completato?
Un modo per pensare di risolvere questo "problema" è spostare le etichette a sinistra e posizionare i campi delle risposte a destra. Tuttavia, gli esperti di UX ti diranno che questo è un importante no-no in quanto compromette la capacità di scansionare il modulo. Lo stesso vale se hai pensato di posizionare i campi uno accanto all'altro in orizzontale.
Se vuoi il tuo forme i contatti soddisfano lo standard di allineamento, ecco cosa devi fare:
- Allinea a sinistra tutte le etichette, i campi modulo e il pulsante di invito all'azione principale.
- Non allineare mai i campi correlati orizzontalmente. È possibile strutturare il modulo in modo logico, ma ogni domanda o campo deve essere impilato verticalmente.
- Qualsiasi campo con domande a scelta multipla (con meno di sei opzioni) deve essere visualizzato in un elenco verticale di punti o caselle di controllo, non in un menu a discesa.
Regola 2: include tutti i campi pertinenti
Quando si tratta di progettare moduli di contatto, potresti pensare che più brevi sono, meglio è, giusto? Non è sempre così. Ciò che conta di più è fornire agli utenti tutti i campi necessari e pertinenti.
Michael Aagaard, Senior Conversion Optimizer for Unbounce, sì una presentazione nel 2015 che ha affrontato questo problema. Lui e il suo team volevano sapere cosa sarebbe successo se avessero abbreviato questo modulo di contatto:
Come puoi vedere, hanno rimosso quelli che ritenevano essere campi non necessari per semplificare il processo di compilazione del modulo. Tuttavia, al termine del test, hanno riscontrato un calo del 14% nelle conversioni con la forma più breve.
Regola # 3: semplificare i campi
Non importa se i tuoi utenti stanno interagendo con il tuo modulo di contatto utilizzando un desktop o un dispositivo mobile, o se hanno bisogno di tecnologia assistiva per aiutarli, il modulo dovrebbe essere attrezzato. per semplificare il processo di iscrizione.
Ecco alcune tecniche che dovresti conoscere:
Tabulazione
Per gli utenti desktop e quelli con problemi di accessibilità, assicurati che il tuo modulo di contatto abbia l'ordinamento logico delle schede abilitato.
Maschere di input
Anziché costringere gli utenti a indovinare come si desidera che vengano formattati determinati campi, è possibile aggiungerli con maschere di input che li formattano automaticamente.
Completamento automatico di Google
Piuttosto che codificare ogni campo in modo che sia formati automaticamente secondo gli standard da rispettare, attivare la compilazione automatica utilizzando il plug-in di compilazione automatica degli indirizzi di Google. Questo non solo ti eviterà di dover gestire errori di ortografia e indirizzi non correttamente compilati, ma eviterà ai tuoi visitatori di digitare la maggior parte di queste informazioni.
Regola # 4: Esci da tutto
Mentre mi rendo conto che questa regola andrà contro le basi del minimalismo, è una regola a cui dovresti prestare molta attenzione per evitare di frustrare inutilmente i tuoi visitatori.
Lascia che ti spieghi: hai un modulo di contatto che sembra piuttosto semplice. I tuoi utenti lo compilano in base a ciò che suggeriscono le etichette e fanno clic sul pulsante di invio. Poi ricevono questo orribile messaggio rosso: “Non l'hai fatto bene! Torna indietro, correggi il modulo e rispediscilo! "
Probabilmente lo hai incontrato come utente e sai quanto può essere frustrante, soprattutto se alcune delle informazioni che hai inserito vengono eliminate quando viene generato l'errore. Quindi, invece di lasciare che gli utenti indovinino cosa deve essere corretto e come, non lasciare che arrivi a questo punto. Scrivi tutto sulla strada:
- Fornire un focus sul campo (soprattutto sui dispositivi mobili) in modo che gli utenti sappiano esattamente dove stanno compilando un modulo.
- Annotare tutti i requisiti di formattazione se non si utilizzano maschere di input per formattare automaticamente i campi.
- Indica esplicitamente quando un campo è "Facoltativo" (usa la parola, non l'asterisco rosso).
- Offri agli utenti la possibilità di mostrare o nascondere il campo della password mentre lo inseriscono.
- Visualizza un messaggio di errore non appena l'utente è impegnato in un campo. Non aspettare fino alla fine per farlo.
Regola # 5: non nascondere i consigli
Il testo della scheda in un modulo di contatto è simile al seguente:
Vedi come Target posiziona le etichette nel campo? In alcuni moduli di contatto, queste etichette / indicazioni scompaiono semplicemente quando un utente fa clic su un campo. Il target gestisce questo in modo leggermente diverso e sposta l'etichetta nella parte superiore della casella del campo (vedere "indirizzo e-mail").
Indipendentemente da come viene gestito, gli esperti di usabilità, come il gruppo Nielsen Norman, ti dirà che questa è una cattiva pratica di progettazione perché:
- Questo è problematico per gli utenti multitasking, distratti o troppo frenetici nel campo successivo. Quando l'indizio scompare, gli utenti devono lasciare il campo per riscoprire ciò di cui hanno bisogno.
- I suggerimenti che scompaiono impediscono inoltre agli utenti di tornare a un modulo per controllare il loro lavoro o correggere un errore senza eliminare completamente la risposta per vedere cosa c'è sotto.
- Il testo grigio più chiaro utilizzato per i suggerimenti dei segnaposto non è l'ideale per una facile lettura.
- I campi con il testo di suggerimento possono essere confusi con i campi che hanno già compilato dati, lasciando che gli utenti li ignorino, inviino il modulo e ricevano un messaggio di errore.
- Alcuni strumenti di lettura dello schermo non sono in grado di leggere il testo dei suggerimenti.
Secondo il NNG, gli utenti trovano i campi vuoti più attraenti di quelli che contengono testo di indizio. Anche se i tuoi moduli sembrano più lunghi per posizionare queste etichette o descrittori sopra il campo, migliorerà l'usabilità.
Questo è tutto per questi suggerimenti, spero che ti aiuteranno a creare moduli di contatto migliori.
