La migliore forma del modulo di contatto inizia con l'usabilità. L'obiettivo di una forma è ovvio: hai bisogno di informazioni da parte dell'utente. Il modulo deve essere abbastanza intuitivo in modo che gli utenti sappiano esattamente cosa fare e non vengano sviati nel processo di completamento di tale azione.
Le migliori forme di contatto sono facili da guardare e includono elementi altamente utilizzabili che gli utenti possono interagire senza pensarci. (Sembra un po 'più facile di quanto non sia a volte.) Per fortuna, abbiamo una serie di suggerimenti per aiutarti a progettare forme di contatto migliori.
1. Renderlo a una colonna
Le forme verticali funzionano bene perché gli utenti sono abituati a scorrere. Rende facile vedere l'inizio e la fine della forma. Cosa è più facile? Schiacciare un modulo verticalmente o riempire gli oggetti attraverso e poi giù per lo schermo? La creazione di un modulo con una singola colonna verticale è la soluzione più semplice per molti utenti perché devono solo pensare a un'azione, spostandosi lungo lo schermo attraverso il modulo.
Può funzionare per campi simili, ad esempio una risposta breve per un nome, un indirizzo email e un numero di telefono. Può anche funzionare bene per elementi come una schermata di checkout.
Questa forma funziona anche meglio con i formati responsive in modo che il modulo abbia la stessa forma su diversi dispositivi, fornendo un'esperienza utente più coerente. Questo può essere particolarmente importante con i moduli di e-commerce o di check-out perché non vuoi che l'esperienza cambi, creando domande sulla validità e credibilità del modulo.
2. Contenuti del gruppo logicamente
Piccoli gruppi di domande o campi di moduli visivamente raggruppati possono semplificare la comprensione di una forma. Mantieni insieme elementi simili (ad esempio informazioni sull'indirizzo o campi di pagamento) e raggruppa gli elementi con le loro etichette e qualsiasi altro testo di istruzioni. Gli utenti non dovrebbero mai mettere in discussione a quale campo si riferisce un'etichetta o un'istruzione.
Raggruppamenti logici di contenuti creano un flusso per il modulo, in cui gli utenti possono anticipare quali informazioni verranno dopo. Questo rende l'esperienza facile e divertente.
3. Posizionare le etichette sopra il contenuto
La maggior parte degli strumenti per la creazione di form ti offre molte opzioni su dove posizionare etichette o suggerimenti. Resistere alla tentazione di diventare eccessivamente creativi e posizionare le etichette sopra il campo in cui le informazioni vanno. Questo è il posizionamento più comune e utilizzabile per le etichette.
Inoltre, questo posizionamento si converte facilmente su altri dispositivi. Ad esempio, pensa al modulo su un telefono anziché su un desktop. Se il modulo arriva prima dell'etichetta, è possibile pianificare quali informazioni inserire nel campo anche prima di scorrere fino ad esso, e rimarrà attivo fino a quando il campo del modulo non sarà completo. Ma se l'etichetta è sotto il campo, potresti rimanere bloccato in uno schema di scorrimento verso il basso e poi di nuovo su per visualizzare le istruzioni e compilare il modulo.
Anche se questo potrebbe sembrare un grosso problema, può essere frustrante per gli utenti. E con forme più lunghe, può causare errori in tutto il modulo. Questo è uno dei principali problemi di usabilità nella progettazione del modulo di contatto.
4. Non chiedere troppe informazioni
Gli utenti meno coinvolti e fedeli sono, meno campi accettano per completare un'azione. È più probabile che i moduli più brevi vengano compilati completamente rispetto a quelli lunghi che richiedono informazioni non necessarie. (Hai davvero bisogno di inserire il tipo di carta di credito che hai in una pagina di pagamento? La risposta è no, il numero indica il tipo di carta, quindi non fare in modo che gli utenti inseriscano queste informazioni non necessarie.)
Gli utenti meno coinvolti e fedeli sono, meno campi accettano per completare un'azione. Per i nuovi utenti, è OK chiedere un indirizzo email. Attendi l'email di conferma (una volta che sono un po 'più investiti) o il follow-up per espandere le informazioni raccolte per includere un nome, un codice di avviamento postale o un compleanno.
Brevi forme semplici hanno tassi di coinvolgimento più elevati che forme di contatto lunghe ed esaustive. Progettare in modo appropriato.
5. Rendi il pulsante ovvio
Assicurati che la micro-copia all'interno del pulsante ti dica esattamente cosa succede Una volta che l'utente compila ogni campo nel modulo, l'azione finale è evidente? Troppo spesso, la creazione di un pulsante facile da vedere è il passo dimenticato nella progettazione del modulo. Il pulsante dovrebbe essere chiaramente visibile. Usa un colore specifico per il pulsante finale e assicurati che la micro-copia all'interno del pulsante ti indichi esattamente cosa succede (invia, completa il pagamento, ecc.).
Suggerimento bonus: Se utilizzi un captcha o un altro tipo di sfida umana, inseriscilo tra l'ultimo campo nel modulo e il pulsante di invio. (Non c'è niente di più fastidioso di fare clic su Invia solo per far sì che il captcha ti costringa a ripetere l'azione o, peggio, a ricominciare da capo.)
Oh, e un altro consiglio che è ovvio? fai sapere agli utenti quando un modulo è stato completato con successo! Un semplice? Grazie? il dialogo è abbastanza spesso.
6. Utilizzare i tipi di campo appropriati
Un buon progettista di moduli sa che un tipo di campo non si adatta a tutte le informazioni. Abbina il tipo di campo ai dati raccolti per rendere più facile per gli utenti compilare correttamente i moduli. Non utilizzeresti un menu a discesa per un numero di telefono, vero?
Anche se questo è uno di quei suggerimenti che sembra del tutto ovvio, succede troppo spesso.
Pensa a questo campo su un modulo di contatto: il modo migliore per contattarmi è via email o telefono. L'uso di una scelta di pulsanti rende chiaro che l'utente dovrebbe selezionarne uno. L'utilizzo di un menu a discesa è troppo complesso di un'azione per una o l'altra scelta. E sicuramente non hai bisogno di questo come un campo di risposta breve.
Non solo l'utilizzo del giusto tipo di campo renderà le forme più facili per gli utenti, ma semplificherà anche la raccolta e l'analisi dei dati.
7. Convalidare i dati laddove possibile
Non ti piace semplicemente quando un modulo ti dice di errori mentre vai piuttosto che alla fine? Non ti piace solo quando un modulo ti dice di errori Appena vai piuttosto che alla fine? Non solo è possibile visualizzare e correggere l'errore, ma si risparmia tempo e mal di testa nel processo.
L'utilizzo della convalida sui moduli di contatto è un must. Confermando che un indirizzo email segue il formato corretto, per convalidare il numero di cifre per un codice postale o un numero di telefono, queste piccole cose possono fare una grande differenza.
E se non lo fai, sei in minoranza. Uno studio del Baymard Institute mostra che il 60% delle forme usa la convalida in linea. Quindi non è solo uno strumento di usabilità, sta rapidamente diventando un modello di utente comunemente accettato (e aspettative).
Conclusione
I due tipi più popolari di moduli nei progetti di progettazione di siti Web sono probabilmente iscrizioni e moduli di contatto via email. Inizia assicurandoti che questi moduli siano impostati correttamente e modifichi il design per renderli più utilizzabili. (Se noti un coinvolgimento significativamente maggiore, probabilmente sta funzionando).
Gli stessi concetti possono essere applicati ai moduli in tutto il design, oltre a sondaggi, pagine di checkout e altre raccolte di dati. Questi concetti si adattano per soddisfare qualsiasi tipo di elemento del sito web in cui l'utente deve inserire le informazioni per completare un processo.