Vai al contenuto principale

Suggerimenti 5 per la progettazione di moduli mobili

Divi: il tema WordPress più semplice da usare

Divi: il miglior tema WordPress di tutti i tempi!

più Download di 901.000, Divi è il tema WordPress più popolare al mondo. È completo, facile da usare e viene fornito con oltre i modelli gratuiti 62. [Consigliato]

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:

esempio di contact form.png

Anche i moduli di registrazione (iscrizione) sono molto popolari perché consentono di raccogliere e-mail e indirizzarli durante le campagne:

email di destinazione durante campaigns.png

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 un modulo di contatto con alcuni campi aggiuntivi che non sono necessari sui dispositivi mobili:

Crea facilmente il tuo sito Web con Elementor

Elementor ti consente di creare facilmente qualsiasi design di sito Web con un aspetto professionale. Smetti di pagare caro per quello che puoi fare da solo. [Free]

campi non necessari su mobile.png

Nella maggior parte dei casi, tutto ciò di cui hai bisogno per un ottimo 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 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 sui dispositivi mobili e nell'uso dei touchscreen. Tuttavia, inviare messaggi di testo a un amico e compilare un 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 rendere la vita più facile 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 di un ristorante:

make a reservation.png

Per effettuare una prenotazione, probabilmente dovrai lasciare un nome, un'e-mail, un telefono  et  indicare un orario, nonché il numero di persone presenti. Puoi creare un campo modulo in due modi per convalidare un orario di prenotazione:

  1. Configurare un campo che accetta solo voci numeriche.
  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 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:

creare un pulsante button.png

Stai cercando i migliori temi e plugin per WordPress?

Scarica i migliori plugin e temi WordPress su Envato e crea facilmente il tuo sito web. Già più di 49.720.000 download. [ESCLUSIVO]

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 inviare  che non funziona come previsto.

Per progettare pulsanti di invio migliori per dispositivi mobili, ecco tre suggerimenti da considerare:

  1. Assicurati che siano abbastanza grandi da poterli toccare facilmente su un dispositivo mobile.
  2. Non posizionare i pulsanti troppo vicino ad altri elementi in modo che gli utenti non li tocchino correttamente.
  3. 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. .

Con questo in mente, ci sono molti modi per migliorare le prestazioni complessive del tuo sito. Ad esempio, puoi eseguire l'aggiornamento a un piano di hosting migliore, utilizzare 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:

Una panoramica degli strumenti di sviluppo di Chrome.

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:

form design per mobile.png

Crea facilmente il tuo negozio online

Scarica gratuitamente WooCommerce, i migliori plug-in di e-commerce per vendere i tuoi prodotti fisici e digitali su WordPress. [Consigliato]

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:

Un esempio di un modulo senza problemi di ridimensionamento.

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:

  1. Elimina tutte le sezioni non necessarie.
  2. Utilizzare gli elenchi a discesa, se possibile.
  3. Assicurati che i pulsanti di invio siano facili da premere.
  4. Assicurati che i moduli vengano caricati rapidamente.
  5. Metti alla prova i tuoi moduli prima di pubblicarli.

Questo articolo contiene i commenti 0

Lascia un commento

L'indirizzo email non verrà pubblicato. I campi obbligatori sono contrassegnati *

Questo sito utilizza Akismet per ridurre indesiderati. Ulteriori informazioni su come vengono utilizzati i dati dei commenti.

Torna in alto
2 azioni
quota1
Tweet
Enregistrer1