Una guida per principianti alla conversione di utenti mobili

Pensa a un momento in cui eri in treno, seduto in aeroporto o semplicemente sdraiato sul divano e dovevi compilare un modulo online sul tuo smartphone. Hai mai prestato attenzione al design del modulo mobile?

È probabile che tu non l'abbia notato. Questo è l'obiettivo: offrire agli utenti un'esperienza intuitiva che consenta loro di compilare senza problemi il modulo e continuare la giornata.

In questa guida, esamineremo i modi più efficaci per farlo. Qui imparerai come progettare moduli per dispositivi mobili che non siano goffi o disallineati, ma che aiutino ad aumentare le conversioni e creare un'esperienza utente eccezionale.

Sommario

Progettazione di moduli per dispositivi mobili e desktop

Oggi, i visitatori del tuo sito Web non si limitano a navigare nel tuo sito, visualizzare i tuoi contenuti e completare i tuoi moduli dai loro computer desktop. Stanno anche completando queste attività dai loro dispositivi mobili.

Il mobile è stato responsabile di quasi il 60% del traffico globale del sito Web da aprile a giugno 2022. Ciò significa che è fondamentale che il tuo modulo sia semplice da rivedere, completare e inviare tramite un dispositivo mobile.

Perché è importante la progettazione di moduli mobili?

Il miglior design del modulo mobile consente un'esperienza utente positiva, che garantisce un visitatore felice del sito Web che ha maggiori probabilità di convertirsi in un cliente e diventare un utente di ritorno.

Il design, il layout e la funzionalità dei tuoi moduli mobili svolgono un ruolo importante nell'esperienza utente complessiva del tuo sito web.

Se i tuoi moduli non sono ottimizzati per i dispositivi mobili, potresti riscontrare un numero inferiore di conversioni, una perdita di traffico sul sito per dispositivi mobili e un aumento di clienti scontenti e frustrati. E chi lo vuole?

Perché il design dei moduli per dispositivi mobili dovrebbe differire dal design dei desktop?

"Tutto funziona in modo diverso sui dispositivi mobili, quindi i professionisti del marketing devono assicurarsi che tutti gli elementi dei loro siti Web siano sempre ottimizzati per i dispositivi mobili", afferma Lilach Bullock, pluripremiata influencer e stratega del marketing.

"E questo, ovviamente, include i moduli, soprattutto perché sembra che tu debba costantemente compilare moduli mentre sei sul cellulare."

In particolare, pensa alla differenza nel display o nelle dimensioni dello schermo tra un dispositivo mobile, come un Apple iPhone, che in genere varia da 4,7 "a 6,7"; e un laptop o desktop Mac, che in genere varia da 13 "a 24" di dimensioni. È lecito ritenere che una forma che si adatta allo schermo di un iPhone non si adatterebbe perfettamente allo schermo del desktop.

Se i tuoi visitatori mobili non riescono a leggere, completare e inviare facilmente il tuo modulo, potresti perdere la loro attività. Quindi creare un modulo ottimizzato per i dispositivi mobili che si adatti allo schermo di qualsiasi dispositivo mobile è fondamentale per creare un'ottima esperienza utente al fine di lasciare un'impressione duratura sui tuoi visitatori e aiutarti ad aumentare le conversioni.

Che cos'è il web design reattivo?

Se desideri fare un ulteriore passo avanti nella progettazione di moduli mobili e assicurarti che l' intero sito Web sia funzionante su tutti i tipi di dispositivi, puoi implementare un design del sito Web reattivo.

Il responsive web design prende in considerazione le dimensioni dello schermo, la piattaforma, l'orientamento e l'ambiente dell'utente. Questo è un modo semplice ed efficace per creare un'ottima esperienza utente poiché così tante persone visitano e navigano costantemente su diversi siti Web su vari dispositivi.

Esistono diversi modi per assicurarti che il tuo sito abbia un design reattivo. Ad esempio, se sei un utente WordPress, ci sono diversi temi WordPress reattivi che puoi installare e utilizzare per progettare il tuo sito.

