23 Migliori pratiche di progettazione dei moduli per aumentare le richieste

Tutte le aziende possono beneficiare di più invii di moduli. Probabilmente l'hai già visto: la maggior parte del traffico parte prima di compilare un modulo e di coloro che rimangono non tutti lo completano.

Se meno del 100% dei tuoi visitatori completa il tuo modulo, hai un'opportunità.

I moduli svolgono un ruolo fondamentale negli affari. Moduli di iscrizione, moduli di accesso, moduli d'ordine, moduli di pagamento, moduli di feedback, moduli paziente, moduli di contatto - moduli in abbondanza! Abbiamo bisogno di moduli web per generare lead, aumentare il coinvolgimento ed espandersi.

I moduli sono il ponte tra i visitatori del tuo sito web e te, ma diventano barriere se non ottimizzati.

A meno che il modulo non sia compilato e inviato, non ha svolto il suo lavoro. E a meno che l'azienda non faccia un buon uso dei dati del modulo che riceve (ad esempio, tornare in modo tempestivo, inviare newsletter, arricchire i dati del modulo per la generazione di lead), il modulo viene sprecato.

Creare qualsiasi vecchio modulo è facile; la creazione di un modulo eccezionale richiede sapere cosa trattiene gli utenti. Un'ottima progettazione di moduli Web richiede la comprensione di come utilizzare in modo efficace tutti gli elementi del modulo: intestazione, copia secondaria, campi modulo, etichette di campo, pulsanti di azione e feedback sia correttivo che affermativo.

Gestiscilo e raccoglierai i frutti di un modulo ad alta conversione. Otterrai più contatti con la stessa quantità di traffico, risparmierai denaro sugli sforzi di marketing e raggiungerai più rapidamente gli obiettivi aziendali correlati.

Allora, da dove cominciare?

Chiediti: dovrei usare un modulo?

Inizia decidendo se dovresti usare un modulo in primo luogo. Se il modulo non fornisce abbastanza valore a te o ai tuoi utenti, è meglio non averlo affatto. Potrebbe esserci anche un modo più semplice per ottenere le informazioni desiderate.

Le opzioni di registrazione e accesso ai social media sono diventate un popolare sostituto di questi moduli perché evitano agli utenti di creare un'altra password. La sua comodità aumenta le possibilità di un visitatore di portare a termine l'azione a portata di mano e rimanere sul tuo sito.

Se decidi che vale la pena utilizzare un modulo, utilizza i seguenti suggerimenti per informare la tua strategia e rivedi il modulo utilizzando la nostra Lista di controllo per moduli Web Ultimate per assicurarti che sia il più efficace possibile:

Rendi chiara la motivazione

Quando gli utenti hanno la sensazione di ottenere qualcosa di utile da un modulo, è molto più probabile che lo completino. È una questione di analisi costi-benefici: cosa otterranno investendo tempo e fatica?

Le migliori pratiche di progettazione dei moduli in questo articolo renderanno i tuoi moduli più attraenti, piacevoli e facili da usare, riducendo il costo percepito del completamento. Tuttavia, puoi enfatizzare il valore o lo scopo del tuo modulo per aumentare gli invii. Creeranno un account che consenta loro di fare X, ottenere una prova gratuita o ricevere aiuto? Qualunque cosa l'utente esca dallo scambio, chiariscilo.

Un titolo potente, una copia orientata ai vantaggi e un invito all'azione diretto (CTA) possono aiutare. Non dimenticare che la persuasione è ancora in gioco.

Se vuoi che i visitatori si iscrivano alla tua newsletter, specifica i punti vendita. "Aggiornamenti" non è convincente. Aggiornamenti su cosa? Ricevono qualcos'altro? Spiega loro perché dovrebbero interessarsene.

È anche buona norma mostrare quanto è lungo il tuo modulo. Se è breve, mostra tutti i campi contemporaneamente con il pulsante CTA presente, in modo che sappiano quanto sarà veloce. Se è un modulo più lungo con più pagine, includi una barra di avanzamento, così si sentiranno vicini al traguardo. Saranno meno inclini a smettere e sprecare i loro progressi.

