Vai al contenuto principale

Regole 5 per creare un modulo di contatto perfetto

Divi: il tema WordPress più semplice da usare

Divi: il miglior tema WordPress di tutti i tempi!

più Download di 600.000, Divi è il tema WordPress più popolare al mondo. È completo, facile da usare e viene fornito con oltre i modelli gratuiti 62. [Consigliato]

Stai facendo tutto il possibile per creare un sito Web che conduca i visitatori alla conversione. Quando studi analisi, sei lieto di scoprire che il percorso utente che hai creato è curato dai suoi visitatori più e più volte. Tuttavia, c'è qualcosa che impedisce loro di essere convertiti.

Il 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, un modulo di contatto potrebbe rovinare l'esperienza se non viene utilizzato correttamente. Pulsanti "rotti", campi confusi, troppi passaggi, un'interfaccia disorganizzata ... anche posizionando il modulo di contatto potrebbe interrompere 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 su 2014 ha dimostrato che seguire le linee guida di utilizzo più basilari per la progettazione dei moduli migliorerà notevolmente l'esperienza dell'utente. In particolare, quando un modulo di contatto segue tutte le regole, 78% degli utenti può compilarle e inviarle in un solo tentativo. Quando un modulo di contatto viola queste regole, tuttavia, solo 42% è in grado di farlo in un solo tentativo.

Curioso di sapere quali sono queste regole? Quindi continua a leggere.

Regola # 1: focus sull'allineamento

Come vedrai in altre regole qui, le persone sono spesso preoccupate per la lunghezza dei moduli di contatto, il che spesso porta a scelte di design scadenti. Prendi la questione dell'allineamento, per esempio.

Potresti vedere un modulo come questo sul sito Web BrainTraffic e pensare: Hmmm ... ma non è un po 'troppo lungo per essere completato?

compilare form.png

Un modo di pensare a risolvere questo "problema" è spostare le etichette a sinistra e posizionare i campi di risposta a destra. Tuttavia, gli esperti di UX ti diranno che questo è un no-no major perché compromette la capacità di scansionare il modulo. Lo stesso vale se pensassi di posizionare i campi uno accanto all'altro in orizzontale.

Se desideri che i tuoi moduli di contatto soddisfino lo standard di allineamento, ecco cosa devi fare:

Crea facilmente il tuo sito Web con Elementor

Elementor ti consente di creare facilmente qualsiasi design di sito Web con un aspetto professionale. Smetti di pagare caro per quello che puoi fare da solo. [Free]

  • Allinea tutte le etichette, i campi modulo e il pulsante di invito all'azione principale a sinistra.
  • Non allineare mai i campi correlati in orizzontale. È possibile strutturare il modulo logicamente, 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, si potrebbe pensare che più è corto, meglio è? Questo non è sempre il caso. Ciò che conta di più è fornire agli utenti tutti i campi necessari e pertinenti.

Michael Aagaard, lo Strumento per ottimizzare le conversioni per Unbounce, realizzato una presentazione in 2015 che ha risolto questo problema. Lui e il suo team volevano sapere cosa sarebbe successo se avessero abbreviato questo modulo di contatto:

esempio di modulo di contatto court.png

Come puoi vedere, hanno rimosso quelli che ritenevano campi inutili per semplificare il processo di compilazione del modulo. Tuttavia, alla conclusione del test, hanno scoperto una riduzione delle conversioni 14% con la forma più breve.

Regola # 3: semplificare i campi

Non importa se i tuoi utenti interagiscono con il tuo modulo di contatto utilizzando un desktop o un dispositivo mobile o se hanno bisogno di tecnologia di supporto per aiutarli, il modulo deve essere attrezzato per semplificare il processo di input.

Ecco alcune tecniche che dovresti conoscere:

Tabulazione
Per gli utenti desktop e quelli con problemi di accessibilità, assicurarsi che il modulo di contatto abbia un ordine di tabulazione logico abilitato.

Stai cercando i migliori temi e plugin per WordPress?