Inoltre, se stai costruendo o hai realizzato il tuo sito con software come Squarespace, il tuo sito potrebbe essere dotato automaticamente di responsive web design.

Oggi, il responsive web design è una scelta popolare per le aziende a causa dell'enorme numero di persone che visitano i siti Web tramite una varietà di diversi dispositivi mobili. Ma per ora, torniamo a discutere della progettazione di moduli mobili.

Mobile Form Design: 11 linee guida UX

“Quando si progettano i moduli mobili”, spiega Bullock, “è importante mantenere le cose semplici e renderle il più veloci possibile. [I moduli] sono più difficili da completare sui dispositivi mobili e sembra che tutto richieda più tempo del dovuto."

In altre parole, la cosa più importante è la semplicità per l'utente finale. Quando crei un modulo ottimizzato per i dispositivi mobili, devi seguire alcuni passaggi per offrire la migliore esperienza utente possibile ai tuoi visitatori. Esaminiamo 11 di queste best practice per la progettazione di moduli mobili che puoi iniziare a implementare oggi stesso.

1. Ridurre al minimo il numero di campi del modulo.

Hai mai sentito il detto "less is more"? Bene, questo è esattamente ciò a cui dovresti pensare mentre crei il tuo modulo mobile.

Tra le dimensioni dello schermo di un dispositivo mobile e la quantità di contenuto che devi inserire nel modulo, è facile che il tuo modulo risulti accidentalmente disordinato. Ricorda di rimuovere la lanugine non necessaria. Conserva i campi del modulo solo per le informazioni di cui hai assolutamente bisogno .

Per semplificare il processo, ti consigliamo anche di etichettare i campi del modulo in modo chiaro e conciso e contrassegnare i campi facoltativi come "facoltativi" o includere un asterisco accanto a quelli obbligatori.

Fonte immagine

L'obiettivo è rendere il modulo il più semplice possibile da compilare in modo che le possibilità che le persone completino il modulo aumentino.

2. Automatizza gli input quando possibile.

Se per errore digiti in modo errato il tuo indirizzo e il modulo corregge l'ortografia per te, il modulo corregge automaticamente la tua risposta.

Se inizi a digitare il tuo indirizzo di spedizione e viene visualizzata una finestra con il resto del tuo indirizzo che ti chiede se desideri "riempire automaticamente" il resto dei campi del modulo con il tuo indirizzo salvato, allora il tuo modulo sta completando automaticamente la tua risposta per te.

Implementando le funzioni di correzione automatica e compilazione automatica nei moduli per dispositivi mobili, migliorerai l'esperienza dell'utente rendendo più rapido, semplice e diretto l'inserimento dei dati da parte degli utenti.

Nell'esempio seguente, una persona può facilmente compilare automaticamente le proprie informazioni facendo clic sul piccolo popup che appare.

Fonte immagine

3. Utilizzare un layout a colonna singola.

Quando crei un modulo lungo o in più passaggi, elenca tutti i tuoi contenuti in un layout a colonna singola.

Fonte immagine

I layout dei moduli a colonna singola sono:

un. Più facile da leggere.

Il posizionamento di tutti i campi del modulo in un formato a colonna singola consente ai visitatori di concentrarsi su un solo elemento alla volta, rendendo il modulo più facile da leggere.

b. Meno scoraggiante.

Se guardi un modulo, soprattutto in uno spazio ristretto come faresti su un dispositivo mobile, e vedi una grande quantità di contenuto confuso insieme, potresti sentirti sopraffatto. Ecco perché separare i tuoi contenuti per righe e posizionare i campi del modulo in un formato a colonna singola rende i tuoi contenuti meno intimidatori.

c. Più veloce da completare.

Quando posizioni il tuo modulo a più passaggi in una singola colonna, i lead possono completarlo più rapidamente rispetto a un modulo a più colonne. Questo perché il formato rende il modulo più facile da leggere e lavorare passo dopo passo.

Dai un'occhiata a questo modulo di iscrizione sul sito Web di HubSpot se visualizzato da un desktop o da un laptop.

Fonte immagine

Il layout a due colonne ha senso qui, poiché c'è molto spazio sullo schermo più ampio con cui lavorare. Ora controlla lo stesso modulo quando viene visualizzato da un dispositivo mobile.

