Come progettare un modulo user-friendly

Pensa a un sito web che frequenti: qual è la funzionalità complessiva di quel sito? Quanto tempo impiegano le pagine per caricare? La navigazione del sito è facile da usare? Sei in grado di trovare rapidamente le informazioni che stai cercando? Questi sono tutti aspetti dell'esperienza utente di un sito Web (UX).

UX si applica a tutte le parti del sito Web, inclusi i moduli Web, in termini di accessibilità, facilità d'uso e praticità. Un modulo online con UX è facile per i tuoi visitatori, anche se semplice da capire e professionale. Quando il tuo modulo ha tutti questi fattori, è probabile che tu veda un aumento del numero di conversioni. Ecco perché ottenere il giusto UX del modulo è fondamentale per la tua azienda.

Perché la forma UX è importante?

Il punto di un modulo web è quello di raccogliere alcune informazioni personali dal tuo visitatore, sia che si tratti di un indirizzo email o dei loro dettagli di spedizione e di pagamento. Ma perché un visitatore vorrebbe convertire e condurre qualsiasi tipo di attività con te se il modulo a cui viene chiesto di elencare le proprie informazioni è difficile da usare, difficile da capire o visivamente poco attraente? Risposta semplice … non lo farebbero.

Ci sono un certo numero di fattori che vanno in grande UX e gli elementi da considerare quando si cerca di ottenere un design fantastico e memorabile. Form UX è importante perché vuoi lasciare un'impressione positiva (e duratura) sui tuoi visitatori, creare un'esperienza positiva per loro mentre sul tuo sito e convertire più lead.

UX influisce sul livello di accessibilità del tuo modulo web (che si riferisce alla facilità con cui i tuoi moduli possono essere completati e inviati da molti tipi di persone, di vari background) e usabilità (che si riferisce alla facilità con cui qualcuno può raggiungere il loro obiettivo, che in questo caso significa completando un modulo). Senza un'ottima UX, non avrai solo scarsa accessibilità e usabilità, ma perderai anche le conversioni.

10 linee guida Form UX e grandi esempi da seguire

Abbiamo curato il seguente elenco di linee guida che puoi applicare ai tuoi moduli per aiutarti a migliorare la loro UX. Ogni linea guida include anche un esempio che puoi seguire e imparare da per aiutarti a creare moduli web di successo e pensati per il tuo sito.

1. Abilita compilazione automatica e correzione automatica

fonte

Riempimento automatico riempimenti, o completa, forma campi basati su attributi o risposte comuni, come nome ed e-mail, precedentemente forniti nel sito o nel browser.

Correzione automatica corregge, o rettifica, risposte non valide i visitatori potrebbero tentare accidentalmente di entrare nei campi. Ad esempio, se qualcuno dovesse inserire il codice postale errato nel modulo, il modulo potrebbe essere in grado di raccomandare o correggere quell'errore in base alla posizione specificata da qualcuno o ad altre informazioni che hanno precedentemente inviato.

Riempimento automatico e correzione automatica sono due funzionalità che migliorano UX perché semplificano il processo di completamento del modulo. Abilitando queste funzionalità, non solo stai garantendo che vengano fornite informazioni valide, ma stai anche risparmiando tempo ai tuoi visitatori, snellendo il processo di completamento del modulo e aiutandoli a rimanere il più efficiente e accurato possibile.

2. Escludere tutto il fluff

fonte

Mantieni la tua forma semplice e comprensibile, escludendo tutti i "lanugine", cioè parole, immagini, campi o caratteri che non sono assolutamente necessari. Escludendo tutte le informazioni non necessarie, si migliora la UX del modulo per un paio di motivi. In primo luogo, rimuove qualsiasi confusione per i tuoi visitatori che potrebbe derivare dall'avere troppe informazioni. In secondo luogo, gli utenti possono inviare le proprie informazioni con minore attrito, come lo scorrimento o il tentativo di determinare cosa è importante.

3. Disporre il modulo in una colonna

fonte

Il layout del campo del modulo deve essere organizzato in una singola colonna anziché collocare più campi nella stessa riga o in varie posizioni. I visitatori potranno facilmente vedere tutti i campi necessari e avere la possibilità di passare alla successiva casella aperta se scelgono di lavorare attraverso il modulo in quel modo.

Un aspetto importante del successo di UX è la facilità d'uso. Distribuendo tutti i campi del modulo in una singola colonna, i visitatori saranno in grado di scorrere il modulo in modo naturale, con facilità.

4. Non dimenticare un design ottimizzato per i dispositivi mobili

fonte

Al giorno d'oggi, è fondamentale che i moduli Web includano un design ottimizzato per dispositivi mobili a causa del numero di persone che navigano nei siti, registrano nuovi account e acquistano articoli da uno smartphone o tablet. Senza un design ottimizzato per i dispositivi mobili, il tuo modulo non si adatta o funziona correttamente tramite uno di questi dispositivi.

