Design del modulo Mobile vs. Desktop
Oggi, i visitatori del tuo sito Web non si limitano a navigare nel tuo sito, a visualizzare i tuoi contenuti e a compilare i moduli dai loro computer desktop, ma stanno anche completando queste attività dai loro dispositivi mobili. Ciò significa che è assolutamente fondamentale che il tuo modulo sia rivisto, compilato e inviato tramite un dispositivo mobile.
Perché il design del modulo mobile è importante?
Il grande design del modulo mobile consente un'esperienza utente positiva che assicura un visitatore felice del sito web che è più propenso a convertirsi in un cliente e diventare un utente di ritorno.
Il design, il layout e la funzionalità dei moduli mobili svolgono un ruolo importante nell'esperienza utente complessiva del tuo sito web a causa del numero di persone che sfogliano gli oggetti, fanno acquisti e fanno acquisti tramite i loro dispositivi mobili ogni giorno. Se i moduli non sono ottimizzati per i dispositivi mobili, è possibile che si verifichino meno conversioni, una perdita nel traffico dei siti mobili e un aumento di clienti infelici e frustrati. E chi lo vuole?
Perché il design del modulo mobile dovrebbe differire dal design del desktop?
Pensa alla differenza tra il display o le dimensioni dello schermo tra un dispositivo mobile, come un Apple iPhone, che in genere varia da 4,7 "a 6,1" di dimensioni, e un computer desktop iMac, che in genere ha dimensioni da 21 "a 27" . Chiaramente, è sicuro assumere che un modulo che si adatta a uno schermo di iPhone non si adatti perfettamente allo schermo di un desktop.
Se i visitatori dei tuoi dispositivi mobili non sono in grado di leggere, completare e inviare il modulo in modo semplice, potresti perdere la loro attività. Pertanto, la creazione di un modulo ottimizzato per i dispositivi mobili che si adatti allo schermo di qualsiasi dispositivo mobile è fondamentale per creare un'esperienza utente ottimale, al fine di lasciare un'impressione duratura ai visitatori e aiutarti a incrementare le conversioni.
Cos'è il responsive web design?
Se vuoi portare il design dei dispositivi mobili un ulteriore passo avanti e assicurati il tuo intero il sito web è funzionale su tutti i tipi di dispositivi, è possibile implementare un design reattivo del sito Web.
Il web design reattivo tiene conto delle dimensioni dello schermo, della piattaforma, dell'orientamento e dell'ambiente dell'utente. Questo è un modo semplice ed efficace per creare un'esperienza utente fantastica dal momento che così tante persone lo sono costantemente visitando e navigando su siti Web diversi su una varietà di dispositivi.
Esistono diversi modi per assicurarti che il tuo sito abbia un design reattivo. Ad esempio, se sei un utente di WordPress, ci sono diversi temi di WordPress reattivi che puoi installare e utilizzare per progettare il tuo sito. Inoltre, se stai costruendo o hai creato il tuo sito con software come Squarespace, il tuo sito potrebbe venire automaticamente con un design web reattivo.
Oggi, il responsive web design è una scelta popolare per le aziende a causa del numero di persone che visitano siti Web tramite una varietà di dispositivi mobili diversi. Ma per ora, torniamo a discutere sulla progettazione di moduli mobili.
Design del modulo mobile: 10 linee guida UX
Quando crei un modulo ottimizzato per i dispositivi mobili, devi seguire alcuni passaggi per fornire la migliore esperienza utente possibile per i tuoi visitatori. Esaminiamo 10 di queste linee guida UX che è possibile iniziare a implementare nelle proprie forme oggi.
1. Ridurre a icona il numero di campi modulo
Mai sentito il detto, "less is more"? Bene, questo è esattamente quello che dovresti pensare mentre crei il tuo modulo mobile.
Tra la dimensione dello schermo di un dispositivo mobile, la quantità di contenuti che devi inserire nel modulo e il numero di campi modulo (i campi modulo sono le caselle in cui i visitatori aggiungono le loro risposte), è facile accidentalmente far sentire il tuo modulo ingombra. Ricordarsi di rimuovere tutti i lanuginosi inutili e di conservare solo i campi del modulo per ottenere informazioni assolutamente necessarie bisogno.
Oltre a limitare il numero di campi modulo solo al necessario, assicurati anche che i campi del modulo siano etichettati chiaramente con il minor numero possibile di parole. È inoltre necessario contrassegnare i campi modulo facoltativi come "facoltativi" o includere un asterisco accanto ai campi modulo richiesti per semplificare il processo.
fonte
2. Automatizza le azioni quando possibile
Se accidentalmente inserisci il tuo indirizzo errato e il modulo corregge l'ortografia per te, il modulo autocorrects la tua risposta.
Se inizi a digitare il tuo indirizzo di spedizione e una casella si apre con il resto del tuo indirizzo che ti chiede se vuoi "compilare automaticamente" il resto dei campi del modulo con il tuo indirizzo salvato, allora il tuo modulo è autocompleting la tua risposta per te.
fonte
Implementando funzionalità di autocompilazione e riempimento automatico sui moduli mobili, migliorerai l'esperienza utente attraverso un processo rapido, efficiente e diretto.
3. Utilizzare un layout a colonna singola
Quando stai completando un lungo o modulo multi-step, elenca tutti i tuoi contenuti in un layout a colonna singola.
fonte
Questo è vero per i moduli sia sul desktop che sui dispositivi mobili per alcuni motivi: 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 articolo alla volta, semplificando la lettura del modulo.
b. Meno scoraggiante
Se guardi un modulo, specialmente in uno spazio ristretto come faresti su un dispositivo mobile, e vedi una grande quantità di contenuti messi insieme, potresti sentirti sopraffatto. Ecco perché separare il contenuto per righe e posizionare i campi del modulo in un formato a colonna singola rende i tuoi contenuti più scoraggianti.
c. Più veloce da completare
Quando si posiziona il modulo a più fasi in una singola colonna, i lead sono in grado di completarlo più rapidamente rispetto a un modulo a più colonne. Questo perché il formato rende il modulo più facile da leggere e funziona passo dopo passo.
4. Utilizzare i vincoli di input per i campi modulo
Se il tuo modulo mobile include risposte brevi o lunghe, devi abilitare i vincoli di input. I vincoli di input pongono un limite al numero di parole o caratteri che una persona può digitare nel campo del modulo.
Scrivere lunghe risposte su un dispositivo mobile non è sempre facile a causa delle dimensioni della tastiera e dello schermo. E se un visitatore non è sicuro della quantità di dettagli richiesta per una risposta, potrebbe esagerare nella spiegazione, il che potrebbe rivelarsi un processo che richiede molto tempo a te e al tuo visitatore.
Un vincolo di input di solito dice qualcosa come "Hai superato il massimo di ___ caratteri".
Esistono altri tipi di vincoli di input che limitano le opzioni di input, come le date sui moduli. Ad esempio, se qualcuno stava cercando di effettuare una prenotazione per un tavolo al tuo ristorante e ha selezionato per errore una data nel passato, il vincolo avrebbe impedito loro di essere in grado di selezionare e confermare quella data. Impostando i vincoli di input, risparmierai i tempi di consegna mentre completi i campi del modulo, e ti impedirai anche di dover rivedere una risposta prolissa o non valida.
5. Creare pulsanti di azione Cancella
Dopo aver dedicato del tempo per completare un modulo mobile, è probabile che un lead voglia assicurarsi che il proprio modulo sia inviato correttamente per garantire che tu e il tuo team siate in grado di ricevere e rivedere le loro informazioni.
Usando pulsanti grandi, in grassetto e visibili etichettati con azioni chiare su di essi, come "Invia", "Avanti" o "Completato", il tuo lead si sentirà sicuro della loro sottomissione. Questi pulsanti di azione consentono di semplificare il completamento del modulo e i processi di invio per i lead, al fine di evitare inutili confusioni o preoccupazioni.
fonte
6. Fornire scanner per i pagamenti
Hai mai provato a inserire i dettagli della tua carta di credito in un modulo tramite il tuo smartphone? Digitare un mucchio di numeri su uno schermo così piccolo con una piccola tastiera può essere un processo noioso.
Le app di scansione delle carte, come BlinkID e card.io, sono diventate sempre più popolari per questo motivo esatto. Quando si effettua un acquisto, i visitatori possono fare clic su un pulsante che li porta a una schermata in cui possono utilizzare la fotocamera del dispositivo mobile per scattare una foto sicura della parte anteriore e posteriore della loro carta, indipendentemente dalla loro licenza o carta di credito.
fonte
Con solo un paio di immagini, i tuoi lead saranno terminati con una delle parti più lunghe del processo di completamento del modulo mobile. Queste app di scansione delle carte mantengono i visitatori efficienti, frustrati e privi di errori.
7. Spiegare la necessità di informazioni specifiche
Durante il completamento di una semplice iscrizione via email 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 fenomeno comune in tutti i tipi di moduli (non solo mobili). Chiedere a qualcuno di fornire informazioni personali o di altro tipo senza spiegarne la necessità può essere un po 'approssimativo.
Se stai facendo una domanda che non si riferisce direttamente al motivo per cui il tuo visitatore sta compilando il modulo (se il campo è obbligatorio o facoltativo), allora dovresti creare un qualche tipo di casella di riepilogo o notifica che possono fare clic su leggere una breve descrizione del motivo per cui chiedi queste informazioni. In questo modo, la tua forma si sentirà professionale e premurosa.
8. Fornire lo stato di successo o completamento
Indipendentemente dal tipo di modulo mobile che hai sul tuo sito web, dovresti fornire ai tuoi visitatori e lead il loro stato attuale di avanzamento, successo o completamento mentre li lavorano.
Se si dispone di un modulo lungo, a più fasi, è necessario includere una barra di avanzamento nella parte superiore del modulo in modo che i visitatori siano consapevoli di quanto tempo ancora lavoreranno attraverso il modulo.
fonte
Inoltre, una volta che i tuoi lead hanno inviato i loro moduli, dovresti indirizzarli verso un'altra schermata o pagina che dice qualcosa come "Success!" O "Grazie per aver inviato il modulo!" In modo che sappiano che la loro presentazione ha funzionato.
fonte
9. Includi messaggi di errore
Durante il completamento dei moduli mobili, i tuoi visitatori sono tenuti a fare un errore qui o là. I tuoi moduli mobili dovrebbero segnalare questi errori in tempo reale in modo che i tuoi lead possano rimanere efficienti e precisi.
Ad esempio, se qualcuno aggiunge il codice postale errato accanto al loro indirizzo, assicurati che il modulo mobile contrassegni tale errore in modo che non vi siano perdite di tempo e che la tua attività sia sicura di ricevere informazioni accurate.
fonte
Nel tuo messaggio, dai al tuo capo le informazioni applicabili e di facile comprensione che mostrano chiaramente la posizione esatta dell'errore Come possono aggiustarlo
10. Considera l'aspetto della forma
L'aspetto e le prime impressioni nel mondo degli affari contano sempre. Questo vale anche per i moduli mobili, perché nessuno vuole completare una forma scura, difficile da leggere, ingombra e poco attraente.
fonte
Vuoi che il tuo modulo mobile sia altamente funzionale oltre che esteticamente gradevole. Puoi creare una forma dall'aspetto professionale branding con il tuo logo e i tuoi colori. L'aspetto del tuo modulo mobile dovrebbe contribuire alla sua leggibilità e all'esperienza utente positiva.
Per ottenere questo aspetto, utilizzare:
- Tipografia semplice e di facile lettura
- Campi di forma minima
- Pulsanti di azione luminosi e audaci
- Layout a colonna singola
- Una tavolozza di colori che non sembra travolgente
Indietro da te
Non è un segreto che, oggi, i visitatori del tuo sito web stanno completando e inviando i tuoi moduli web tramite i loro dispositivi mobili. Questo perché è comodo ed efficiente, in quanto la maggior parte delle persone porta con sé un certo tipo di dispositivo mobile, rendendo cruciale la mobilità dei moduli. In caso contrario, le tue forme saranno difficili da leggere, completare e inviare, il che potrebbe frustrare i tuoi contatti o far perdere completamente la tua attività. Considerando la progettazione del modulo mobile e l'implementazione di queste linee guida, migliorerai la tua esperienza utente in formato mobile, creerai rapporti positivi con lead e clienti e aumenterai le tue conversioni.
Originariamente pubblicato il 21 dicembre 201 alle 16:00, aggiornato il 21 dicembre 2018