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 901.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 guidi i visitatori alla conversione. Quando studi l'analisi, sei felice di scoprire che il viaggio dell'utente che hai creato è supportato dai suoi visitatori, di volta in volta. Tuttavia, c'è qualcosa che impedisce loro di convertirsi.

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 utilizzato correttamente. Pulsanti "rotti", campi confusi, troppi passaggi, un'interfaccia disorganizzata ... anche il posizionamento del 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 sul monitoraggio degli occhi di Google pubblicato nel 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 soddisfa tutte le regole, il 78% degli utenti può compilarlo e inviarlo in un unico tentativo. Quando un modulo di contatto viola queste regole, tuttavia, solo il 42% è in grado di farlo in un 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 dei moduli di contatto, che spesso porta a scelte di progettazione 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?

compilare form.png

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 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 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:

esempio di modulo di contatto court.png

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.

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
Anziché costringere gli utenti a indovinare come si desidera che vengano formattati determinati campi, è possibile aggiungerli con maschere di input che li formattano automaticamente.

campi di formattazione html.png

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.

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 gestisce questo 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 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.

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
16 azioni
quota8
Tweet1
Enregistrer7