Informazioni base: progettazione di moduli per dispositivi mobili
Cosa imparerai
Scopri i 6 principi di base per progettare un modulo d'iscrizione per dispositivi mobili.
Perché la progettazione dei moduli per dispositivi mobili è importante?
Gli acquirenti online utilizzano sempre più spesso i loro dispositivi mobili per scoprire nuovi negozi, esplorare i prodotti ed effettuare acquisti. Solo negli Stati Uniti, oltre il 35% degli acquisti online è stato effettuato da un dispositivo mobile e questo numero continua a crescere ogni anno.
Per assicurarti di convertire questi clienti in iscritti, è fondamentale che il tuo modulo d'iscrizione abbia un aspetto ottimale su dispositivo mobile tanto quanto su desktop.
Le 6 nozioni di base della progettazione di moduli per dispositivi mobili
- Mantieni il modulo breve e conciso
- Struttura il modulo in modo che corrisponda alle aspettative degli utenti
- Aiuta gli utenti a navigare nel modulo
- Scegli blocchi di contenuto che funzionano bene su dispositivi mobili
- Rendi il modulo facile da aprire, leggere e compilare sui dispositivi mobili
- Tieni in considerazione i colori e il relativo contrasto
Mantieni il modulo breve e conciso
Con i dispositivi mobili, meno è sempre meglio. Anche se può essere allettante scoprire tutto quello che puoi su un iscritto in una volta sola (nome, e-mail, compleanno, ecc.), i moduli lunghi su mobile possono portare a un tasso di completamento più basso.
Limita il più possibile il numero di elementi o campi del modulo che una persona deve compilare.
- Numero consigliato di campo di inserimento: 1–3 per pagina
- Numero consigliato di pulsanti call-to-action: 1–2 per pagina
Cosa devo fare se mi servono più di 3 campi?
Se ti servono più di 3 campi, ad esempio se vuoi raccogliere il consenso per e-mail e SMS allo stesso tempo, valuta un modulo in più passaggi.
Un modulo in più passaggi ti consente di raccogliere più informazioni senza sovraccaricare i potenziali iscritti. Inoltre, avere un passaggio separato per gli SMS è una best practice di conformità quando raccogli più tipi di consenso in un unico modulo.
In alternativa, puoi scoprire di più sui tuoi iscritti ricontattandoli in un secondo momento nel percorso del cliente. Ad esempio, puoi chiedere il compleanno agli iscritti attuali mostrando loro un altro modulo dopo 30 giorni, oppure puoi chiederlo come parte della tua serie di benvenuto.
Struttura il 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) quando un modulo non lo fa.
Di seguito trovi alcuni suggerimenti per strutturare un modulo per dispositivi mobili.
Chiedi prima le informazioni meno personali
Anche se tutti i campi di un modulo sono obbligatori, è comunque strano chiedere la data di nascita di qualcuno prima del nome.
In generale, chiedi le informazioni dalla meno alla più personale. Qualche esempio?
- Nome
- E-mail o numero di telefono
- Compleanno
Usa una struttura a colonna singola su dispositivi mobili
Un layout a colonna singola significa che tutti i campi di inserimento, i campi e i pulsanti seguono un'unica linea nel modulo. Sebbene i formati a più colonne vadano bene su desktop, sui dispositivi mobili possono far sembrare i moduli disordinati o troppo affollati. I moduli a colonna singola sono anche più facili da scansionare sui dispositivi mobili.
Modulo a colonna singola | Modulo multicolonna |
 |  |
