Come ottimizzare i moduli mobili per più conversioni

Fatto bene, i moduli mobili ottimizzati possono offrire più di un tasso di conversione maggiore: possono diventare un vantaggio competitivo, motivo per cui gli utenti scelgono di compilare un modulo su il tuo posto.

Non è un'iperbole. Considera il numero di interazioni necessarie per prenotare una camera sull'Hotel Tonight rispetto ai suoi concorrenti, come ha sottolineato Luke Wroblewski nel suo intervento sul design del mobile:

Per Hotel Tonight, la soluzione per l'ottimizzazione della forma mobile era "modificare spietatamente". Anche quando hai l'imbuto più sottile, taglia di nuovo. "

Ridurre i campi del modulo generalmente funziona, ma, come ogni "buona pratica", non è una garanzia. (In effetti, potrebbero esserci momenti in cui l'aumento dei campi modulo aumenta i tassi di conversione).

Quello che segue è una struttura specifica per dispositivi mobili per l'ottimizzazione dei moduli:

1. Principali differenze tra l'interfaccia utente mobile e quella desktop
2. Considerazioni a livello di modulo
3. Considerazioni specifiche sul campo
4. Strumenti per misurare le prestazioni del modulo

(Se sei nuovo nell'ottimizzazione dei moduli, inizia da qui. Se vuoi davvero entrare nelle erbacce, considera il corso di Tom New al CXL Institute.)

1. Differenze chiave tra l'interfaccia utente mobile e desktop

Tre importanti differenze nell'interfaccia utente creano sfide per la progettazione di moduli mobili:

1. Proporzioni. Circa l'80-90% dell'uso degli smartphone avviene in orientamento verticale, il che rende la larghezza un bene prezioso: c'è più spazio verticale e lo scorrimento verticale è più intuitivo.

Inoltre, naturalmente, le dimensioni dello schermo sono inferiori rispetto a tablet e desktop, rendendo meno probabile che l'intero modulo si adatti allo schermo senza scorrere.

2. Navigazione touchscreen. Non c'è il mouse e gli utenti di smartphone con uno stilo sono in minoranza. Un touchscreen pone ulteriori requisiti sulla dimensione e sulla spaziatura degli elementi. Significa anche che non esiste uno stato di hover in cui aggiungere informazioni utili.

3. Tastiera limitata. Gli smartphone hanno una tastiera limitata e uno incoerente. Questi fattori giustificano un'attenta considerazione di quale tastiera mostrare per quale campo e se abilitare (o disabilitare) le funzioni automatizzate, come l'auto-capitalizzazione.

Queste differenze di interfaccia utente si aggiungono alle sfide esistenti: gli utenti mobili rappresentano già un segmento di utenti frettoloso e meno tollerante. I tassi di conversione dei dispositivi mobili sono ancora in ritardo rispetto a quelli dei dispositivi desktop, sebbene il divario di conversione continui a chiudersi su segmenti di traffico, come la posta elettronica.

2. Considerazioni su tutto il modulo

Design a colonna singola

In uno studio precedente, lo abbiamo trovato i moduli a colonna singola hanno consentito un completamento più veloce rispetto a quelli a più colonne:

Il divario nel tempo di completamento è quasi certamente maggiore sui dispositivi mobili, che privilegiano lo scorrimento verticale.

Forme multi-step

Le forme a più passaggi hanno il potenziale per eliminare completamente lo scorrimento adattando ogni sezione di modulo all'interno della finestra dello smartphone. Hanno aggiunto benefici per le forme lunghe:

• Le informazioni possono essere salvate dopo ogni passaggio, rendere il follow-up più facile per i form-abbandono ed evitare la potenziale frustrazione dell'utente da una perdita totale di input causata da un clic accidentale o perdita di connettività.
• Fanno parte dei segmenti del modulo ridurre il carico cognitivo. Per le forme lunghe, questo può rendere il processo meno intimidatorio.

Le forme multi-passo hanno un costo, tuttavia: Ogni passaggio richiede un altro caricamento della pagina-E i tempi di caricamento possono essere ritardati se il tuo visitatore non ha una grande connessione (se vive in una fattoria o passa attraverso un tunnel della metropolitana).

Dimensione del font

Una dimensione del font 16px è standard per la copia del corpo su dispositivi mobili. Dimensioni dei caratteri più piccole (o più grandi) possono causare problemi, specialmente per quelli con disabilità visive.

Un rapporto NNGroup sulle taglie, basato sulla ricerca del MIT, offre caveat per gli elementi di testo che richiedono solo una breve "occhiata", ovvero due parole isolate, come "Numero di telefono" o "Indirizzo".

Lo studio del MIT, che ha misurato la velocità di lettura, ha confrontato due dimensioni dei caratteri (10px e 8px) nonché diversi casi e larghezze di lettere. I loro risultati offrono raccomandazioni di base per testi di dimensioni inferiori alla media:

• Non utilizzare una dimensione del font inferiore a 10px.
• Usa tutti i berretti.
• Mantenere la larghezza delle lettere standard.

Tocca il target

I piccoli pulsanti rischiano di essere imprecisi da parte dell'utente o del dispositivo. I touch-target per dispositivi mobili hanno raccomandazioni di dimensioni minime. Per Steven Hoober, la dimensione minima aumenta quando il bersaglio si allontana dal centro dello schermo, dove i tocchi utente sono più precisi:

• 7 mm al centro dello schermo.
• 9 mm lungo i bordi.
• 12 mm negli angoli.

Le linee guida sull'accessibilità del design dei materiali offrono una raccomandazione simile: 7-10 mm per i target tattili. (Converti in altre unità qui.)

In particolare, i pulsanti o le icone visibili potrebbero essere più piccoli dei target tattili, ma la dimensione degli obiettivi tattili dovrebbe coprire l'area minima, anche se l'icona o il pulsante non riempie lo spazio.

Per quanto riguarda l'imbottitura tra i target tattili – di nuovo, non i pulsanti visibili ma i target tattili invisibili che li circondano – le linee guida di Material Design raccomandano un minimo di 1,3 mm.

Campi modulo totali

Come notato in precedenza, la saggezza della forma convenzionale suggerisce che meno campi di forma producono più conversioni perché ogni campo aumenta l'attrito.

Poiché la compilazione di un modulo è meno conveniente su un dispositivo mobile – le tastiere sono più piccole e parziali, il tocco è meno preciso di un clic del mouse – i motivi per cui i campi del modulo di solito funzionano su qualsiasi dispositivo sono, presumibilmente, più veri per gli smartphone. (Quella logica non ti libererà dai test.)

Alcuni campi del modulo di pre-conversione possono essere spostati piuttosto rimosso:

Creazione account. La creazione di account è una fonte comune di attriti che non è necessaria per l'acquisto. Le pagine "Grazie" possono aiutare a risolvere questa sfida:

• Spostamento dei campi modulo da una procedura di checkout a una fase di post-acquisto.
• Chiedendo solo agli acquirenti passati di creare un account che faciliti gli acquisti ripetuti.
• Prepopolare i campi con le informazioni della vendita appena completata.

CAPTCHA. Considera la possibilità di sostituire un CAPTCHA con la conferma via email; la scritta semi-scrutable può essere completamente imperscrutabile sui dispositivi mobili, e una conferma via email può essere ugualmente efficace nell'ignorare le voci dello spam.

Implementazione di moduli

Nel 2017, Google ha iniziato a declassare "pagine in cui il contenuto non è facilmente accessibile a un utente durante la transizione dai risultati di ricerca mobile". Queste pagine bloccavano il loro contenuto "principale" con pop-up o interstitial, che sono spesso moduli di generazione di lead :

Google definisce tre tipi accettabili di interstitial:

1. Quelli che informano gli utenti sull'utilizzo dei cookie.
2. Quelli che richiedono la verifica dell'età.
3. Quelli che usano "una quantità ragionevole di spazio sullo schermo".

Qualsiasi sforzo di ottimizzazione dei moduli che ignori le linee guida di Google rischia di interrompere la fornitura di utenti per riempire tali moduli, indipendentemente dal loro tasso di conversione.

3. Considerazioni specifiche sul campo

Automazione

Le funzionalità automatizzate degli smartphone offrono rischi e vantaggi. I tag HTML attivano e disattivano le funzionalità automatizzate in base al campo di input:

• Correzione automatica. La correzione automatica può erroneamente correggere le informazioni nei campi con nomi propri (ad es. Nome, indirizzo).
• Auto-capitalizzare. L'auto-capitalizzazione fa risparmiare agli utenti sforzi per i campi di nome e indirizzo, ma dovrebbe essere disabilitato per i campi password.
• Completamento automatico o riempimento automatico. Il completamento automatico può essere utile per terminare un indirizzo email conosciuto, ma potrebbe erroneamente tentare di completare un numero d'ordine con un numero di telefono o viceversa. Puoi offrire suggerimenti nel codice (ad esempio autocomplete = "address-line1") per aumentare la precisione della compilazione automatica. (Un codice postale può anche compilare automaticamente la città e lo stato, a condizione che gli utenti mantengano la possibilità di modificare l'errore occasionale.)

-elenchi a discesa

Luke Wroblewski si riferisce ai dropdown come "un'interfaccia utente di ultima istanza"; la ricerca mostra che i moduli mobili con elenchi a discesa richiedono più tempo per essere completati. Questo perché i dropdown per dispositivi mobili:

• Richiedono più interazioni
• Opzioni utente oscure.

Ci sono altre opzioni:

Steppers. Un gruppo di controlli +/- può essere raggruppato o separato dall'etichetta dell'elemento. Gli Stepper funzionano bene per quantità che hanno un limite superiore ragionevole, come prenotazioni di hotel o compagnie aeree. (I visitatori del sito raramente prenotano camere o voli per più di poche persone).

Segmenti. Quando le opzioni sono limitate, un controllo segmentato consente a un utente di visualizzare tutte le scelte disponibili contemporaneamente:

Cursori. I cursori possono essere utilizzati per grandi intervalli o quelli con una variabile Min-Max:

Raccoglitori di date Una selezione calendario, anziché un elenco a discesa di giorni, mesi e anni, può ridurre il numero totale di tocchi. (A meno che tu non stia chiedendo una data di nascita, fare clic indietro decenni in un calendario sarebbe un calvario.)

Lo stesso studio di ricerca che ha rilevato che i dropdown hanno rallentato il completamento del modulo ha anche rilevato che a singolo data picker, nonostante richiedesse meno interazioni totali, ha rallentato anche il completamento della forma. Due selettori di date separati (per le date di inizio e di fine) hanno comportato un completamento più rapido delle attività:

In particolare, lo studio di Luke Wroblewski ha trovato l'effetto opposto: un singolo raccoglitore di date ha funzionato meglio. (Takeaway: non tutti i raccoglitori di date sono creati uguali, gli utenti variano, un singolo studio non è una verità immutabile, l'opzione migliore è quella che vince un test sul tuo sito.)