Osserva coloro che sono venuti prima di te

Tutti hanno un'idea dell'aspetto di un modulo di un sito Web e queste idee sono relativamente coerenti. Questo perché la maggior parte dei moduli web rispetta le linee guida generali che li fanno sembrare simili. Non è un caso.

I moduli Web sono ovunque e, a causa della somiglianza nello stile e nei campi, le persone hanno aspettative. Attenersi a queste aspettative crea un senso di familiarità, sicurezza e facilità.

Se pensi che un nuovo campo o design di moduli funzionerà, puoi diventare un po' creativo. Ma se ti allontani troppo dalla norma, sappi che alcuni utenti potrebbero confondersi e abbandonare il modulo.

Preparati a essere giudicato

Che ne siano consapevoli o meno, le persone giudicano dall'apparenza. Le aziende non possono sfuggire a questa verità, il che rende ancora più importante che il tuo sito Web e i moduli siano attraenti e professionali. È sempre utile considerare come il tuo modulo web si adatterà allo stile della pagina e del sito web.

Due suggerimenti stilistici introduttivi da tenere a mente sono lo spazio e la leggibilità.

Spazio: semplifica la navigazione mantenendo una ragionevole quantità di spazio tra gli elementi. Dovrebbe essere chiaro quali etichette vanno con quali campi di input. L'aggiunta di spazio impedisce anche un aspetto affollato che può far sembrare le forme più complesse.

Leggibilità: lo spazio aiuta con la leggibilità, ma i progettisti di moduli dovrebbero anche considerare le scelte di testo, inclusi caratteri di facile lettura e di dimensioni ragionevoli. Elimina sempre tutti i dettagli non necessari e scrivi a un livello di lettura compreso dall'utente medio. L'uso delle maiuscole e delle maiuscole migliora anche la leggibilità.

Mantienilo breve

È facile capire ogni piccolo dettaglio sul vantaggio che stai acquisendo, ma dovresti solo chiedere ciò che devi sapere. Più chiedi, più lungo è il modulo e più lungo è il modulo, meno invii riceverai. Il tempo è prezioso, quindi rispetta il loro.

Se ci sono campi che non ti servono ma che vuoi mantenere, indica quali sono obbligatori. La maggior parte delle aziende indica i campi necessari con un asterisco. Gli utenti a cui non dispiace compileranno tutti i campi, ma coloro che non sono interessati a rispondere a campi aggiuntivi o a fornire così tante informazioni personali possono ridurre i tempi di completamento.

Puoi anche far apparire i moduli più brevi condensando i campi dove ha senso. Ad esempio, puoi utilizzare un campo per i nomi completi anziché due per i nomi e i cognomi.

Forme di struttura con logica

Il design efficace dei moduli Web scorre come una conversazione. Quando strutturi il tuo modulo, immagina di parlare con il tuo lead. Segui un ordine logico e raggruppa insieme domande simili.

Una volta raggruppati, disporre i campi dal più semplice al più difficile. Le persone preferiscono compilare prima le informazioni facili e, una volta che hanno dedicato del tempo a compilare la maggior parte del modulo, è più probabile che lo completino.

Riduci il movimento degli occhi e la confusione con un buon design della forma

Limitare la quantità di movimento degli occhi di un utente rende il tuo modulo più facile da seguire e riduce gli errori e l'abbandono del modulo.

Inizia semplificando il dire quali parti del modulo vanno insieme. Le etichette per i campi modulo devono essere accanto al campo o sopra di esso, mai sotto. Le etichette dovrebbero anche essere più vicine al rispettivo campo invece che allo stesso modo tra due campi. Questo aiuta gli utenti a discernere rapidamente quali informazioni vanno dove.

Usa una colonna invece di due per rendere il modulo più pulito e impedire agli utenti di spostarsi a zig-zag avanti e indietro. Quindi allinea il testo a sinistra in modo che sia più naturale da leggere.

Progetta suggerimenti utili

Ci sono utili indicazioni visive che puoi incorporare nel design del tuo modulo per guidare gli utenti verso il completamento.

