5 suggerimenti per la progettazione di moduli ottimizzati per dispositivi mobili

I moduli di contatto sono una componente chiave di molti siti web. Sebbene di solito siano semplici nelle funzionalità, devi comunque assicurarti che siano facili da usare se desideri raccogliere lead e rimanere in contatto con i tuoi utenti. Questo di solito non è un problema con il traffico desktop, ma l'utilizzo dei moduli può diventare complicato se utilizzi un dispositivo mobile.

In questo articolo parleremo un po' dell'importanza di progettare moduli ottimizzati per i dispositivi mobili. Quindi ti guideremo attraverso cinque suggerimenti per assicurarti che i tuoi moduli funzionino perfettamente sui dispositivi mobili.

Andiamo a lavorare!

Perché è importante che i moduli siano ottimizzati per i dispositivi mobili

Le forme sono disponibili in tutte le forme e dimensioni. Più comunemente, avrai a che fare con i moduli di contatto:

Anche i moduli di iscrizione (o opt-in) sono molto popolari poiché consentono di raccogliere e-mail e indirizzarle durante le campagne:

Tuttavia, i moduli possono essere utilizzati per tutti i tipi di altri scopi. Ad esempio, potresti voler raccogliere informazioni utilizzando un sondaggio o un quiz online, nel qual caso avrai bisogno di moduli per consentire agli utenti di inserire le risposte.

Per dirla in altro modo, i moduli sono molto versatili e quasi tutti i siti utilizzano i moduli in un modo o nell'altro. Pertanto, assicurarsi che i moduli siano facili da usare è fondamentale (a meno che tu non voglia fornire un'esperienza frustrante per i tuoi visitatori).

L'utilizzo di moduli da un computer desktop o da un laptop è in genere molto semplice. Hai un mouse e una tastiera completa, quindi selezionare il campo che vuoi usare e inserire i dati non dovrebbe essere un problema. Tuttavia, la navigazione sul Web dallo smartphone o da un altro dispositivo con fattore di forma ridotto comporta complicazioni.

Quando lavori con le dita su un piccolo schermo, l'interazione con i moduli a volte può essere un problema a causa di decisioni di progettazione sbagliate. Questo è qualcosa che devi evitare nei tuoi progetti. Dopotutto, se gli utenti di dispositivi mobili non possono interagire con i tuoi moduli, potresti perdere conversioni, lead o semplicemente infastidire del tutto i visitatori.

È anche essenziale capire che il traffico mobile ora è altrettanto importante, se non di più, delle sorgenti desktop. In effetti, il traffico mobile ha già superato quest'ultimo negli ultimi anni. Ciò significa che la progettazione di un sito Web ottimizzato per i dispositivi mobili dovrebbe essere il tuo obiettivo principale quando lanci un nuovo progetto.

5 suggerimenti per progettare moduli ottimizzati per dispositivi mobili

Fortunatamente, la progettazione di moduli ottimizzati per dispositivi mobili non è così difficile come potresti immaginare. Nella maggior parte dei casi, tutto ciò che serve è tenere a mente alcuni elementi fondamentali e testare accuratamente i moduli prima che vengano pubblicati. Parliamo di come farlo!

1. Rimuovi tutte le sezioni non necessarie

Più campi includono i tuoi moduli, più difficile sarà l'utilizzo sui dispositivi mobili. Questo perché, per quanto ben progettati, l'utilizzo dei moduli sui dispositivi mobili è semplicemente più complicato. Riducendo il numero di campi o sezioni inclusi nei moduli, puoi massimizzare le possibilità che i visitatori li compilino.

Ecco un rapido esempio di un modulo di contatto con alcuni campi aggiuntivi di cui potrebbe fare a meno:

Nella maggior parte dei casi, tutto ciò di cui hai bisogno per un eccellente modulo di contatto è un nome, un'e-mail e il corpo del messaggio che desideri ricevere. Tutto il resto dipende dal tipo di sito web che stai gestendo e se stai cercando di raccogliere lead.

In definitiva, meno campi include il modulo, più facile sarà per i visitatori mobili utilizzarli. Dopotutto, selezionare un campo utilizzando un touch screen può essere difficile, anche se è ben progettato, quindi si vuole ridurre al minimo il numero di "salti" che gli utenti devono fare.

