6 migliori pratiche e grandi esempi da seguire

Hai mai provato a completare un modulo su un sito web e ti sei sentito confuso o perso mentre lo facevi? La collocazione delle etichette dei campi modulo e dei campi stessi non ha senso? Il pulsante del titolo e di invio della maschera non si trovava in posizioni che erano facili da individuare?

Questi fattori, tra molti altri, sono aspetti importanti del layout di un modulo Web che hanno il potenziale di migliorare o diminuire la sua esperienza utente (UX). Implementando un layout di successo, creerai una grande esperienza per i tuoi visitatori e avvierai una relazione positiva, e auspicabilmente duratura, tra loro e il tuo marchio.

In questa guida, esamineremo sei migliori pratiche di layout dei moduli Web nonché esempi di ogni pratica per aiutarti a iniziare. Ma prima, rivediamo che cos'è il layout del modulo web e perché è così importante.

Perché il layout del modulo Web è importante?

Quasi ogni sito web ha un modulo web di qualche tipo. Il layout del modulo Web svolge un ruolo importante nel modo in cui il modulo viene convertito. Ciò è dovuto al fatto che un ottimo layout del modulo consente il completamento di moduli senza soluzione di continuità e migliora il processo di invio per i visitatori. I visitatori potranno facilmente convertire da quando hai creato un modulo web che è senza problemi e si sente sia professionale che premuroso.

Al contrario, un layout mal pianificato porterà a un modulo confuso e difficile da elaborare che potrebbe frustrare i visitatori e persino farli abbandonare completamente il sito, riducendo le conversioni.

Ora capiamo perché avere il layout del modulo web giusto è così importante, tuffiamoci dentro Come per creare un layout ottimale per il tuo modulo web. Di seguito sono elencate le sei best practice da seguire quando si organizza il contenuto.

Layout dei moduli: 6 migliori pratiche e ottimi esempi da seguire

Abbiamo curato questo elenco di best practice, da applicare praticamente a qualsiasi tipo di modulo web. Abbiamo anche incluso ottimi esempi di ogni pratica per aiutarti ad applicare meglio i concetti alle tue forme.

1. Usa un layout a colonna singola

Quando si tratta del layout, è necessario mantenere la posizione e l'ordine di tutti i campi nel modo più semplice possibile. Ciò significa che devi utilizzare un layout a colonna singola. Organizzando i tuoi campi in questo modo, i tuoi visitatori non perderanno un campo, completeranno i campi nell'ordine che ha più senso e saranno in grado di inviare il modulo più velocemente di quanto farebbero se si usasse un multi forma di colonna.

Grande esempio:

Questo esempio mostra come dovrebbe apparire un formato a colonna singola. Il layout è semplicemente snello, lineare e minimalista come potrebbe essere, ed è esattamente ciò che desideri. In questo modo, diminuisci il tempo necessario ai tuoi visitatori per lavorare attraverso il tuo modulo e non c'è motivo di errore o confusione.

2. Allinea la copia a sinistra

Allinea tutti i campi del modulo sul lato sinistro della pagina web. Questo è il modo più naturale per presentare il tuo modulo perché è la maggior parte della gente che impara a leggere il contenuto, passando da destra a sinistra. Se non si utilizzano etichette di campi del modulo inline (che si trovano direttamente nei campi del modulo stessi), è necessario allineare le etichette a sinistra. Ancora una volta, questo flusso naturale aiuterà i visitatori a completare la tua forma in modo più efficiente senza sentirsi confuso su quale etichetta appartenga a quel campo.

Grande esempio:

fonte

Questa foto mostra l'allineamento del lato sinistro per i campi e le etichette del modulo. Il modulo è organizzato in un modo che lo rende chiaro per i visitatori e consente quindi processi di completamento e invio rapidi. Non c'è dubbio su quali etichette appartengano a quali campi e lavorando da destra a sinistra attraverso il modulo sia sia naturale che senza problemi.

3. Utilizzare un layout di una pagina

Quando crei i tuoi moduli, dovresti utilizzare un layout di una pagina in modo che sia presente un solo modulo in ogni pagina. Se si dispone di una forma breve, tutto dovrebbe essere facilmente adattato su una singola pagina, rendendo questo un semplice layout da implementare.

Se si dispone di molti campi modulo, è necessario suddividerli in un modulo a più fasi. Quando lo fai, ci saranno più pagine web con parti separate del modulo, rendendo più gestibile la quantità di lavoro che il tuo visitatore deve completare. (Se tu fare avere un modulo in più fasi, puoi anche aggiungere una barra di avanzamento nella parte superiore della pagina in modo che i tuoi visitatori sappiano per quanto tempo ancora lavoreranno su di esso.)

