I moduli di contatto sono una componente chiave di molti siti web. Sebbene siano generalmente semplici, devi assicurarti che siano facili da usare se desideri raccogliere lead e rimanere in contatto con i tuoi utenti. Di solito questo non è un problema con il traffico dell'ufficio, ma l'utilizzo dei moduli può essere difficile se si utilizza un dispositivo mobile.
In questo tutorial, parleremo un po 'dell'importanza di progettare moduli ottimizzati per i dispositivi mobili. Successivamente, ti guideremo attraverso cinque suggerimenti per assicurarti che i tuoi moduli funzionino senza problemi sui dispositivi mobili.
Andiamo al lavoro!
Perché è importante che i tuoi moduli siano ottimizzati per i dispositivi mobili
I moduli sono disponibili in tutte le forme e dimensioni. Molto spesso, avrai a che fare con moduli di contatto:
Anche i moduli di registrazione (iscrizione) sono molto popolari perché consentono di raccogliere e-mail e indirizzarli durante le campagne:
Tuttavia, i moduli possono essere utilizzati per tutti i tipi di altri scopi. Ad esempio, puoi raccogliere informazioni utilizzando un sondaggio online o un questionario , nel qual caso avrai bisogno di moduli che consentano agli utenti di inserire risposte.
In altre parole, i moduli sono molto versatili e quasi tutti i siti utilizzano i moduli in un modo o nell'altro. Pertanto, è essenziale che i tuoi moduli siano facili da usare (a meno che tu non voglia fornire un'esperienza frustrante per i tuoi visitatori).
L'utilizzo di moduli da un computer desktop o laptop è generalmente molto semplice. Hai un mouse e una tastiera completi, quindi selezionare il campo che desideri utilizzare e inserire i dati non dovrebbe essere un problema. Tuttavia, la navigazione sul Web dallo smartphone o da un altro dispositivo compatto presenta delle complicazioni.
Quando si lavora con le dita su uno schermo piccolo, l'interazione con i moduli a volte può essere opprimente a causa di decisioni di progettazione sbagliate. Questo è qualcosa che dovresti evitare nei tuoi progetti. Dopo tutto, se gli utenti di dispositivi mobili non possono interagire con i tuoi moduli, potresti perdere conversioni, lead o semplicemente infastidire i visitatori.
È anche fondamentale capire che il traffico mobile è ora, se non di più, importante rispetto alle 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 inizi un nuovo progetto.
Suggerimenti 5 per la progettazione di moduli mobili di facile utilizzo
Fortunatamente, progettare moduli ottimizzati per dispositivi mobili non è così difficile come potresti immaginare. Nella maggior parte dei casi, devi solo tenere a mente alcuni fondamentali e testare accuratamente i tuoi moduli prima di metterli in uso. Parliamo di come farlo!
1. Elimina tutte le sezioni non necessarie
Più campi contiene il tuo modulo, più difficile sarà da usare sui dispositivi mobili. In effetti, l'uso 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 a modulo di contatto con alcuni campi aggiuntivi che non sono necessari sul cellulare:
Nella maggior parte dei casi, tutto ciò di cui hai bisogno per un grande modulo di contatto è un nome, un'email e il corpo del messaggio che vuoi ricevere. Tutto il resto dipende dal tipo di sito web che stai utilizzando e se stai cercando di raccogliere lead.
In definitiva, meno campi ha il modulo, più facile sarà per i visitatori mobili utilizzarli. Dopotutto, selezionare un campo utilizzando un touchscreen può essere complicato, non importa quanto ben progettato, in modo da ridurre al minimo il numero di salti che gli utenti devono effettuare.
Il tuo obiettivo a questo punto è rivedere i moduli esistenti sul tuo sito. Passa in rassegna ciascuna delle loro sezioni e determina se hai davvero bisogno di campi aggiuntivi diversi da quelli menzionati in precedenza. Se c'è un campo superfluo, cancellalo.
2. Utilizzare gli elenchi a discesa, se possibile
La maggior parte di noi si sente a proprio agio nella digitazione su dispositivi mobili e nell'utilizzo dei touchscreen. Tuttavia, mandare un messaggio a un amico e compilare un file modulo di contatto sono due esperienze molto diverse. Con questi, ci sono buone probabilità che ti sentirai frustrato se devi digitare molte informazioni.
Un modo per semplificare la vita al tuo visitatore mobile è semplificare le scelte che devono fare sugli elementi del tuo sito. Per darvi un'idea di cosa stiamo parlando, approfittiamo del nostro precedente esempio di prenotazione ristorante:
Fare un prenotazione, probabilmente dovrai lasciare un nome, un'e-mail, un telefono et indicare un orario, nonché il numero delle persone presenti. Esistono due modi per creare un campo modulo per convalidare un'ora del giorno. prenotazione:
- Configurare un campo che accetta solo voci numeriche.
- 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 hanno bisogno di inserire numeri e possono semplicemente scegliere ciò che funziona meglio per loro dalle opzioni che includi.
L'idea per te di guardare i tuoi moduli e vedere se includono campi che potresti sostituire con menu a discesa. Questo non sarà sempre il caso poiché non è possibile utilizzare i menu a discesa per raccogliere nomi o e-mail, ma è possibile utilizzare altre opzioni.
Qualunque sia il 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 beccare qualcuno per scegliere l'opzione giusta.
3. Assicurati che i pulsanti di invio siano facili da toccare
Questo suggerimento è abbastanza semplice, ma deve ancora essere menzionato. Ogni modulo che progetti dovrebbe includere un modo per consentire agli utenti di confermare che desiderano inviare i dati inseriti. Nella maggior parte dei casi, ciò significa creare un pulsante di invio:
Quando si utilizza un normale computer, fare clic su un pulsante di invio è la cosa più naturale al mondo. Tuttavia, ci siamo imbattuti in alcuni moduli sui dispositivi mobili in cui è molto più difficile premere un pulsante.
Se i tuoi visitatori non possono inviare le informazioni che hanno inserito nei tuoi moduli, tutti i tuoi sforzi saranno sprecati. Inoltre, niente sembra così poco professionale come un pulsante invia che non funziona come previsto.
Per progettare pulsanti di invio migliori per dispositivi mobili, ecco tre suggerimenti da considerare:
- Assicurati che siano abbastanza grandi da poterli toccare facilmente su un dispositivo mobile.
- Non posizionare i pulsanti troppo vicino ad altri elementi in modo che gli utenti non li tocchino correttamente.
- Evidenzia i tuoi pulsanti, ad esempio utilizzando colori contrastanti o una tipografia creativa.
Oltre a tutto ciò, ti consigliamo anche di testare i tuoi pulsanti prima che il tuo sito venga pubblicato. Andremo più in profondità su come farlo tra un minuto. Per ora parliamo di prestazioni.
4. Assicurati che i moduli vengano caricati rapidamente
Parliamo molto delle prestazioni del sito Web in molti dei nostri articoli e non è perché abbiamo bisogno di velocità. Il punto è che alla maggior parte delle persone non piacciono i siti Web lenti, il che ha perfettamente senso.
Con la velocità di Internet più veloce, può essere difficile aspettare che un sito web si carichi troppo a lungo. 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 vuoi mantenere felici questi utenti, poiché non tutti avranno accesso a Internet (cioè veloce).
Questo particolare suggerimento può essere applicato all'intero sito Web, ma è anche importante per le pagine mobili che visualizzano i moduli. Se queste parti del tuo sito impiegano troppo tempo a caricarsi, Vous perdere le conversioni e opportunità di connettersi con i tuoi visitatori.
In genere, il caricamento di un sito Web non dovrebbe richiedere più di due secondi. Una volta superato questo limite, la frequenza di rimbalzo tende ad aumentare notevolmente, il che è una notizia terribile per te e, data la natura della navigazione mobile, è meglio mantenere questo tempo il più basso possibile. .
Tenendo presente questo, ci sono molti modi per migliorare le prestazioni generali del tuo sito. Ad esempio, puoi passare a un piano miglioresistemazione, utilizza un tema reattivo ottimizzato per la velocità e comprimi le tue immagini. Naturalmente, questi aiuteranno tutti gli utenti, ma saranno particolarmente utili per coloro che utilizzano dispositivi più piccoli.
5. Metti alla prova i tuoi moduli prima di pubblicarli
Considerando che i moduli sono una parte fondamentale della maggior parte dei siti Web, è opportuno testarli accuratamente prima di pubblicarli. Con WordPress, questo processo è piuttosto semplice. Puoi andare avanti e progettare pagine specifiche per visualizzare i tuoi moduli e non pubblicarli finché non li hai testati completamente.
Ovviamente, dipende da te il plugin o il tema che desideri utilizzare (purché possa aiutarti a sviluppare siti per dispositivi mobili). Tuttavia, quando si tratta della fase di test, ti consigliamo di mantenerla semplice e di utilizzare strumenti come outils di sviluppo Chrome fare il lavoro
Facciamo un rapido esempio. Se stai utilizzando Chrome, vai avanti e visualizza l'anteprima della pagina con il modulo che desideri testare. Quindi fai clic con il pulsante destro del mouse in un punto qualsiasi di questa pagina e scegli l'opzione ispezionare . Chrome mostrerà una serie di strumenti che puoi utilizzare per rivedere e modificare il codice sorgente della pagina a destra ea sinistra, puoi vedere un'anteprima del suo aspetto da un dispositivo mobile:
Nella parte superiore dello schermo è possibile utilizzare un menu 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 l'aspetto e il comportamento del tuo modulo di contatto su più dispositivi. Prendiamo l'esempio qui sotto: il modulo funziona bene, ma puoi vedere che non si adatta come dovrebbe. Prestare particolare attenzione al testo e alle icone in particolare, che sono troppo vicini al bordo dello schermo:
Un modo per prevenire questo problema è mantenere semplici i moduli, come abbiamo accennato nel primo suggerimento. Nell'esempio seguente, il modulo utilizza più elenchi a discesa e richiede solo tre campi. Questo lo rende facile da usare e, cosa più importante, il modulo è così semplice che deve essere perfetto per tutti i dispositivi:
In caso di problemi con uno qualsiasi dei moduli, è ovviamente necessario risolverli immediatamente. Altrimenti, rischi di alienare il tuo pubblico mobile, cosa che cerchiamo di evitare prima!
Conclusione
Assicurarsi che il tuo sito web sia compatibile con i dispositivi mobili è la chiave per mantenere il traffico e non frustrare i tuoi visitatori. In particolare, i tuoi moduli dovrebbero essere facili da usare sui dispositivi mobili se non vuoi perderti la ricezione di messaggi o la raccolta di contatti preziosi.
Quando si tratta di progettare moduli ottimizzati per i dispositivi mobili, ecco cinque suggerimenti per semplificare la tua vita:
- Elimina tutte le sezioni non necessarie.
- Utilizzare gli elenchi a discesa, se possibile.
- Assicurati che i pulsanti di invio siano facili da premere.
- Assicurati che i moduli vengano caricati rapidamente.
- Metti alla prova i tuoi moduli prima di pubblicarli.