Uno di questi segnali è un focus sul campo. Aiuta gli utenti a sapere dove si trovano in ogni momento indicando la casella selezionata. Puoi ottenere ciò evidenziando la casella con bordi in grassetto, colori o altri effetti. Puoi anche evidenziare il primo campo dall'inizio in modo che gli utenti capiscano cosa significa l'effetto.

Un altro segnale visivo comune è un indicatore di sicurezza della password. Se stai progettando un modulo di registrazione o di creazione di un account, utilizza questo indicatore per mostrare ai clienti la forza della loro password mentre la creano.

Se hai un'idea per un nuovo suggerimento di progettazione che renderà il tuo modulo più coinvolgente e facile da navigare, provalo. Accogli l'innovazione, ma sii disposto a rimuoverla se non funziona.

Approfitta delle funzioni di preriempimento e automatiche

La precompilazione, il completamento automatico, la compilazione automatica e la formattazione automatica possono ridurre i tempi di completamento dei moduli, semplificando al tempo stesso l'esecuzione del modulo e riducendo gli errori.

La precompilazione è quando riempi i campi del modulo con risposte di esempio. Il testo è spesso di colore più chiaro per indicare che si tratta di un esempio. Fornire risposte di esempio può chiarire cosa va nel campo e il formato in cui gli utenti dovrebbero inserirlo. Qualunque cosa tu faccia, non inserire l'etichetta del campo nel campo stesso. Una volta che l'utente ha selezionato il campo, il testo scompare e può essere difficile per gli utenti ricordare cosa devono inserire.

La compilazione automatica utilizza i dati dell'utente memorizzati nel browser dell'utente per compilare automaticamente i campi del modulo. Ciò può ridurre il numero di campi che un utente deve compilare, ma può anche essere frustrante se inserisce le informazioni sbagliate. Il completamento automatico, d'altra parte, completa automaticamente la risposta di un utente in base a ciò che inizia a digitare. Per sfruttare queste funzioni, assicurati di ottimizzare i tuoi moduli per utilizzare la compilazione automatica.

Ci sono anche impostazioni predefinite intelligenti che puoi implementare. Queste informazioni di riempimento automatico predefinite in base ai dati delle risposte precedenti dell'utente. Ad esempio, se un utente inserisce la propria città, il modulo può compilare automaticamente il codice postale corrispondente.

Un'altra funzione automatica è la formattazione automatica. Se eseguito correttamente, può ridurre al minimo la necessità di copiare istruzioni o esempi di risposte. La formattazione automatica è quando il campo formatta la voce dell'utente durante la digitazione, quindi l'utente non deve pensare se l'ha digitata nel modo giusto. Questo è utile per le variabili che spesso assumono spazi o formati diversi, come date, numeri di telefono e numeri di carte di credito.

Usa la logica condizionale

A volte le domande dei moduli sono irrilevanti per determinati segmenti di pubblico e fanno perdere tempo. Niente è peggio che compilare un modulo e dover rispondere o saltare diverse domande che non riguardano te.

Se questa è una possibilità, considera l'utilizzo della logica condizionale. Un modulo con logica condizionale basa le domande che mostra a un determinato utente sulle risposte iniziali dell'utente. In questo modo, offri agli utenti un'esperienza personalizzata con solo domande pertinenti.

Usa i controlli di input giusti

Quando si progettano moduli, è possibile utilizzare una varietà di controlli di input: pulsanti degli allegati, caselle di controllo, menu a discesa, pulsanti di opzione e altro ancora. È importante utilizzare i controlli di input corretti per ogni scopo.

Caselle di controllo e pulsanti di opzione sono spesso confusi. Utilizza una casella di controllo quando l'utente può selezionare più opzioni da una serie di scelte o quando chiedi a un utente di acconsentire o accettare una dichiarazione. Utilizzare i pulsanti di opzione quando un utente può selezionare solo un'opzione.

Quando aggiungi controlli di input, assicurati di usarli tenendo conto dell'etica. L'uso di caselle preselezionate o interruttori che confondono gli utenti o sono facili da perdere può essere immorale. In alcuni casi è illegale.

Fai bene con i pulsanti del modulo