Posiziona i pulsanti call-to-action (CTA) nella parte inferiore di un modulo
Il pulsante CTA dovrebbe trovarsi alla fine del percorso di lettura dell’utente, in modo che sia l’ultima cosa che vede. Non vuoi che debbano scorrere verso l’alto per completare il modulo o cercare il pulsante.
In genere, il pulsante CTA si posiziona al centro o sul lato sinistro.
Metti 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 che è lì che le persone si aspettano di vederlo.
Se lo posizioni altrove, ad esempio in alto a sinistra o vicino al fondo, chi usa il modulo potrebbe perdere tempo a cercare un modo per chiuderlo e frustrarsi durante la ricerca. Questo potrebbe portarli ad andarsene con un'impressione negativa del tuo brand, il che significa che sarà meno probabile che visitino il tuo sito in futuro o diventino clienti.
Aiuta gli utenti a navigare nel modulo
Con i dispositivi mobili, è importante essere il più chiari possibile su cosa deve fare una persona, come dovrebbe farlo e cosa ha già fatto.
Posiziona etichette concise sopra (e vicino a) ogni campo
Inserisci un'etichetta direttamente sopra ogni campo del tuo modulo che descriva chiaramente quali informazioni devono fornire.
Inoltre, posiziona le etichette vicino ai campi che descrivono, così è chiaro che i due elementi sono collegati.
Ogni etichetta dovrebbe occupare meno di una singola riga se visualizzata su qualsiasi dispositivo mobile, quindi la concisione è fondamentale.
Usa i segnaposto all'interno di ogni campo di inserimento di testo
In ogni campo in cui gli utenti devono inserire testo o numeri, includi segnaposto per mostrare al tuo pubblico come dovrebbe essere l'input (ad esempio un e-mail di esempio, un nome, un formato data, ecc.).
Questo aiuta a ridurre il numero di errori che qualcuno potrebbe commettere. Lavorare insieme con etichette e segnaposto rende facile per gli utenti orientarsi nel tuo modulo.
Usa una call-to-action descrittiva per i pulsanti
Suggerimento: anche i pulsanti dovrebbero avere delle etichette. Descrivere meglio il testo del pulsante aiuta anche l’utente.
Ad esempio, invece di un semplice call-to-action “Invia”, dire “Iscriviti alla newsletter” o “Registrati per gli SMS” chiarisce meglio cosa fa il pulsante. Inoltre, questo può aiutarti a risparmiare spazio prezioso nel modulo più piccolo.
Indica quali campi sono obbligatori e quali sono facoltativi
Indicare ai clienti quali campi devono compilare e quali no semplifica l'esperienza utente. Puoi rendere obbligatori alcuni elementi del modulo e altri facoltativi,
Includi un messaggio di esito positivo
Includi un messaggio di successo dopo che qualcuno invia il modulo, in modo che l'utente sappia che l'invio è andato a buon fine.
Scegli blocchi di contenuto che funzionano bene su dispositivi mobili
Alcuni tipi di blocchi dei moduli sono più adatti ai dispositivi mobili rispetto ad altri. Di seguito, elenchiamo cosa usare sui dispositivi mobili e cosa non usare.
Buono da usare su dispositivi mobili | Scarsa esperienza su mobile |
Input di testo o numerici (e-mail, telefono, data) | Caselle di controllo multiple |
Pulsanti radio | Menu a discesa |
Pulsanti tap-to-text (per il consenso SMS) |
Rendi il modulo facile da aprire, leggere e compilare sui dispositivi mobili
In generale, il tuo modulo dovrebbe essere facile da usare sui dispositivi mobili. Le persone non dovrebbero avere difficoltà a leggere il testo o a fare clic su un pulsante specifico. Se succede, potrebbero frustrarsi e abbandonare il modulo o il tuo sito del tutto.
Esistono diverse best practice per la progettazione per mobile.
Imposta la dimensione del carattere su almeno 16 pixel
Usare una dimensione del carattere di 16 pixel o più aiuta a garantire che il testo sia leggibile. In questo modo, gli utenti non devono ingrandire per leggere.
16 pixel è la dimensione minima consigliata del font per qualsiasi testo nel modulo per dispositivi mobili, incluse etichette, segnaposto e testo dei pulsanti.
Aggiungi almeno 8 pixel di spazio tra i campi, i pulsanti e così via.
Lascia abbastanza spazio tra le singole azioni nel modulo in modo che gli utenti non facciano fatica a fare clic nel campo desiderato. Altrimenti, potrebbero decidere di andarsene invece di continuare a provare.
Quando crei il modulo, cerca di rendere il più difficile possibile per gli utenti commettere un errore. Testa l’esperienza utente su diversi tipi di dispositivi.
Crea aree di tocco di almeno 48 pixel
Qualsiasi “touch target”, come i campi di inserimento o i pulsanti, dovrebbe essere grande e facile da selezionare.
Il dito medio di un adulto è di 11 MM+ (aziende mid-market di livello avanzato), ovvero circa 41,6 pixel. Per tenerne conto, una best practice è creare aree tocco di almeno 48 pixel.
Usa un modulo teaser
Utilizza un teaser del modulo in modo che i visitatori da dispositivi mobili possano aprire e chiudere il modulo come preferiscono mentre navigano e in modo che il modulo non copra i contenuti del tuo sito.
Tieni presente che Google applica una penalità ai siti con interstitial invasivi. I teaser aiutano a evitare questa penalità, ma dovresti anche utilizzare un ritardo molto lungo con i moduli.
Tieni in considerazione i colori e il relativo contrasto
Vuoi sempre che i colori del tuo modulo corrispondano al tuo brand, in modo che lo rispecchino.
Tuttavia, è altrettanto importante rendere le combinazioni di colori accessibili a tutte le persone. Altrimenti, rischi di allontanare potenziali iscritti o clienti.
Quando scegli i colori, ci sono 2 considerazioni fondamentali.
Scegli colori ad alto contrasto
Il contrasto cromatico è la differenza di luminosità tra il testo o gli oggetti in primo piano e lo sfondo. Un buon contrasto cromatico migliora la leggibilità del tuo modulo ed è un componente chiave dell'accessibilità. Usa un controllo del contrasto cromatico per verificare il contrasto cromatico.
Il contrasto minimo è 1:1 ed è impossibile da leggere (ad esempio, testo bianco su sfondo bianco). Il contrasto massimo disponibile è 21:1, ovvero testo nero su sfondo bianco. In altre parole, più grande è il rapporto, migliore è il contrasto.
In base alle Linee guida per l’accessibilità dei contenuti web (WCAG), il contrasto cromatico minimo è 4,5:1 per testo piccolo, immagini e testo nelle immagini e 3:1 per testo grande o elementi importanti.
Idealmente, il contrasto dovrebbe essere ancora maggiore. Secondo le WCAG, un minimo migliore è:
- 7:1 per testo più piccolo, immagini o immagini di testo
- 4,5:1 per testo di dimensioni maggiori, elementi visivi chiave e così via.
Scegli colori adatti alle persone con daltonismo
È importante che chiunque possa apprezzare i contenuti su cui lavori così duramente. L'uso di determinate combinazioni di colori può rendere il modulo difficile o persino impossibile da leggere per alcuni gruppi.
Combinazioni adatte alle persone daltoniche | |||
Blu e arancione |   | Blu e giallo |  |
Blu e rosso |  | Arancione e giallo | |
blu e marrone |  | ||
Per quanto riguarda quelli da non usare, tieni presente che esistono molti tipi di daltonismo (non solo 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 bluastro 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
- Getting started with sign-up forms
Learn how to create and customize sign-up forms in Klaviyo to publish on your website so you can engage shoppers, collect emails and phone numbers, and build long-lasting customer relationships.
- How to collect SMS consent with a tap-to-text form
Learn how to set up a tap-to-text sign-up form to collect phone numbers from new prospects. With tap-to-text, site visitors can click a button in your sign-up form to automatically open their text messaging app where Klaviyo has added a message. They only need to send the message to subscribe.
- How to create ADA-friendly sign-up forms
Learn how to use the accessibility assistant feature in the Form Alerts tab of the sign-up forms editor to avoid some of the most common web content accessibility guidelines (WCAG) compliance issues. Companies striving to make their websites ADA-friendly should reference and follow WCAG standards. The accessibility assistant guides you in creating sign-up forms that are accessible for all of your site visitors.