Il tuo obiettivo in questa fase è dare un'occhiata ai moduli esistenti del tuo sito. Esamina ciascuna delle loro sezioni e considera se hai davvero bisogno di campi aggiuntivi oltre a quelli menzionati in precedenza. Se c'è un campo superfluo, taglialo semplicemente.

2. Usa elenchi a discesa quando possibile

La maggior parte di noi si trova a proprio agio a digitare su dispositivi mobili e a utilizzare i touchscreen. Tuttavia, inviare messaggi a un amico e compilare un modulo di contatto sono due esperienze molto diverse. Con quest'ultimo, è probabile che potresti sentirti frustrato se devi digitare molte informazioni.

Uno dei modi in cui puoi semplificare la vita del tuo visitatore mobile è semplificare le scelte che devono fare riguardo agli elementi del tuo sito. Per darti un'idea di cosa stiamo parlando, partiamo dal nostro precedente esempio di prenotazione di un ristorante:

Per effettuare una prenotazione, probabilmente dovrai lasciare un nome, e-mail, telefono e indicare un orario e quante persone parteciperanno. Esistono due modi per creare un campo modulo per convalidare un orario di prenotazione:

1. Imposta un campo che accetta solo input numerici.
2. Progetta un elenco a discesa che includa tutti gli orari disponibili per una prenotazione.

Come puoi immaginare, quest'ultimo è più user-friendly per gli utenti mobili. Con questo approccio, non avranno bisogno di digitare numeri e potranno semplicemente scegliere ciò che funziona meglio per loro tra le opzioni che includi.

L'idea per te di dare un'occhiata ai tuoi moduli e vedere se includono campi che potresti sostituire con menu a discesa. Non sarà sempre così poiché non è possibile utilizzare i menu a discesa per raccogliere nomi o e-mail, ma ci sono altre opzioni in cui potrebbero funzionare.

Indipendentemente dal loro caso d'uso, assicurati che i tuoi menu a discesa includano opzioni facili da selezionare dai dispositivi mobili. In altre parole, rendi il menu abbastanza grande da non dover dare un'occhiata in giro per scegliere l'opzione giusta.

3. Assicurati che i pulsanti di invio siano facili da toccare

Questo suggerimento è piuttosto semplice, ma vale comunque la pena menzionarlo. Ogni modulo progettato dovrà includere un modo per consentire agli utenti di confermare che desiderano inviare i dati che hanno inserito. Nella maggior parte dei casi, ciò significa creare un pulsante di invio:

Quando utilizzi un computer normale, fare clic su un pulsante di invio è la cosa più naturale del mondo. Tuttavia, abbiamo riscontrato alcuni moduli sui dispositivi mobili in cui premere un pulsante è molto più difficile di quanto dovrebbe essere.

Se i tuoi visitatori non possono inviare le informazioni che hanno inserito nei tuoi moduli, tutti i tuoi sforzi saranno inutili. Inoltre, niente sembra poco professionale come un pulsante Invia che non funziona come previsto.

Per progettare pulsanti di invio migliori per dispositivi mobili, ecco tre suggerimenti rapidi da tenere a mente:

1. Assicurati che siano abbastanza grandi da poter essere premuti con facilità quando utilizzi un dispositivo mobile.
2. Non posizionare i pulsanti troppo vicino ad altri elementi, così gli utenti non colpiranno quello sbagliato.
3. Evidenzia i tuoi pulsanti in qualche modo, ad esempio utilizzando colori contrastanti o tipografia creativa.

Oltre a tutto questo, ti consigliamo anche di testare a fondo i tuoi pulsanti prima che il tuo sito web venga pubblicato. Andremo più in profondità su come farlo in un minuto. Per ora parliamo di prestazioni.

4. Assicurati che i tuoi moduli vengano caricati rapidamente

Parliamo molto delle prestazioni del sito Web in molti dei nostri articoli, e non è perché abbiamo bisogno di velocità. Il fatto è che alla maggior parte delle persone non piacciono i siti Web lenti, il che ha assolutamente senso.

Con la velocità di Internet sempre più veloce, aspettare troppo a lungo per il caricamento di un sito Web può essere un lavoro ingrato. Inoltre, le velocità di Internet mobile tendono a variare molto di più rispetto alle normali connessioni domestiche. Ciò significa che il tuo sito Web dovrà essere altamente ottimizzato per i dispositivi mobili se desideri soddisfare gli utenti, poiché non tutti avranno un accesso a Internet adeguato (cioè veloce).