Grande esempio:

fonte

A causa dell'elevato numero di campi modulo che i visitatori devono completare, questo è un modulo a più fasi distribuito su tre pagine Web separate. Organizzando il modulo in questo modo, rivederlo e completarlo non sembra un processo lungo e noioso.

Piuttosto che guardare una lunga lista di campi modulo che devono essere completati, vedere solo pochi campi alla volta rende la forma meno opprimente. (Anche la barra di avanzamento nella parte superiore della pagina è d'aiuto, soprattutto perché contrassegna in modo chiaro i nomi delle pagine Web che il visitatore deve elaborare).

4. Crea un layout ottimizzato per i dispositivi mobili

In questi giorni quasi tutti portano con sé un certo tipo di dispositivo mobile in ogni momento. Non importa se sono in viaggio, in viaggio, in permuta o semplicemente seduti nella comodità della propria casa, non è un segreto che le persone si iscrivano alla tua newsletter, si registrano per un account e acquistano i tuoi prodotti tramite la loro smartphone e tablet. Ecco perché è fondamentale che il tuo sito includa moduli ottimizzati per i dispositivi mobili.

Grande esempio:

fonte

Questo esempio mostra molti aspetti importanti di un layout di modulo mobile di successo. Il modulo ha un titolo chiaro nella parte superiore del piccolo schermo, un'opzione chiara e semplificata per aggiungere (o scansionare) le informazioni della carta di credito in modo che un visitatore non debba digitare la nostra serie di numeri su una tastiera così piccola, un semplice , layout a singola colonna e multi-passo, design minimalista e altro ancora. Questo modulo è strutturato in modo da consentire agli utenti di comprenderlo e completarlo facilmente tramite un dispositivo mobile.

5. Aggiungi etichette per campi modulo in linea

Le etichette e il testo di campi in linea rendono estremamente facile per i visitatori capire dove dovrebbero posizionare le loro risposte nei moduli. Prendono le congetture da quale etichetta appartiene a quale campo, rendendo semplice per i visitatori di muoversi attraverso il modulo senza esitazione. Inoltre mantengono il tuo aspetto pulito, minimalista, privo di ingombri e elegante.

Grande esempio:

fonte

Poiché queste etichette di campo sono in linea, la forma appare più semplice e più breve di quanto sarebbe se le etichette si trovassero al di fuori dei campi di immissione. I visitatori non avranno alcun problema nel determinare dove devono inserire le loro informazioni. A volte quando le etichette dei campi si trovano sopra, sotto o sul lato dei campi, è difficile determinare quale etichetta appartiene a quale campo.

6. Usa i messaggi di errore in linea

L'utilizzo di messaggi di errore incorporati nei moduli Web è un modo efficace per garantire che qualcuno capisca che c'è un problema con un campo che hanno provato a completare. Inoltre indirizzano il visitatore alla posizione esatta dell'errore, quindi non c'è tempo perso a determinare dove si trova il problema.

Dopo aver creato i tuoi messaggi incorporati, assicurati di aggiungere un contesto sul perché l'errore esiste e su come i tuoi visitatori possono correggerlo. Questo non solo fa risparmiare tempo ai tuoi visitatori quando aggiustano gli errori, ma salva anche te ei tuoi colleghi dipendenti dal dover elaborare risposte non valide una volta che il modulo è stato inviato.

Grande esempio:

In questo modulo, il messaggio di errore appare in linea, il che significa che il campo non valido è evidenziato in rosso. Il modulo include un simbolo di errore accanto al campo per evidenziare ulteriormente il fatto che c'è un problema e dove si trova il problema. Infine, il messaggio spiega perché l'errore esiste e come risolverlo.

Indietro da te

Con un layout del modulo Web di successo, creerai un'esperienza utente eccezionale per i tuoi visitatori che lascerà un'impressione positiva e duratura su di essi. Il tuo layout dovrebbe snellire il completamento del modulo e i processi di invio per i tuoi visitatori, quindi non c'è alcuna confusione o incertezza riguardo al modulo stesso. Inizia subito a migliorare il layout del modulo pensando a queste pratiche e a come puoi incorporarle nei tuoi moduli per migliorare UX e aumentare le conversioni.

Originariamente pubblicato il 10 gennaio 2019 alle 9:00:00, aggiornato il 10 gennaio 2019