Informazioni base: progettazione di moduli per dispositivi mobili
Imparerai
Impari i 6 principi fondamentali della progettazione di moduli di iscrizione per dispositivi mobili.
Perché il design dei moduli mobili è importante?
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.
Le 6 basi del design dei moduli per dispositivi mobili
- Mantenga il modulo breve e diretto al punto
- Strutturi il suo modulo in modo che corrisponda alle aspettative degli utenti
- Aiuta gli utenti a navigare nel suo modulo
- Scelga blocchi di contenuto che funzionino bene su mobile
- Renda il suo modulo facile da aprire, leggere e compilare sui dispositivi mobili.
- Consideri i suoi colori e il loro contrasto
Mantenga il modulo breve e diretto al punto
Con i moduli mobili, meno è sempre meglio. Anche se può essere allettante imparare tutto il possibile su un abbonato in una sola volta (nome, e-mail, compleanno, ecc.), i moduli mobili lunghi possono portare a un tasso di completamento inferiore.
Limiti il più possibile il numero di elementi o campi del modulo che qualcuno deve compilare.
- Numero consigliato di campi di inserimento: 1-3 per pagina
- Numero consigliato di pulsanti call-to-action: 1-2 per pagina.
Cosa devo fare se ho bisogno di più di 3 campi?
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.
Strutturi il suo modulo in modo che corrisponda alle aspettative degli utenti
Le persone si aspettano che i moduli seguano una certa logica e può essere frustrante (o semplicemente strano) se un modulo non lo fa.
Di seguito sono riportati i consigli per strutturare un modulo per i dispositivi mobili.
Chieda prima le informazioni meno personali
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:
- Nome
- Email o numero di telefono
- Compleanno
Utilizzi una struttura a colonna singola su mobile
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 |
 |  |
Collochi i pulsanti call-to-action (CTA) in fondo al modulo.
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.
Metta il pulsante di chiusura nell'angolo in alto a destra
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.
Aiuta gli utenti a navigare nel suo modulo
Con la telefonia mobile, vuole essere il più chiaro possibile su ciò che una persona deve fare, su come deve farlo e su ciò che ha già fatto.
Posizionare etichette concise sopra (e vicino) a ogni campo.
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.
Utilizzi dei segnaposto all'interno di ogni campo di immissione di testo
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.
Utilizzi una chiamata all'azione descrittiva per i pulsanti
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.
Indichi quali campi sono obbligatori e quali opzionali.
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,
Includere un messaggio di successo
Includa un messaggio di successo dopo che qualcuno ha inviato il modulo, in modo che l'utente sappia che ha avuto successo.
Scelga blocchi di contenuto che funzionino bene su mobile
Alcuni tipi di blocchi di moduli sono più adatti ai dispositivi mobili rispetto ad altri. Di seguito, elenchiamo cosa utilizzare sul cellulare e cosa no.
Ottimo da usare su mobile | Pessimo da usare su mobile |
Inserimento di testi o numeri (e-mail, telefono, data) | Caselle di controllo multiple |
Pulsanti radio | Giù le mani |
Pulsanti Tap-to-text (per il consenso agli SMS) |
Renda il suo modulo facile da aprire, leggere e compilare sui dispositivi mobili.
In generale, il suo modulo deve essere facile da usare sui dispositivi mobili. Le persone non dovrebbero faticare a leggere il testo o a cliccare su un pulsante specifico. Se ciò accade, potrebbero sentirsi frustrati e abbandonare completamente il modulo o il suo sito.
Ci sono diverse best practice quando si progetta per i dispositivi mobili.
La dimensione del carattere deve essere di almeno 16 pixel
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.
Aggiunga almeno 8 pixel di spazio tra i campi, i pulsanti, ecc.
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.
Renda i bersagli tattili di almeno 48 pixel
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
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.
Consideri i suoi colori e il loro contrasto
I colori dei moduli devono sempre corrispondere al suo marchio, in modo che riflettano il suo marchio.
Tuttavia, è altrettanto importante rendere le combinazioni di colori accessibili a tutti gli utenti. Altrimenti, rischia di allontanare potenziali abbonati o clienti.
Quando sceglie i colori, ci sono due considerazioni chiave.
Scelga colori ad alto contrasto
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.
Scelga colori adatti al daltonismo
È 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.
Combinazioni adatte al daltonismo | |||
Blu e arancione |   | Blu e giallo |  |
Blu e rosso |  | Arancione e giallo | |
Blu e marrone |  | | |
Per quanto riguarda quelli da non usare, tenga presente che ci sono molti tipi di daltonismo (non si tratta solo di rosso e verde).
Combinazioni di colori da evitare | | ||
Verde e rosso |  | Blu e viola |  |
Rosso e arancione | | Blu e grigio |  |
Verde e arancione | | Viola e rosso | |
Rosso e marrone | | Blu-verde e rosa |   |
Verde e marrone | | Verde-blu e grigio | |
Verde e blu | | Giallo e rosa | |
Verde chiaro e giallo |  | Rosa e grigio | |
Verde e grigio | | Grigio e marrone | |
Verde e nero |  | Arancione e marrone | |
Rosso e nero | | | |
Risorse aggiuntive
- Primi passi con i moduli d'iscrizione
Scopri come creare e personalizzare i moduli d'iscrizione in Klaviyo da pubblicare sul tuo sito web per coinvolgere gli acquirenti, raccogliere e-mail e numeri di telefono e creare connessioni durature con i clienti.
- Come raccogliere il consenso via SMS con un modulo tap-to-text
Scopra come impostare un modulo di iscrizione tap-to-text per raccogliere i numeri di telefono dei nuovi potenziali clienti. Con il tap-to-text, i visitatori del sito possono cliccare su un pulsante nel suo modulo di iscrizione per aprire automaticamente la loro app di messaggistica di testo, dove Klaviyo ha aggiunto un messaggio. Devono solo inviare il messaggio per iscriversi.
- Come creare moduli di iscrizione adatti all'ADA
Impari a utilizzare la funzione di assistente all'accessibilità nella scheda Avvisi modulo dell'editor di moduli di iscrizione per evitare alcuni dei più comuni problemi di conformità alle linee guida sull'accessibilità dei contenuti web (WCAG). Le aziende che cercano di rendere i loro siti web ADA-friendly dovrebbero fare riferimento e seguire gli standard WCAG. L'assistente all'accessibilità la guida nella creazione di moduli di iscrizione accessibili a tutti i visitatori del suo sito.