Per maggiore chiarezza dopo la selezione, considera la visualizzazione del tempo e dei giorni totali della settimana selezionati dall'utente:

Per intervalli di grandi dimensioni inadatti alle alternative sopra menzionate, come lo stato di un utente degli Stati Unitii campi di input predittivi (una forma di completamento automatico) possono ridurre rapidamente un lungo elenco dopo che un utente ha inserito la prima o due lettere.

Maschere di campo

Maschere di campo può aiutare a ridurre gli errori e accelerare il completamento del modulo visualizzando il formato corretto per una risposta che potrebbe avere molti formati, come un numero di telefono o di carta di credito:

Le maschere possono anche ignorare input non validi (ad esempio una barra in un numero di carta di credito) e ridurre la necessità di suddividere i campi per la convalida dei dati (ad esempio, rendendo un numero di telefono tre campi separati). Spostarsi tra i campi, in particolare quelli con piccoli target tattili, è complicato sui dispositivi mobili.

Come sostiene Luke Wroblewski, le maschere dovrebbero anche:

• Essere visibile fin dall'inizio Se la maschera rivela gradualmente, gli utenti continuano a indovinare dall'input all'input se sono sulla strada giusta.
• Non includere il testo segnaposto. Ciò potrebbe far saltare gli utenti su un campo perché appare precompilato. Una descrizione dell'input atteso, come "() -" può impostare aspettative anche se appare chiaramente incomplete. Se si utilizza il testo segnaposto, una risposta evidentemente errata "(XXX) XXX-XXXX" potrebbe causare un minor numero di utenti di ignorarlo.