Great UX significa un'esperienza end-to-end di qualità per i tuoi visitatori. Ciò significa che i tuoi visitatori devono avere interazioni coerenti e positive con il tuo sito web, indipendentemente dal dispositivo su cui si trovano. Senza un design ottimizzato per i dispositivi mobili, i tuoi moduli non ti aiuteranno a migliorare UX o a incrementare le conversioni. Questo potrebbe essere una perdita devastante per la tua azienda considerando quante persone portano un dispositivo mobile e navigano sul web tramite lo smartphone o il tablet su base costante.

5. Fornire vincoli di input

fonte

Se hai un modulo sul tuo sito con una casella di testo di testo di lunga durata (che significa che hai bisogno di una risposta breve o di un paragrafo di risposta dai tuoi visitatori), dovresti includere i vincoli di input. Questi vincoli impediscono ai visitatori di scrivere oltre un certo numero di parole o limiti. Questa è una funzione utile perché fornisce ai tuoi visitatori dei parametri. Inoltre impedisce a te e alla tua azienda di dover leggere le risposte lunghe diversi paragrafi.

I vincoli di input migliorano UX perché forniscono ai visitatori linee guida che li mantengono efficienti. Assicurano che i tuoi visitatori sappiano esattamente cosa ci si aspetta da loro, quante informazioni hanno bisogno di condividere con te e impediscono loro di perdere tempo a scrivere una risposta lunga e non necessaria.

6. Utilizzare forme multi-step quando necessario

fonte

I moduli a più passaggi vengono utilizzati in situazioni in cui sono presenti più campi modulo, molti dei quali potrebbero essere suddivisi in categorie (ad esempio "personale", "spedizione", "fatturazione" e "verifica pagamento"). Migliorano UX perché aumentano l'usabilità di una forma rendendo più facile per un visitatore raggiungere il proprio obiettivo (completare e inviare il modulo). Con un modulo a più fasi, hai diviso i tuoi campi in diversi moduli più brevi, ciascuno su pagine web separate. Aiutano ad organizzare i campi del modulo e rendono la forma più maneggevole per l'utente.

7. Fornire pulsanti di azione chiari e ovvi

fonte

I pulsanti di azione sono ciò che i visitatori fanno clic per passare alla parte successiva di un modulo a più fasi o per inviarlo. Inutile dire che sono una parte fondamentale del tuo modulo web, ed è per questo che devi assicurarti che siano brillanti, audaci e ovvi.

I pulsanti di azione evidenti e chiari migliorano l'accessibilità di un modulo perché sono universalmente riconosciuti come il modo di inviare informazioni su un modulo. Inoltre, poiché sono così facili da vedere, si evita di confondere il visitatore quando inviano le proprie informazioni.

8. Creare etichette di campi in linea

fonte

Le etichette dei campi modulo in linea sono etichette dei campi modulo che si trovano all'interno dei campi stessi. Rendono la tua forma elegante e pulita. Posizionare le etichette in linea con i tuoi campi è il modo più intelligente per denominare i tuoi campi per i tuoi visitatori: ciò migliora la facilità d'uso del tuo modulo poiché non ci sono dubbi su quale etichetta appartenga a quel campo.

9. Aggiungi messaggi di errore in linea

fonte

Ora che sai quali sono i campi di modulo inline, puoi probabilmente indovinare quali sono i messaggi di errore incorporati – indicano a un visitatore un errore nella loro forma evidenziando il problema in linea con il campo in cui si trova. Questi messaggi assicurano che non ci siano dubbi su quale campo includa l'errore. Alcuni di questi messaggi includono anche una dichiarazione breve e chiara che spiega come il visitatore può effettuare la correzione necessaria.

I messaggi di errore migliorano UX rendendo il più semplice possibile al tuo visitatore la correzione dell'errore. I messaggi di errore incorporati rendono la tua forma e la tua azienda professionale e riflessiva.

10. Contrassegnare i campi richiesti e opzionali

fonte

Dovresti sempre contrassegnare i campi del modulo come "obbligatori" o "facoltativi". Puoi farlo scrivendo "obbligatorio" o "facoltativo" in un piccolo carattere accanto al tuo campo, o posizionando un asterisco accanto ai campi richiesti, quindi non c'è dubbio su cosa i tuoi visitatori devono completare.

Contrassegnare i campi del modulo come richiesto o facoltativo migliora UX rendendo il tuo modulo accessibile a tutti – offri ai tuoi visitatori una serie di aspettative mentre compilano il modulo. Non solo questo garantisce che tutti i tuoi visitatori si trovino sulla stessa pagina delle informazioni che loro hanno bisogno presentare, ma impedisce anche loro di sprecare tempo a inviare e reinviare i moduli per cercare di determinare quali campi sono quelli necessari.

Indietro da te

Great UX è il modo in cui assicurerai interazioni positive tra i visitatori del tuo sito e i moduli. Tenendo conto di queste linee guida ed esempi UX, creerai una grande esperienza per i tuoi visitatori che li farà tornare a condurre più affari con te e la tua azienda. Lascia che questi esempi ispirino il tuo design UX in modo da poter implementare le linee guida che si adattano meglio al tuo sito, alle tue attività e alle tue esigenze per aumentare le conversioni e dare un'impressione duratura ai tuoi visitatori.

Originariamente pubblicato l'11 gennaio 2019 alle 14:00, aggiornato l'11 gennaio 2019