Due invii di moduli su tre ormai avvengono da un telefono. Eppure la maggior parte dei siti progetta i moduli su desktop e poi li stringe su uno schermo mobile. Il risultato: moduli frustranti da compilare, abbandonati più spesso, che trasformano meno visitatori in clienti.
Il design dei moduli per mobile non significa rimpicciolire i moduli desktop. Significa ripensare l'intera esperienza per una persona che tiene in mano uno schermo da 6 pollici, usa il pollice, su un autobus traballante o in un bar affollato. Cambia tutto. Lo spazio disponibile si riduce. Le aree da toccare diventano più grandi. La tastiera compare e nasconde metà del modulo. Il visitatore viene interrotto e se ne va.
Il design dei moduli mobile-first significa ottimizzare ogni dettaglio di un modulo per il modo in cui le persone usano davvero i telefoni. Questo capitolo spiega le modifiche concrete che riducono gli abbandoni, velocizzano il completamento e trasformano più visitatori mobile in contatti o clienti.
I moduli mobile progettati per il desktop fanno perdere clienti
Guarda cosa succede quando qualcuno apre un modulo sul telefono rispetto al desktop. Chi usa il telefono ha meno spazio sullo schermo, meno pazienza e più distrazioni. Sta destreggiandosi tra più cose. La sua attenzione è frammentata. Basta un'interazione scomoda e se ne va.
I dati lo confermano. I moduli con un cattivo design mobile vedono tassi di abbandono che salgono di 20-40 punti percentuali rispetto al desktop. Un solo campo messo male può innescare un'ondata di abbandoni. Un pulsante piccolo e difficile da toccare crea un attrito che si moltiplica su migliaia di invii.
Ma ecco cosa sfugge a molti brand: ottimizzare per il mobile non rallenta chi usa il desktop. Un modulo progettato prima per il mobile e poi migliorato per gli schermi più grandi funziona meglio per tutti. Layout più compatti. Spaziatura migliore. Gerarchia più chiara. Non sono compromessi per il mobile, sono miglioramenti di design.
La sfida del design dei moduli mobile: cosa cambia davvero
I moduli mobile hanno limiti che i moduli desktop non hanno. Capire cosa cambia ti aiuta a progettare meglio:
Lo spazio sullo schermo è limitato
Lo schermo di un telefono mostra circa il 30-40% dei contenuti che un monitor desktop può mostrare in una volta. Ogni elemento occupa spazio fisico. Etichette extra, istruzioni, suggerimenti e campi del modulo competono tutti per lo stesso minuscolo spazio. Compare la tastiera e lo spazio disponibile si riduce ancora. I lunghi paragrafi di istruzioni escono dallo schermo.
Le aree da toccare sono più grandi e meno precise
Un dito è largo 40-50 pixel. Il cursore di un mouse è 1 pixel. Quindi pulsanti, caselle di controllo, pulsanti di scelta e link devono essere molto più grandi su mobile per essere toccati facilmente. Le dimensioni standard consigliate da Google e dagli altri produttori di sistemi mobili sono almeno 44x44 pixel. Se sono troppo piccoli, gli utenti sbagliano bersaglio, si frustrano e abbandonano il modulo.
Le tastiere prendono il controllo
Su mobile, quando un utente tocca un campo, la tastiera sale e copre metà schermo. Alcuni campi attivano tastiere diverse: i campi email mostrano il simbolo @, i campi numerici nascondono le lettere, i campi data aprono selettori con il calendario. Ogni tipo di tastiera cambia ciò che l'utente vede e come interagisce. Progetta per ognuna separatamente.
Il contesto cambia di continuo
Chi usa il desktop si siede e compila un modulo senza interruzioni. Chi usa il mobile compila i moduli in treno, nei negozi, tra un'app e l'altra. Riceve una notifica, cambia app, torna cinque minuti dopo. Lo scorrimento sembra infinito. I campi del modulo si confondono tra loro. Qualsiasi passaggio che richieda memoria o cambio di contesto fa abbandonare le persone.
Il dispositivo si usa con una mano sola
La maggior parte di chi usa il telefono lo tiene con una mano e naviga con il pollice. I pulsanti in basso a destra sono raggiungibili. I pulsanti in cima a un modulo lungo richiedono la seconda mano o uno sforzo scomodo. Le etichette sul lato sinistro dei campi sono più difficili da leggere mantenendo la posizione del pollice. Progetta per l'uso con una sola mano.
Regola 1: riduci il numero di campi che chiedi
Ogni campo che chiedi è un altro tocco, un'altra decisione, un'altra occasione per andarsene. Il modulo non ha bisogno di tutto. Gli serve solo ciò che usi davvero per ricontattare.
Guarda i tuoi casi d'uso reali. Un modulo di contatto raramente ha bisogno del secondo nome, della dimensione dell'azienda o del settore al primo invio. Un modulo di prenotazione non ha bisogno del cognome da nubile della madre del cliente. Un'iscrizione alla newsletter non ha bisogno del CAP il primo giorno. Puoi chiedere più informazioni dopo, quando hai già costruito fiducia.
Una grande agenzia di viaggi online ha testato questo principio e ha risparmiato $12 milioni all'anno togliendo i campi facoltativi dal suo modulo di prenotazione. Gli utenti hanno completato più moduli. Ci sono state più conversioni. La semplificazione ha dato i suoi frutti.
Parti dal minimo assoluto. Su mobile la regola è più severa: se non ti serve per completare l'azione principale, toglilo. Prova a togliere i campi uno alla volta e guarda salire il tasso di completamento.
Regola 2: impila i campi in una sola colonna
I layout a due colonne su mobile sono un errore. Richiedono lo scorrimento orizzontale, creano una gerarchia visiva confusa e sprecano spazio orizzontale. Una colonna, impilata in verticale, è la più veloce da scorrere e compilare.
Ogni campo occupa tutta la larghezza. Le etichette stanno sopra il campo, non accanto. L'utente scorre in basso, legge l'etichetta, tocca il campo, scrive e passa al successivo. Il flusso è lineare. Il carico cognitivo è basso.
Resisti alla tentazione di mettere nome e cognome affiancati, o indirizzo e CAP sulla stessa riga. L'impilamento verticale è più lento su desktop, sì. Ma il mobile rappresenta due terzi del tuo traffico. Ottimizza per il caso della maggioranza.
Regola 3: rendi le aree da toccare abbastanza grandi da colpirle con sicurezza
I pulsanti devono essere di almeno 44x44 pixel. Le caselle di controllo e i pulsanti di scelta devono essere di almeno 40x40 pixel. I pulsanti piccoli costringono gli utenti a prendere la mira o a toccare più volte. La frustrazione cresce. Se ne vanno.
Osserva come usi il tuo telefono per un giorno. Nota quanti tocchi vanno a vuoto. Anche gli utenti esperti sbagliano. Progetta tenendo conto del margine di errore delle dita umane.
Conta anche lo spazio tra le aree da toccare. Se un pulsante "sì" sta accanto a un pulsante "no", gli utenti toccheranno quello sbagliato. Aggiungi 10-15 pixel di respiro tra gli elementi interattivi.
Regola 4: metti le etichette sopra i campi, non dentro
Il testo segnaposto dentro i campi sparisce appena l'utente inizia a scrivere. Dimentica a cosa servisse il campo. Poi sbaglia, vede un errore e non sa cosa correggere.
Le etichette devono stare fuori e sopra il campo. Chiare, visibili, sempre presenti. Quando l'utente tocca il campo e compare la tastiera, l'etichetta resta visibile e gli ricorda cosa sta scrivendo.
Un'etichetta dentro un campo è solo una comodità per chi progetta. Fa risparmiare qualche pixel di spazio. Ti costa conversioni.
Regola 5: scegli il tipo di campo giusto per la tastiera mobile
Tipi di campo diversi attivano tastiere diverse sui dispositivi mobili. Usali per rendere l'inserimento dei dati più veloce e più preciso:
Indirizzi email
Usa `type="email"` per attivare una tastiera con il simbolo @ e i tasti .com/.org visibili. Gli utenti non devono cercare i caratteri speciali. Anche la validazione avviene in automatico.
Numeri di telefono
Usa `type="tel"` per mostrare un tastierino numerico. Evita la formattazione elaborata che divide il campo in segmenti prefisso-numero. Gli utenti faticano con le divisioni rigide dei campi e cancellano nel blocco sbagliato. Un solo semplice campo telefono che accetta cifre e spazi è più veloce.
Numeri e quantità
Usa `type="number"` per mostrare solo i numeri sulla tastiera. Nascondi le lettere. Alcuni campi numerici hanno bisogno dei decimali; usa `inputmode="decimal"` per permetterli.
Date
Usa `type="date"` per attivare un selettore di date nativo invece di chiedere agli utenti di scrivere 03/15/2026. Il selettore con il calendario è più veloce, causa meno errori e sembra nativo del telefono.
URL
Usa `type="url"` per mostrare una tastiera con la barra e il tasto .com. Gli utenti possono inserire un indirizzo web senza cercare i caratteri speciali.
Ogni tipo di campo dice al browser mobile quali dati ti aspetti. Il browser poi ottimizza la tastiera di conseguenza. Non devi spiegare il formato. Ci pensa la tastiera.
Regola 6: scrivi messaggi di errore chiari che compaiono in tempo reale
Quando qualcuno compila un modulo su mobile e tocca invia solo per vedere "Indirizzo email non valido", ha già dimenticato cosa ha scritto. Non sa quale campo ha causato l'errore. Su uno schermo piccolo il messaggio può stare fuori dalla parte visibile. Deve scorrere di nuovo verso l'alto.
Valida invece i campi mentre l'utente li compila. Appena passa al campo successivo, controlla quello che ha appena lasciato. Se c'è un errore, mostralo subito, proprio sotto quel campo. Vede il problema mentre il contesto è ancora nella sua mente.
I messaggi di errore devono essere specifici. SBAGLIATO: "Input non valido." GIUSTO: "L'indirizzo email deve includere una @." L'utente sa esattamente come correggere.
Evita il solo colore rosso per segnalare gli errori. Chi non distingue i colori lo perderà. Usa il rosso insieme a un'icona o a un'etichetta di testo. "Errore: questo campo è obbligatorio."
Regola 7: ottimizza i pulsanti per l'interazione mobile
I pulsanti di invio devono essere grandi, chiaramente toccabili e posizionati dove il pollice si appoggia naturalmente. Un testo da 16 pixel in un pulsante alto 44 pixel è facile da toccare. Un testo da 14 pixel in un pulsante da 32 pixel è un errore in agguato.
La larghezza del pulsante dovrebbe occupare gran parte della larghezza dello schermo, non stringersi in una colonna stretta. I pulsanti a tutta larghezza su mobile riducono il carico cognitivo del "dove clicco dopo".
Evita i pulsanti secondari nella stessa schermata, a meno che non siano assolutamente necessari. Troppi pulsanti creano paralisi decisionale. Una sola azione principale per schermata è la regola del mobile-first.
Regola 8: usa indicatori di avanzamento per i moduli a più passaggi
Se il tuo modulo si estende su più schermate, mostra una barra di avanzamento in alto. "Passaggio 1 di 3" dice all'utente cosa aspettarsi. Sa che non sta compilando un modulo infinito. Vede il traguardo.
Ogni passaggio dovrebbe gestire un blocco logico di informazioni. Non buttare cinque argomenti diversi nel primo passaggio. Dividili. Fai sentire agli utenti il progresso mentre avanzano.
Permetti agli utenti di tornare indietro e modificare i passaggi precedenti. Non devono sentirsi bloccati. Chi usa il mobile è diffidente. Offrire una via d'uscita riduce l'ansia.
Regola 9: assicurati che il modulo funzioni con le tastiere mobile e le interruzioni
La tastiera compare e nasconde il modulo. L'utente scorre per vedere il campo successivo. Bene. Ora arriva una notifica e la tastiera si chiude. Il modulo è visibile ma l'utente ha dimenticato cosa stava compilando. Male.
Prova il tuo modulo su un telefono vero e con una tastiera vera. Capisci quanta parte del modulo sparisce quando compare la tastiera. Se un campo è nascosto del tutto, non si può usare. Ridisegna il layout in modo che il campo attivo resti visibile con la tastiera aperta.
Salva l'avanzamento del modulo mentre l'utente compila ogni campo. Se cambia app o il modulo si chiude per sbaglio, i dati restano. Quando torna, il modulo è esattamente come l'ha lasciato. Elimina una grande fonte di abbandono.
Regola 10: usa il completamento automatico e la precompilazione per velocizzare
I telefoni conservano dati di contatto, indirizzi email, nomi e dati di pagamento. Quando il tuo modulo usa nomi di campo e attributi HTML standard, il browser può compilarli in automatico. Un campo telefono con `autocomplete="tel"` mostrerà i numeri salvati come suggerimenti.
Precompilare i campi con dati che già conosci è ancora più efficace. Se qualcuno accede e inizia un modulo, la sua email è già inserita. Il suo indirizzo è già inserito. Scrive solo ciò che è nuovo. I tassi di completamento salgono quando gli utenti non devono reinserire informazioni che hai già.
Completamento automatico e precompilazione non sono barare. Sono rispetto per il tempo dell'utente. Riducono la digitazione. Riducono gli errori. Aumentano i completamenti.
Regola 11: prova su telefoni veri con utenti veri
I browser desktop hanno l'emulazione dei dispositivi. Simula lo schermo di un telefono. È utile per controlli veloci. Ma non simula la vera esperienza mobile. La tastiera non funziona allo stesso modo. Lo scorrimento non dà la stessa sensazione. Le aree da toccare non richiedono il tuo vero pollice.
Prova il tuo modulo su telefoni veri. Chiedi a un collega di compilarlo. Guarda dove esita. Guarda dove sbaglia. Guarda dove abbandona. Questi dati reali ti dicono più di qualsiasi lista di controllo.
Gli errori comuni nei moduli mobile sono difficili da individuare senza test. Un pulsante che sembra grande su un emulatore desktop può essere troppo piccolo su un telefono vero sotto il sole. Etichette che sembrano chiare in un wireframe possono essere difficili da leggere con l'angolazione con cui si tiene un telefono. Solo i test reali rivelano questi problemi.
Come WEMASY aiuta con il design dei moduli mobile
Il creatore di moduli di WEMASY include il design mobile-first di default. I moduli si impilano in automatico in una sola colonna su mobile. Le aree da toccare hanno la dimensione corretta. Le etichette restano visibili mentre gli utenti compilano i campi. La tastiera mobile è ottimizzata per ogni tipo di campo.
La validazione integrata avviene in tempo reale, non dopo l'invio. Gli indicatori di avanzamento compaiono nei moduli a più passaggi. Le risposte dei moduli si salvano in automatico, così gli utenti non perdono mai i progressi. Le statistiche tracciano quali campi causano più abbandoni, così puoi ottimizzare i punti di attrito più grandi.
Guarda cosa è incluso in ogni piano WEMASY e come il creatore di moduli si adatta al tuo modo di lavorare.