Il testo segnaposto non sostituisce l'etichetta di un modulo dal momento che scompare quando un utente inizia a digitare, costringendoli a fare affidamento sulla memoria a breve termine per l'identificazione del campo modulo, che diventa più difficile se il campo restituisce successivamente un errore.

Etichette di campo

Lo spazio condensato su un dispositivo mobile rende essenziali etichette di campo di facile lettura. Le proporzioni da sole (ritratto invece di paesaggio) impongono efficacemente etichette sopra anziché accanto ai campi modulo. In caso contrario, quasi tutte le voci richiedono lo scorrimento orizzontale per visualizzare contemporaneamente l'etichetta e il campo di inserimento.

Una soluzione è un'etichetta mobile, implementato tramite CSS o JavaScript. L'etichetta del modulo appare inizialmente all'interno del campo in caratteri più grandi (aumentando la leggibilità risparmiando spazio), quindi migra sopra il campo (in caratteri più piccoli) non appena l'utente lo tocca:

La soluzione preserva lo spazio sullo schermo mantenendo anche un'etichetta di campo persistente.

Tastiere specifiche per campo

Dalla sua uscita nel 2014, HTML5 ha permesso agli sviluppatori di definire il tipo di input (ad esempio "email", "tel", "datetime", ecc.) Per restituisce una tastiera mobile appropriata quando un utente tocca il campo.