I pulsanti sono elementi critici di navigazione. Sono la chiave per inviare il modulo o per passare alla successiva serie di domande. A volte aiutano gli utenti a passare al modulo corretto, ad esempio quando si trovano nel modulo di accesso ma hanno bisogno di quello di registrazione. I pulsanti guidano gli utenti nella giusta direzione.

I pulsanti devono essere visibili, catturare l'attenzione ed essere chiari sul loro scopo, altrimenti aumentano le possibilità di abbandono della forma. I pulsanti CTA dovrebbero essere abbastanza grandi da poter essere visti ma non così grandi da sembrare spam. Alcuni moduli utilizzano il colore o le ombre discendenti per far risaltare i pulsanti.

Ci sono due pulsanti vitali in un modulo: i pulsanti primari e secondari. Il pulsante principale incoraggia l'azione principale desiderata ed è sempre presente. Non tutti i moduli hanno un pulsante secondario, ma viene spesso utilizzato per offrire supporto quando lo fanno.

Puoi anche utilizzare micro animazioni o copiare affermazioni per mostrare agli utenti che il sistema ha registrato la pressione di un pulsante.

Rendi gli errori chiari e facili da correggere

Notificare agli utenti un errore senza offrire aiuto è frustrante. I messaggi di errore intuitivi forniscono soluzioni.

Progetta sempre i moduli per mostrare quale casella contiene l'errore, in modo che gli utenti non debbano scansionare di nuovo l'intero modulo. I messaggi di errore in linea e le convalide funzionano meglio. Questo è quando un messaggio appare proprio accanto all'errore stesso. Puoi anche evidenziare la casella o spostare il cursore su di essa.

Se puoi, sii specifico sull'errore, in modo che gli utenti non debbano indovinare di cosa si tratta. Le informazioni non corrispondono ai tuoi record? È dovuto a un errore di battitura o a un simbolo non consentito? Forse stanno creando una password e non soddisfa i requisiti di lunghezza. Qualunque cosa sia, diglielo.

Quando c'è un errore, condividi subito la sua presenza. È più una delusione per gli utenti quando alla fine hanno premuto Invia e il risultato che si aspettano non si verifica.

Salva i dati della cache

Hai mai iniziato a compilare un modulo ma sei stato interrotto? Forse il tuo WiFi si è spento, la pagina si è ricaricata o sei uscito per sbaglio dal sito?

L'archiviazione dei dati della cache evita agli utenti di riavviare il modulo quando si verificano questi tipi di eventi. Li protegge dalla frustrazione del punto di partenza e aumenta le possibilità di completamento del modulo.

Diventa già amico del design reattivo

Se non l'hai ancora fatto, è tempo di abbracciare il design reattivo. Questo vale per tutte le aree del tuo sito web, compresi i moduli.

Il design reattivo si adatta al dispositivo su cui si trova un utente, assicurando che il tuo sito web sia sempre bello e funzioni. Ora che oltre il 90% della popolazione Internet globale utilizza dispositivi mobili per collegarsi online, è fondamentale che l'usabilità dei moduli rimanga coerente su questi dispositivi.

Sì, l'accessibilità vale anche qui

Ne stiamo parlando di nuovo, non solo perché è ottimo per gli affari e legalmente richiesto, ma perché è la cosa giusta da fare. Tutti i siti Web e le funzionalità di tali siti devono essere accessibili. Significa creare moduli a cui tutti, comprese le persone con disabilità, possono accedere e completare.

I moduli accessibili funzionano bene con le utilità per la lettura dello schermo e non si basano sul colore. L'utilizzo del solo colore rosso per indicare un errore di modulo, ad esempio, potrebbe essere difficile da vedere per gli utenti daltonici.

Per ulteriori suggerimenti, consulta la nostra guida sulla progettazione accessibile per utenti con disabilità.

Fare. Quella. Copia. Opera.

I moduli non sono tutte caselle e voci utente. Una buona scrittura della UX è essenziale per guidare in modo efficiente gli utenti attraverso qualsiasi modulo. La copia di Form UX è presente nei messaggi di errore e nella microcopia come pulsanti, segnaposto ed etichette.

