Informazioni base: progettazione di moduli per dispositivi mobili

Gli acquirenti online utilizzano sempre più spesso i loro dispositivi mobili per scoprire nuovi negozi, sfogliare i prodotti ed effettuare acquisti. Solo negli Stati Uniti, oltre il 35% degli acquisti online ha utilizzato un dispositivo mobile, e questo numero continua a crescere ogni anno. 

Per assicurarsi di convertire questi clienti in abbonati, è fondamentale che i suoi moduli di iscrizione siano altrettanto belli su mobile che su desktop. 

Se ha bisogno di più di 3 campi, ad esempio se vuole raccogliere il consenso via e-mail e via SMS allo stesso tempo, prenda in considerazione un modulo multi-step. 

Un modulo a più fasi le consente di raccogliere più informazioni senza sovraccaricare i potenziali abbonati. Inoltre, avere una fase separata per gli SMS è una best practice di conformità quando si raccolgono più tipi di consenso in un unico modulo. 

In alternativa, può imparare di più sui suoi abbonati facendo un re-targeting più avanti nel percorso del cliente. Forse chiede il compleanno dei suoi attuali abbonati mostrando loro un altro modulo dopo 30 giorni, o forse lo chiede come parte della sua serie di benvenuto.

Anche se tutti i campi di un modulo sono obbligatori, è comunque strano chiedere la data di nascita di una persona prima del suo nome. 

In generale, chieda informazioni dal meno al più personale. Per esempio: 

1. Nome
2. Email o numero di telefono
3. Compleanno

Una colonna singola significa che tutti gli input, i campi e i pulsanti seguono una sola riga nel modulo. Sebbene i formati a più colonne vadano bene su desktop, possono far apparire i moduli per dispositivi mobili disordinati o affollati. I moduli a colonna singola sono anche più facili da scansionare sui cellulari.

Modulo a colonna singola	Modulo a più colonne

Il pulsante CTA dovrebbe trovarsi alla fine del percorso di scansione dell'osservatore, in modo che sia l'ultima cosa che vede. Non vuole che debbano scorrere verso l'alto per completare il modulo, o che debbano cercare il pulsante. 

In genere, il pulsante CTA è posizionato al centro o sul lato sinistro. 

Il motivo per cui il pulsante di chiusura deve trovarsi nell'angolo in alto a destra è semplicemente perché è lì che gli utenti si aspettano di vederlo. 

Se lo posiziona da un'altra parte, come in alto a sinistra o vicino alla parte inferiore, i suoi utenti potrebbero perdere tempo a cercare un modo per chiudere il modulo e rimanere frustrati durante la ricerca. Questo potrebbe far sì che se ne vadano con un'impressione negativa del suo marchio, il che significa che sono meno propensi a visitare il suo sito in futuro o a diventare clienti.

Collochi un'etichetta direttamente sopra ogni campo del suo modulo, che descriva chiaramente quali informazioni devono essere fornite. 

Inoltre, metta le etichette vicino ai campi che descrivono, in modo che sia chiaro che le due cose sono collegate.

Ogni etichetta deve occupare meno di una riga quando viene visualizzata su qualsiasi dispositivo mobile, quindi è fondamentale essere concisi.

In ogni campo in cui gli utenti devono inserire del testo o dei numeri, includa dei segnaposto per mostrare al suo pubblico come dovrebbe essere il loro input (ad esempio, un esempio di e-mail, di nome, di formato della data, ecc.)

Questo aiuta a ridurre il numero di errori che qualcuno potrebbe commettere. La collaborazione con le etichette e i segnaposto facilita la navigazione degli utenti nel suo modulo. 

Suggerimento: anche i pulsanti dovrebbero avere delle etichette. Anche essere più descrittivi nel testo del pulsante aiuta l'utente. 

Per esempio, piuttosto che una semplice chiamata all'azione "Invia", dire "Iscriviti alla newsletter" o "Iscriviti agli SMS" dà un'idea più chiara di cosa fa il pulsante. Inoltre, questo può aiutarla a risparmiare spazio prezioso nella forma più piccola. 

Indicare ai suoi clienti quali campi devono compilare e quali no snellisce l'esperienza dell'utente. Può rendere alcuni elementi del modulo obbligatori e altri facoltativi, 

Includa un messaggio di successo dopo che qualcuno ha inviato il modulo, in modo che l'utente sappia che ha avuto successo. 

L'utilizzo di una dimensione del carattere di 16 o più pixel aiuta a garantire la leggibilità del testo. In questo modo, gli utenti non hanno bisogno di zoomare per leggere.

16 pixel è la dimensione minima del carattere consigliata per qualsiasi testo nel suo modulo mobile, comprese le etichette, i segnaposto e il testo dei pulsanti. 

Lasci uno spazio sufficiente tra le singole azioni del suo modulo, in modo che gli utenti non fatichino a cliccare sul campo desiderato. Altrimenti, potrebbero decidere di andarsene piuttosto che continuare a provare. 

Nel costruire il suo modulo, cerchi di rendere il più difficile possibile per gli utenti commettere un errore. Provi l'esperienza dell'utente su diversi tipi di dispositivi. 

Qualsiasi "bersaglio tattile", come i campi di input o i pulsanti, deve essere grande e facile da cliccare. 

Il dito medio di un adulto misura 11 mm, pari a circa 41,6 pixel. Per tenere conto di questo, la prassi migliore è quella di rendere i bersagli tattili di almeno 48 pixel. 

Utilizzi un modulo teaser, in modo che i visitatori mobili possano aprire e chiudere il modulo a piacimento mentre navigano, e che il modulo non copra il contenuto del suo sito.
Si noti che Google ha una penalizzazione sui siti con interstitials invadenti. I teaser aiutano ad evitare questa penalizzazione, ma dovrebbe anche utilizzare un lungo ritardo con i moduli. 

Il contrasto cromatico è la differenza di luce tra il testo o gli oggetti in primo piano e lo sfondo. Un buon contrasto di colori migliora la leggibilità del suo modulo ed è un componente chiave dell'accessibilità. Per verificare il contrasto di colore, utilizzi un verificatore di contrasto di colore.

Il contrasto minimo è 1:1 ed è impossibile da leggere (pensi al testo bianco su sfondo bianco). Il contrasto massimo disponibile è 21:1, ovvero testo nero su sfondo bianco. In altre parole, maggiore è il rapporto, migliore è il contrasto. 

Secondo le Linee guida per l'accessibilità dei contenuti web (WCAG), il contrasto minimo dei colori è 4,5:1 per il testo piccolo, le immagini e il testo nelle immagini e 3:1 per il testo grande o gli elementi importanti. 

Idealmente, il contrasto dovrebbe essere ancora maggiore. Secondo le WCAG, un minimo migliore è:

• 7:1 per i testi più piccoli, le immagini o le immagini di testo
• 4,5:1 per testi più grandi, elementi visivi chiave, ecc. 

È importante che tutti possano apprezzare i contenuti su cui lei lavora così duramente. L'utilizzo di determinate combinazioni di colori può rendere il modulo difficile o addirittura impossibile da leggere per alcuni gruppi. 

Per quanto riguarda quelli da non usare, tenga presente che ci sono molti tipi di daltonismo (non si tratta solo di rosso e verde).