I tipi di tastiera offrono ovvietà (un tastierino numerico per i numeri di telefono) e sottili (l'inclusione del simbolo "@" per gli indirizzi di posta elettronica).

Convalida in linea

Sulla maggior parte dei moduli mobili, gli utenti non possono vedere l'intero modulo; lo scorrimento verticale è necessario per vedere tutti i campi. Ciò rende la convalida in linea in tempo reale, una best practice per i moduli su qualsiasi dispositivo, più importante.

Se gli utenti devono scorrere fino alla parte superiore del modulo per visualizzare gli errori, quindi scorrere di nuovo verso il basso nel campo specifico, potrebbero andare persi o frustrati e rinunciare.

Altre ottimizzazioni

Forma autofocus. La messa a fuoco automatica, un altro attributo HTML5, evidenzia il campo di input corrente, rendendo più facile per gli utenti vedere in quale campo stanno lavorando.

Dimensionamento del campo suggestivo. Il ridimensionamento dei campi relativo alla lunghezza dell'input previsto (ad esempio un campo più lungo per un indirizzo stradale rispetto a un codice postale) offre un sottile promemoria agli utenti sulle aspettative di input.

Disabilitare il pulsante di invio. Dopo che un utente tocca per inviare un modulo o completare un acquisto, i pulsanti di disattivazione impediscono un clic involontario che può causare la reinoltrazione o la navigazione dell'utente fuori sito prima che la conversione venga completata.

4. Strumenti per misurare le prestazioni del modulo

La misurazione granulare aiuta a identificare i punti problematici all'interno delle forme:

• Quali parti del modulo impiegano più tempo a completare gli utenti?
• A che punto gli utenti abbandonano più spesso il modulo?

Questi punti problematici, a loro volta, consentono test più intelligenti. Google Tag Manager (GTM) è in grado di tenere traccia di molti aspetti dell'invio di moduli tramite sei variabili modulo incorporate:

1. Classi di form: gtm.elementClasses
2. Elemento modulo: gtm.element
3. ID modulo: gtm.elementId
4. Target modulo: gtm.elementTarget
5. Testo del modulo: gtm.elementText

Simo Ahava ha pubblicato diverse guide su come tenere traccia degli invii di moduli tramite GTM, tra cui:

Durante una recente (statisticamente insignificante) discussione sul form analytics nel nostro gruppo Facebook, Formisimo è stata l'opzione preferenziale a pagamento, con un entry point di circa $ 500 al mese. Formisimo ha anche una controparte aziendale più costosa, Zuko.

Ulteriori strumenti che tracciano un insieme più limitato di analisi dei moduli includono, tra gli altri, Clicktale e Hotjar.

Conclusione

I moduli mobili limitano le interazioni dell'utente: non ci sono mouse, una parola chiave incompleta e uno schermo verticale più piccolo. Queste limitazioni rendono l'esperienza utente intuitiva ed efficiente più importante e, a volte, più impegnativa da offrire.

Ma fanno anche alcune scelte più facili; non tutte le forme di "ottimizzazione" devono essere testate. Fornire la tastiera appropriata per il campo appropriato è una vittoria chiara. Quindi, anche un obiettivo touch di dimensioni ragionevoli o l'uso di una maschera di campo per rifiutare input non validi. Quei miglioramenti UX sono un'opportunità immediata per tutti i siti, non solo quelli ad alto traffico.

Come tutti gli sforzi online, l'ottimizzazione della forma non è una disciplina statica. Funzioni più recenti come Touch ID, riconoscimento facciale o scansioni di foto di carte di credito promettono interazioni ottimizzate in un momento critico che, ogni anno, si verifica più frequentemente sui dispositivi mobili.