Questo particolare suggerimento può essere applicato all'intero sito Web in generale, ma è importante anche per le pagine mobili che visualizzano i moduli. Se quelle parti del tuo sito impiegano troppo tempo per essere caricate, perderai lead e opportunità di stabilire un contatto con i tuoi visitatori. Come regola generale, un sito web non dovrebbe impiegare più di due secondi per caricarsi. Una volta superata quella linea, le frequenze di rimbalzo tendono ad aumentare drasticamente, il che è una notizia terribile per te.

Data la natura della navigazione su dispositivi mobili, ridurre questo tempo il più possibile è un vantaggio. Con questo in mente, ci sono molti modi per aumentare le prestazioni complessive del tuo sito. Ad esempio, potresti passare a un piano di hosting migliore, utilizzare un tema reattivo ottimizzato per la velocità e comprimere le tue immagini. Naturalmente, questi aiuteranno tutti gli utenti, ma saranno di particolare beneficio per coloro che utilizzano dispositivi più piccoli.

5. Testa i tuoi moduli prima di pubblicarli

Considerando che i moduli sono un elemento chiave per la maggior parte dei siti Web, è logico che dovresti testarli a fondo prima di pubblicarli. Con WordPress, questo processo è abbastanza semplice. Puoi andare avanti e progettare pagine specifiche per visualizzare i tuoi moduli e non pubblicarli finché non li hai completamente testati.

Naturalmente, il plug-in o il tema che desideri utilizzare dipende da te (purché possa aiutare a sviluppare siti per dispositivi mobili). Tuttavia, per quanto riguarda la fase di test, ti consigliamo di mantenere le cose semplici e di utilizzare qualcosa come Chrome Dev Tools per portare a termine il lavoro.

Facciamo un rapido esempio. Se stai utilizzando Chrome, vai avanti e visualizza in anteprima la pagina che include il modulo che desideri testare. Quindi, fai clic con il pulsante destro del mouse in qualsiasi punto della pagina e scegli l'opzione Ispeziona . Chrome ti mostrerà una serie di strumenti che puoi utilizzare per rivedere e modificare il codice sorgente della pagina a destra e a sinistra, puoi vedere un'anteprima di come apparirebbe da un dispositivo mobile:

Nella parte superiore dello schermo, c'è un menu che puoi usare per passare da una risoluzione all'altra. Chrome include impostazioni per diversi dispositivi mobili popolari, ma puoi anche inserire una risoluzione personalizzata.

A questo punto, dovresti controllare come appare e si comporta il tuo modulo di contatto su più dispositivi. Prendi l'esempio qui sotto: il modulo funziona perfettamente, ma puoi vedere che non si ridimensiona come dovrebbe. Presta molta attenzione al testo e alle icone in particolare, che sono troppo vicine al bordo dello schermo:

Un modo per prevenire questo problema è mantenere i moduli semplici, come abbiamo delineato durante il primo suggerimento. Nell'esempio seguente, il modulo utilizza più elenchi a discesa e richiede solo tre campi. Ciò lo rende facile da usare e, cosa più importante, il modulo è così semplice che dovrebbe adattarsi perfettamente a tutti i dispositivi:

Se riscontri problemi con uno qualsiasi dei tuoi moduli, dovresti ovviamente risolverli immediatamente. Altrimenti, rischi di alienare il tuo pubblico mobile, che è ciò che stiamo cercando di evitare in primo luogo!

Conclusione

Garantire che il tuo sito web sia ottimizzato per i dispositivi mobili è fondamentale per mantenere il traffico e non frustrare i tuoi visitatori. In particolare, i tuoi moduli devono essere facili da usare sui dispositivi mobili se non vuoi perdere la ricezione di messaggi o raccogliere lead preziosi.

Quando si tratta di progettare moduli ottimizzati per i dispositivi mobili, ecco cinque suggerimenti rapidi per semplificarti la vita:

1. Rimuovi tutte le sezioni non necessarie.
2. Usa gli elenchi a discesa quando possibile.
3. Assicurati che i pulsanti di invio siano facili da premere.
4. Assicurati che i tuoi moduli si carichino velocemente.
5. Testa i tuoi moduli prima di pubblicarli.

Hai domande su come creare moduli ottimizzati per dispositivi mobili utilizzando Divi? Chiedi via nella sezione commenti qui sotto!

Immagine in miniatura dell'articolo di Irina Adamovich / shutterstock.com.