Il testo del modulo deve essere breve, istruttivo e di facile comprensione.

Quando scrivi le etichette dei moduli, usa solo il sostantivo ed elimina il verbo (ad es. "Nome" invece di "Inserisci un nome"). È più semplice e standard. Per i pulsanti, rendi la microcopia orientata ai risultati, in modo che gli utenti sappiano esattamente cosa stanno facendo (ad esempio, "Iscriviti alla newsletter" o "Scarica il PDF" invece di "Invia").

Finché è breve e serve a uno scopo, la copia del modulo può anche fornire dettagli utili. La sostituzione di "Nome" con "Nome come sulla carta" o "Nome destinatario regalo" può risolvere l'incertezza dell'utente e prevenire errori.

Un'altra opzione è aggiungere una microcopia che spieghi perché stai chiedendo informazioni personali se sembrano fuori luogo. Puoi condividere il motivo per cui stai chiedendo un numero di telefono o un codice postale e come lo utilizzerai se non è già evidente.

Le parole e le frasi negative tendono a far riflettere le persone e le parole positive sono più amichevoli. Evita le parole con connotazioni negative, come "spam", anche se stai dicendo che non invierai spam a nessuno.

La copia contribuisce anche al sapore di una forma facendola sentire accogliente e in linea con il marchio. Mentre i campi del modulo devono rimanere istruttivi, le intestazioni dei moduli e altro testo possono divertirsi con i messaggi del marchio finché il messaggio viene inoltrato.

Parla Privacy

I problemi di privacy trattengono molte forme, soprattutto quando gli utenti diventano più informati sulle minacce della condivisione di informazioni personali online. Gli utenti dovrebbero essere istruiti e i moduli dovrebbero tenerne conto.

Circa il 29% delle persone cita i problemi di sicurezza come motivo per abbandonare un modulo. Se disponi di una politica sulla privacy che tutela la riservatezza dei dati degli utenti, informali. Sii comprensivo e calma le preoccupazioni in modo che quelli nel 29% si sentano al sicuro nel condividere con te.

Guarda i numeri

Se stai riprogettando un modulo, hai lo strumento più prezioso di tutti: i dati.

Rivedi la cronologia degli utenti con il tuo modulo e cerca i modelli. Dove e perché gli utenti si sono ritirati? Quando gli utenti hanno scelto di uscire può rivelare un problema, se un campo specifico ha causato l'abbandono o se non era chiaro dove fosse un pulsante. A volte è sufficiente correggere un elemento confuso, come nel caso di Expedia.

Durante la revisione dei dati del modulo, Expedia ha notato che un campo specifico del modulo ostacolava le conversioni. Le persone inserivano le informazioni sbagliate e quindi non potevano procedere al passaggio successivo. Così hanno cancellato il campo.

Quell'anno, hanno guadagnato 12 milioni dal modulo.

Disegni di moduli di test A/B

Le aziende non dovrebbero guardare solo alla cronologia degli utenti con i moduli; dovrebbero condurre test per continuare a migliorare. I test A/B, in particolare, sono un ottimo modo per continuare ad aggiornare i moduli web.

Per testare un modulo A/B, crea due iterazioni esatte del modulo in questione ma cambia un fattore. Può essere un'intestazione, un pezzo di microcopia, il colore di una CTA o la rimozione di uno dei campi. Utilizzare entrambi per un determinato periodo di tempo e valutare quale ha ottenuto prestazioni migliori.

Testare le idee per te stesso è una buona regola pratica perché ciò che funziona per un'azienda non sempre funziona per l'altra. Ad esempio, alcuni affermano che la rimozione del campo del numero di telefono su un modulo aumenta le conversioni. L'unico modo per sapere se otterrai gli stessi risultati con il tuo pubblico unico è testarlo.

Decidi: moduli a passaggio singolo e moduli a più passaggi

I moduli a passaggio singolo sono i moduli standard che elencano tutti i campi in una volta sola. I moduli in più passaggi dividono le domande in più di una pagina. Quando l'utente completa il primo, passa al successivo.

