Il form di contatto di un sito ha ancora oggi una parte centrale nella progettazione di un sito web o di una landing page.
Le persone non amano troppo i moduli web, perché i form violano una delle ragioni principali per cui frequentiamo la rete: interagire in modo veloce e silenzioso con una persona o un’organizzazione.
È probabile che anche tu di solito preferisca visitare un sito piuttosto che fare una telefonata: è più rapido, più comodo e ti permette di evitare una conversazione. I form web contravvengono a tutto questo perché: 1. Si aspettano che digitiamo qualcosa… 2. Che ci fa rallentare… 3. E che ci fa lavorare più del previsto.
Come puoi spingere gli utenti delle tue pagine web a lasciare i loro dati nei form del tuo sito web?
In un precedente articolo abbiamo esaminato i diversi tipi di elementi che possono essere utilizzati in un modulo web. Qui ho raccolto una serie di best practice per aumentare l’efficacia dei tuoi form. Questi consigli riguardano il tipo e il numero di campi da utilizzare, l’aspetto grafico (il design) su desktop e su mobile, l’uso delle etichette e l’usabilità.
Indice
Usabilità dei moduli contatti per sito web
Un modulo progettato male può rovinare l’esperienza dell’utente sul tuo sito e influire negativamente sui tuoi obiettivi aziendali.
Moduli progettati male significa clienti persi, quindi è fondamentale realizzarli bene, sia per i desktop che per i dispositivi con schermo piccolo.
Quando progetti un form di contatto, il tuo obiettivo è che il percorso del tuo utente verso un acquisto o un’altra azione sia il più fluido possibile.
Il tema della buona progettazione dei moduli web è così ricco che potrebbe riempire un intero libro. IN questo campo il titolo principale è “Web Form Design” di Luke Wroblewski. Sebbene sia stato pubblicato nel 2008, contiene ancora tanti solidi principi, validi ancora oggi.
Evita le domande non necessarie
È il presupposto fondamentale della progettazione di un form contatti per sito web.
Aiuta i tuoi utenti a completare il modulo nel modo più semplice possibile: non includere domande che non siano assolutamente necessarie per il compito da svolgere.
Le domande extra, oltre a rallentare il processo, possono rendere l’utente sospettoso riguardo alle tue motivazioni per chiederle.
Questo aspetto non riguarda solo le cose che chiedi, ma anche come le chiedi.
Se hai un altro modo per ottenere l’informazione che ti serve, usa mezzi alternativi e non scaricare il peso sull’utente, richiedendo a lui lo sforzo di inserire il dato. Per esempio: se devi chiedere la tipologia della carta di credito, non chiedere questa informazione completa, perché puoi determinarlo dai primi quattro numeri del conto.
Se ci sono informazioni che potrebbero esserti utili ma non sono necessarie, considera di chiederle in un secondo momento, dopo che il modulo è stato inviato e hai stabilito una relazione con l’utente.
Scegli con cura i tipi di input
Come hai visto in questo articolo, ci sono diversi tipi di input tra cui scegliere e a volte non è facile decidere quale utilizzare. Ad esempio, una lista di opzioni potrebbe essere presentata come un menu a tendina o con diverse scelte tramite checkbox.
Valuta attentamente i pro e i contro di ciascun tipo di controllo ed esegui dei test prima di pubblicare il tuo modulo.
Raggruppa i campi collegati
È più facile che una persona interpreti con più facilità i diversi campi, menu e pulsanti di un modulo se vengono visivamente raggruppati per argomento.
Per esempio, le informazioni di contatto di un utente potrebbero essere presentate in un gruppo compatto, in modo che i cinque o sei input siano percepiti come un’unità unica. Di solito, tutto ciò che serve è un’indicazione visuale molto sottile, come una leggera linea orizzontale e un po’ di spazio extra.
Chiarisci le azioni primarie e secondarie
L’azione primaria alla fine del modulo è solitamente un pulsante di invio (“Acquista,” “Registrati,” ecc.) che segnala il completamento del modulo e lo stato di pronto a procedere.
Rendi quel bottone visivamente dominante e facile da trovare.
Allinealo lungo l’asse principale del form. Con il linguaggio JavaScript, è possibile fare in modo che il pulsante di invio non sia attivo fino a quando tutti i dati necessari siano stati compilati.
Le azioni secondarie tendono a farti fare un passo indietro, come cancellare o resettare il modulo. Se devi includere un’azione secondaria, assicurati che sia stilizzata in modo diverso e meno importante rispetto all’azione primaria.
È una buona idea fornire un’opportunità per annullare l’azione, per evitare invii accidentali (“Stai per cancellare tutti i dati inseriti nel modulo. Sei sicuro?”).
Considera l’impatto del posizionamento delle etichette
Un’etichetta (label) permette di fornire semplici istruzioni ai diversi campi di un form. Il modo più semplice ed efficace di utilizzarle è indicare un testo di spiegazione delle informazioni che l’utente dovrebbe inserire, tipicamente il nome del campo.
La posizione dell’etichetta rispetto all’input influisce sul tempo necessario per compilare il modulo. Meno l’occhio dell’utente deve saltare intorno alla pagina, più velocemente il modulo viene completato.
Posizionare le etichette sopra i rispettivi campi crea un unico allineamento per scansioni e completamenti più rapidi, in particolare quando si richiedono informazioni familiari (nome, indirizzo, ecc.).
Collocare le etichette sopra ai campi dei moduli web è preferibile che collocarle a sinistra. Oltre a ottenere un risultato più ordinato, le etichette posizionate in alto possono anche ospitare etichette di lunghezza variabile
Inoltre, si adattano più facilmente a uno schermo mobile, per cui funzionano meglio su dispositivi con schermo piccolo e stretto.
Il rovescio della medaglia è che questo porta a un modulo più lungo. Se lo spazio verticale è un problema, devi posizionare le etichette a sinistra degli input.
L’allineamento a sinistra delle etichette risulta nella compilazione più lenta del modulo, ma può essere appropriato se si desidera che l’utente rallenti o sia in grado di scansionare e considerare i tipi di informazioni richieste.
Stilizzazione dei moduli
Dal punto di vista dell’aspetto grafico, il risultato predefinito del codice dei moduli web (rendering) non è all’altezza della qualità che vediamo nella maggior parte dei form professionali di oggi.
Qualcosa di semplice come un buon allineamento e un aspetto coerente con il resto del tuo sito può fare molto per migliorare l’impressione che fornisci ai visitatori delle pagine del tuo sito.
Rendere mobili i form
Sul mobile i form web diventano eccezionalmente ingegnosi, perché sfruttano la tastiera contestuale dello smartphone.
Per esempio, la tastiera mobile dell’iPhone per la posta elettronica accorcia la barra spaziatrice quanto basta per fare spazio ai caratteri “@” e “.”.
Quando si deve digitare un URL, la barra spaziatrice sparisce del tutto, il che non sorprende, considerato che gli URL non contengono mai spazi. La novità è la presenza dei due nuovi tasti / e .com.
Altra tastiera contestuale appare per immettere i numeri di telefono. In questo caso tutto viene rimodellato e ottimizzato per facilitare la digitazione di un numero telefonico.
La magia del mobile prosegue anche in altre aree dei moduli web, per esempio nei menu a discesa. Apple ha ideato un controller che assomiglia a quello di una slot machine. Su Android un menu a discesa si presenta in modo diverso, anche se altrettanto efficace.
Esegui dei test su una varietà di browser e di tipologie di dispositivi (desktop, tablet e smartphone). per verificare eventuali spiacevoli sorprese.
In sintesi: rendi il tuo form di contatto facile per i tuoi utenti
Avere moduli facili da usare è fondamentale per migliorare l’esperienza degli utenti e aumentare le persone che lasciano dati in questi strumenti.
Un form ben progettato non solo facilita la raccolta delle informazioni, ma riduce anche il tasso di abbandono, aumentando così il numero di conversioni (lead). Un’interfaccia chiara e intuitiva permette agli utenti di completare rapidamente il modulo senza frustrazioni, migliorando così la percezione complessiva del tuo sito web e del tuo brand.
Se desideri migliorare i tuoi moduli e renderli più efficaci, rivolgiti a Max Mile per una consulenza professionale. Con oltre 20 anni di esperienza nel settore e una profonda conoscenza delle migliori pratiche di design, Max Mile può aiutarti a ottimizzare i tuoi form, aumentando la loro efficacia.
Non esitare a contattare Max Mile per scoprire come i tuoi moduli possono diventare strumenti potenti per il tuo sito web.