Scarica i migliori plugin e temi WordPress su Envato e crea facilmente il tuo sito web. Già più di 49.720.000 download. [ESCLUSIVO]

Maschere di input
Invece di forzare gli utenti a indovinare come si desidera formattare determinati campi, è possibile aggiungerli con maschere di input che li formattano automaticamente.

campi di formattazione html.png

Completamento automatico di Google
Invece di codificare ogni campo per formati automaticamente in base agli standard da rispettare, attivare il riempimento automatico utilizzando il plugin per il riempimento automatico degli indirizzi. Ciò non solo ti eviterà di dover affrontare errori di ortografia e indirizzi erroneamente compilati, ma impedirà anche ai tuoi visitatori di digitare la maggior parte di queste informazioni.

Regola # 4: Esci da tutto

Anche se mi rendo conto che questa regola andrà contro i principi di base del minimalismo, questa è una regola che dovresti prestare particolare attenzione per evitare di frustrare inutilmente i tuoi visitatori.

Lasciami spiegare: hai un modulo di contatto che sembra abbastanza semplice. I tuoi utenti lo riempiono in base a ciò che suggeriscono le etichette e fanno clic sul pulsante di invio. Quindi ricevono questo orribile messaggio rosso: "Non hai fatto bene! Torna indietro, correggi il modulo e rispediscilo! "

Probabilmente l'hai incontrato come utente e sai quanto può essere frustrante, specialmente se alcune delle informazioni che hai inserito vengono rimosse quando l'errore viene eliminato. Quindi, piuttosto che lasciare che gli utenti indovinino ciò che deve essere riparato e come, non lasciare che arrivi a quel 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.
  • Scrivi tutti i requisiti di formattazione se non usi le maschere di input per formattare automaticamente i campi.
  • Indica esplicitamente quando un campo è "Opzionale" (usa la parola, non l'asterisco rosso).
  • Offri agli utenti la possibilità di mostrare o nascondere il campo della password durante la digitazione.
  • Visualizza un messaggio di errore non appena l'utente entra in un campo. Non aspettare fino alla fine per farlo.

form wordpress.png errore

Regola # 5: non nascondere i consigli

Il testo della scheda in un modulo di contatto è simile al seguente:

campo con tips.png

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 lo gestisce in modo leggermente diverso e sposta l'etichetta nella parte superiore della casella del campo (vedere "indirizzo e-mail").

Crea facilmente il tuo negozio online

Scarica gratuitamente WooCommerce, i migliori plug-in di e-commerce per vendere i tuoi prodotti fisici e digitali su WordPress. [Consigliato]

Indipendentemente da come viene gestito, gli esperti di usabilità, come il gruppo Nielsen Norman, ti dirò che è una cattiva pratica di progettazione perché:

  • Ciò è problematico per gli utenti multitasking, distratti o troppo veloci nel campo successivo. Quando l'indice 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 segnaposto non è l'ideale per una facile lettura.
  • I campi con testo di suggerimento possono essere confusi con i campi che hanno già compilato i dati, consentendo agli utenti di ignorarli, inviare il modulo e ricevere un messaggio di errore.
  • Alcuni strumenti di lettura dello schermo non sono in grado di leggere il testo del suggerimento.

Secondo il NNG, gli utenti trovano i campi vuoti più interessanti di quelli che contengono testo indice. Anche se i tuoi moduli sembrano più a lungo posizionare questi tag o descrittori sopra il campo, migliorerà l'usabilità.

Questo è tutto per questi suggerimenti, spero che ti aiuteranno a costruire moduli di contatto migliori.

Questo articolo contiene i commenti 0

Lascia un commento

L'indirizzo email non verrà pubblicato. I campi obbligatori sono contrassegnati *

Questo sito utilizza Akismet per ridurre indesiderati. Ulteriori informazioni su come vengono utilizzati i dati dei commenti.

Torna in alto
14 azioni
quota8
Tweet1
Enregistrer5