Uno studio che ha confrontato un modulo in un passaggio e in due passaggi ha mostrato che il 14% in più di persone ha completato il modulo in due passaggi. Altri studi affermano anche che i moduli a più passaggi si convertono meglio, ma la verità è che ciò che funziona meglio per te dipenderà in primo luogo dal motivo per cui stai utilizzando il modulo.

I moduli a passaggio singolo sono i migliori per raccogliere informazioni di base e aumentare gli invii. È meno probabile che spaventino nuovi utenti o visitatori, motivo per cui vengono spesso utilizzati per i moduli di contatto, supporto o accesso.

I moduli a più passaggi sono i migliori per raccogliere diversi campi di informazioni. Diffondere le domande rende il modulo meno scoraggiante e più attraente. Questo tipo di modulo funziona particolarmente bene quando un utente è già impegnato in un processo, come l'acquisto di un prodotto. Quando si ordina online, è opportuno inserire i passaggi di fatturazione nella pagina seguente.

Quando si crea un modulo a più passaggi, non si desidera che il modulo continui all'infinito. Raggruppa alcune domande su ogni pagina, in modo che non ci sia un numero eccessivo di pagine. La creazione di un modulo a più passaggi è un'eccellente opportunità per utilizzare la logica condizionale.

Indipendentemente dal modulo scelto, implementa i suggerimenti per la progettazione e la copia discussi in questo articolo.

Decidi: Chatbot vs Web Form

I chatbot stanno diventando sempre più popolari e possono essere un modo divertente per coinvolgere gli utenti e migliorare l'esperienza dell'utente. Vengono forniti con vantaggi come una maggiore personalizzazione e tempi di risposta più rapidi e alcune aziende hanno iniziato a utilizzarli al posto dei moduli Web.

Ma se un chatbot o un modulo web funzioneranno meglio per te dipende dalla tua attività e dagli utenti. Dovresti abbracciare il futuro ma non seguire ciecamente le tendenze. Prova a condurre un test per confermare se desideri utilizzare un chatbot prima di immergerti, soprattutto perché i chatbot non sono un piccolo investimento.

Discutiamo dei pro e dei contro di chatbot e moduli e quando utilizzarli nella nostra guida: I chatbot convertono meglio dei moduli Web?

Opzione segreta tre: moduli in linguaggio naturale

In precedenza, abbiamo detto che tutti hanno un'idea simile dell'aspetto dei moduli Web a causa delle loro somiglianze di vecchia data. Bene, questo non è del tutto vero per la rara forma del linguaggio naturale.

I moduli in linguaggio naturale, o moduli in stile Mad Libs, sono scritti come frasi con opzioni di riempimento. Gli studi rivelano che la conversione aumenta con questi moduli, ma come con altre opzioni di modulo, ti consigliamo di testarlo tu stesso per vedere cosa funziona nel tuo contesto.

I vantaggi delle forme di linguaggio naturale sono che sono progettate per sembrare più naturali, coinvolgenti e personali. Prendono in prestito dalla familiarità della conversazione e della scrittura quotidiana.

Ma ci sono diverse preoccupazioni. Il formato dei moduli in linguaggio naturale rallenta la scansione e non è quello che la maggior parte degli utenti si aspetta quando gestisce un modulo. Può anche creare problemi di alfabetizzazione e confusione durante la traduzione in più lingue.

Esempio di una forma in linguaggio naturale tratto da The Theme Foundry.

Trasforma i tuoi moduli in un'esperienza

Questa intestazione è un termine improprio perché tutti i moduli sono un'esperienza. Ma non tutte le forme sono buone, e questo è l'obiettivo.

Avere un modulo non basta più. Un modulo deve essere persuasivo, attraente e facile da completare. Solo perché un utente vuole ciò che offre il tuo modulo, che si tratti di un white paper o di un account, non significa che lo compilerà. Se un modulo crea confusione o richiede uno sforzo maggiore di quello che vale, verrà abbandonato.

Quindi, i suggerimenti in questo articolo. Usali per creare un ottimo design di moduli web con microcopie motivanti e osserva le tue conversioni aumentare.

Hai domande sui nostri suggerimenti o vuoi parlare di moduli? Raggiungi.