Fonte immagine

Questo layout a colonna singola consente all'occhio di fluire in modo naturale evitando il disordine sullo schermo mobile compatto.

4. La coerenza è importante (e anche l'aspetto della forma).

Come chiudi una cartella o una scheda aperta sul tuo laptop?

Facendo clic sul pulsante "x" nell'angolo in alto a destra.

Ma cosa succede se il pulsante non viene visualizzato su una particolare applicazione? Come ti sentiresti quando andassi a chiudere la finestra?

Confuso o irritato, forse. Potresti dedicare un minuto o due a capire come chiudere l'applicazione.

Questo è solo un esempio generico, ma serve bene per illustrare l'importanza della coerenza. Guarda questo video per saperne di più.

La coerenza nel design della forma non si applica solo allo stile (colori, tipografia, logo, ecc.) ma alle convenzioni generalmente accettate a cui le persone sono abituate.

Ecco alcuni suggerimenti per garantire un'esperienza coerente:

• Abbina l'aspetto del tuo modulo al tuo marchio e al tuo sito web.
• Assicurati che lo stile e la formattazione del tuo modulo siano coerenti e complementari (niente dovrebbe sembrare stridente o fuori posto).
• Allinea gli input del campo del modulo a sinistra.
• Apporre ogni etichetta sopra la casella di input corrispondente e allinearla a sinistra.
• Utilizzare un asterisco per indicare le domande obbligatorie.

Fonte immagine

Le prime impressioni lasciano un'impressione duratura (nella vita e negli affari). Questo vale per i tuoi moduli mobili. Nessuno vuole completare una forma oscura, difficile da leggere, disordinata e poco attraente.

Il tuo modulo mobile dovrebbe essere altamente funzionale oltre che esteticamente gradevole. Il suo aspetto dovrebbe contribuire alla sua leggibilità e all'esperienza utente positiva. Per ottenere ciò, utilizza uno stile e una dimensione del carattere semplici e di facile lettura, una tavolozza di colori che non sembri opprimente e campi di modulo minimi.

5. Tieni presente l'esperienza tattile.

Pensa a come tieni il telefono mentre scrivi.

Molto probabilmente, impugnando il telefono con due mani mentre si utilizzano i pollici per interagire con lo schermo. Oppure potresti persino farlo da solo o digitare usando il dito indice.

Interagiamo con gli smartphone in modo molto diverso rispetto a un laptop o desktop (indica il pollice del messaggio) e il design del modulo mobile dovrebbe riflettere questo.

Ecco alcuni suggerimenti da tenere a mente:

• Avere uno spazio bianco adeguato per mantenere il modulo ordinato ed evitare la pressione accidentale dei pulsanti.
• Assicurati che i pulsanti siano posizionati in modo logico (ad esempio, il pulsante di invio nella parte inferiore del modulo, in modo che gli utenti non debbano scorrere verso l'alto per trovarlo).
• Verifica che il testo (dimensione e stile del carattere) sia leggibile sul piccolo schermo del cellulare (nessuno vuole pizzicare lo schermo e ingrandire per poter leggere il testo).
• Assicurati che i campi del modulo e i pulsanti siano abbastanza grandi da poter essere toccati comodamente con un dito.
• Fai apparire il modulo verso la parte inferiore dello schermo (dove possibile) per renderlo facilmente raggiungibile.

Fonte immagine

6. Sfrutta i vincoli di input.

I vincoli di input limitano il tipo di risposta che una persona può inserire in un campo modulo. Ciò può includere un limite di parole (ad esempio, durante la compilazione di un modulo di domanda di lavoro) o la possibilità di inserire solo cifre (nel caso di un numero di telefono).

Questo è visibile nel modulo sottostante, in cui viene visualizzata una tastiera numerica quando una persona va a inserire il proprio numero di telefono.

Fonte immagine

I vincoli di input massimizzano l'efficienza del modulo limitando errori involontari, ritardi o confusione. Ad esempio, se qualcuno stava tentando di effettuare una prenotazione per un tavolo in un ristorante e ha accidentalmente selezionato una data nel passato, il vincolo gli impedirebbe di essere effettivamente in grado di selezionare e confermare tale data.

Ciò è particolarmente importante quando si progetta per i dispositivi mobili poiché schermi più piccoli rendono più difficile l'inserimento accurato delle informazioni. Impostando i vincoli di input, farai risparmiare tempo alle persone durante il completamento dei campi del modulo e impedirai a te stesso di ricevere risposte prolisse o non valide.

Ecco un altro esempio di vincolo di input.

Fonte immagine

7. Crea pulsanti di azione chiari.

I pulsanti sono un aspetto sottovalutato del design dei moduli mobili. Pensaci: ottieni l'invio o la conversione di un modulo solo dopo aver premuto il pulsante destro. Quindi non puoi davvero trascurare questo elemento.

Questo cheat sheet dell'interfaccia utente e il blog UX Planet sono ottime risorse per la progettazione di pulsanti efficaci. Ecco una rapida panoramica di alcuni dei principi menzionati che puoi applicare ai tuoi moduli mobili.

• Troppi pulsanti rovinano il brodo (proprio come i campi dei moduli, mantieni solo i pulsanti essenziali).
• Stile ed etichetta i tuoi pulsanti in modo coerente (maiuscole, formattazione, allineamento, ecc.).
• Metti in risalto il pulsante principale (l'azione principale che vuoi che l'utente intraprenda) facendolo risaltare per dimensione o colore.
• Giusto è giusto: una regola empirica comune per i dispositivi mobili è posizionare il pulsante principale sul lato destro e il secondo sulla sinistra (anche se questo può variare in base alle esigenze individuali).
• Etichette specifiche sono quasi sempre la risposta ("Modifica questa pagina" su "Modifica").

Fonte immagine

8. Fornire scanner per carte per i pagamenti.

Hai provato a inserire i dati della tua carta di credito in un modulo tramite il tuo smartphone? Digitare un mucchio di numeri su un piccolo schermo con una piccola tastiera può essere un processo noioso.

Le app di scansione delle carte, come Microblink, sono diventate sempre più popolari proprio per questo motivo. Quando effettuano un acquisto, i tuoi visitatori possono fare clic su un pulsante che li porta su una schermata in cui possono utilizzare la fotocamera del loro dispositivo mobile per scattare una foto sicura della parte anteriore e posteriore della loro carta, sia che si tratti della licenza o della carta di credito.

Fonte immagine

Con solo un paio di immagini, i tuoi lead saranno completati con una delle parti più dispendiose in termini di tempo del processo di completamento del modulo mobile: mantenere i tuoi visitatori efficienti, frustranti e privi di errori.

9. Spiegare la necessità di informazioni specifiche.

Durante la compilazione di una semplice iscrizione tramite e-mail o di un modulo di registrazione, ti è mai stato chiesto di fornire informazioni personali che non hanno nulla a che fare con il modulo di iscrizione stesso?

Questo è un evento comune in tutti i tipi di moduli (non solo mobili). Chiedere a qualcuno informazioni personali o altre informazioni sensibili senza spiegare la tua necessità può sembrare impreciso.

Quando fai una domanda che non è direttamente correlata al motivo per cui il tuo visitatore sta compilando il modulo, è essenziale creare una casella di riepilogo (con informazioni aggiuntive) su cui la persona può fare clic per capire perché stai chiedendo queste informazioni.

Tali indicatori possono anche aiutare a fornire ulteriori indicazioni sulla compilazione di un campo del modulo quando le istruzioni non sono immediatamente evidenti. Nell'immagine sottostante, viene visualizzata una finestra di riepilogo quando una persona passa con il mouse sopra l'icona.

Fonte immagine

Questi piccoli dettagli renderanno il tuo modulo professionale e premuroso, riducendo al contempo le probabilità che l'utente se ne vada a metà.

10. Raccogli conferme e feedback.

L'esperienza dell'utente è al centro di un buon design di moduli mobili. E la convalida e il feedback giocano un ruolo importante nel fornire un'ottima UX.

La convalida consente alle persone di sapere se le informazioni che hanno inserito sono corrette (o meno). Nota i segni di spunta verdi nei campi del modulo in basso.

Fonte immagine

Durante la compilazione di moduli mobili, i tuoi visitatori sono tenuti a commettere un errore qua o là. Il modulo dovrebbe contrassegnare questi errori in tempo reale in modo che l'utente possa correggerli immediatamente.

Ad esempio, se qualcuno aggiunge il codice postale errato accanto al proprio indirizzo, il modulo mobile dovrebbe visualizzare un messaggio di errore. Questo dovrebbe indicare - in un linguaggio di facile comprensione - la posizione dell'errore e come la persona può correggerlo (come mostrato nell'immagine qui sotto).

Fonte immagine

È inoltre fondamentale fornire un feedback alle persone durante la compilazione del modulo. Ad esempio, una barra di avanzamento su moduli lunghi e in più passaggi può rendere più coinvolgente il processo di compilazione dei moduli, mostrando agli utenti quanto hanno raggiunto e quanto tempo hanno a disposizione per completarlo.

Fonte immagine

Considera una persona che compila il modulo sopra senza una barra di avanzamento. Faranno clic sul pulsante "Avanti" senza alcuna idea di quando il modulo termina e potrebbero persino abbandonarlo appena prima del passaggio finale per la frustrazione.

Una volta che le persone hanno inviato i loro moduli, dovresti indirizzarli a un'altra schermata o pagina che dice qualcosa del tipo "Successo!" o "Grazie" in modo che sappiano che la loro presentazione ha funzionato.

Ecco un esempio di una pagina di successo su HubSpot che viene visualizzata dopo che un utente si è registrato per ricevere un kit Google Ads gratuito.

Fonte immagine

11. Rendi i moduli accessibili.

L'accessibilità è fondamentale per l'usabilità del tuo modulo. I moduli progettati pensando all'accessibilità possono essere utilizzati da una gamma più ampia di persone, comprese quelle con disabilità visive, fisiche, sensoriali e cognitive.

Ecco alcune raccomandazioni specifiche per la creazione di moduli accessibili dal World Wide Web Consortium Web Accessibility Initiative, WebAIM e The A11Y Project Checklist).

• Controlla che il testo non si pixeli o diventi sfocato quando ingrandisci il modulo (per una migliore visualizzazione).
• Etichetta gli elementi del tuo modulo in modo che possano essere chiaramente compresi se letti da uno screen reader.
• Assicurati che il tuo modulo sia accessibile sia in modalità verticale che orizzontale.
• Evitare l'uso di un limite di tempo (ove possibile) per dare alle persone tempo sufficiente per rispondere.
• Includi didascalie o trascrizioni per qualsiasi componente video o audio nel modulo.
• Tieni a mente il contrasto dei colori. Ecco uno strumento gratuito che può aiutarti in questo.
• Verifica che il tuo modulo sia completamente utilizzabile solo con una tastiera.

Un ottimo modo per garantire che tutte le suddette strategie di progettazione di moduli mobili aderiscano è esplorare ciò che non dovresti fare nella progettazione di moduli. Il video qui sotto mostra alcuni esempi di cosa non fare quando si progettano moduli su dispositivi mobili e desktop.

Indietro da te

Non è un segreto che i visitatori del tuo sito web stiano completando e inviando i tuoi moduli web tramite i loro dispositivi mobili. Questo perché è conveniente ed efficiente, poiché la maggior parte delle persone porta con sé un qualche tipo di dispositivo mobile ovunque, rendendo fondamentale che i tuoi moduli siano ottimizzati per i dispositivi mobili.

In caso contrario, i tuoi moduli saranno difficili da leggere, completare e inviare, il che potrebbe frustrare i tuoi lead o farti perdere del tutto la loro attività.

Considerando la progettazione del tuo modulo mobile e implementando queste linee guida, migliorerai la tua esperienza utente del modulo mobile, creerai relazioni positive con i tuoi lead e clienti e aumenterai le tue conversioni.

Nota del redattore: questo post è stato originariamente pubblicato a dicembre 2018 ed è stato aggiornato per completezza.