Un campo per il numero di telefono sembra semplice. Una casella di testo con l'etichetta "Telefono". Ma nel momento in cui apri il modulo agli utenti internazionali o chiedi il telefono da mobile, quel campo semplice diventa complicato. Paesi diversi formattano i numeri in modo diverso. Devono comparire tastiere diverse. Chi chiama dall'estero ragiona in prefissi internazionali. Il tuo modulo deve gestire tutto questo, altrimenti perdi qualità nei dati. Un buon campo telefono funziona ovunque e guida gli utenti verso il formato giusto, non contro di esso.
Prendi un qualsiasi modulo che converte bene e raccoglie numeri di telefono. Guarda come gestisce il campo. Quasi tutti lo trattano come un normale campo di testo, aspettandosi che gli utenti scrivano il formato che ritengono giusto. Poi i dati arrivano nel caos. Alcuni numeri hanno i trattini. Altri le parentesi. Altri gli spazi. Altri nessuna formattazione. Il tuo database contiene lo stesso numero in cinque formati diversi. Quando devi chiamare qualcuno, il tuo sistema non riconosce che 5551234567 e (555) 123-4567 sono lo stesso numero. I dati sono raccolti, ma di fatto inutilizzabili.
La soluzione non è accettare il caos e normalizzarlo dopo. La soluzione è guidare gli utenti verso un unico formato corretto mentre scrivono. Succede con maschere di input, valori predefiniti intelligenti e una validazione che aiuta invece di bloccare.
Perché i campi telefono richiedono una gestione diversa dai campi di testo
Un numero di telefono è un dato con regole internazionali. Un indirizzo email è praticamente universale. Un nome può essere quello che uno vuole. Ma un numero di telefono ha una struttura definita dall'Unione internazionale delle telecomunicazioni. Paesi diversi usano lunghezze, prefissi e standard di formattazione diversi. Un numero valido in Giappone non somiglia affatto a uno valido in Francia. Il tuo campo deve capirlo, altrimenti rifiuta numeri buoni e accetta numeri sbagliati.
Non solo: gli utenti pensano ai numeri di telefono nel formato del proprio paese. Una persona a Londra pensa nel formato britannico. Una persona a Berlino pensa nel formato tedesco. Se li costringi al formato americano, si confondono. Sbagliano. Abbandonano il modulo. L'attrito nasce dalla distanza tra ciò che il campo si aspetta e ciò che l'utente cerca di darti.
Campo unico o campo diviso
Alcuni moduli dividono il numero di telefono in campi separati. Il prefisso in una casella. Il centralino in un'altra. Il numero di linea in un'altra ancora. Funziona benissimo per i numeri americani, dove la struttura è prevedibile. Non funziona da nessun'altra parte. Un utente in Germania non riesce a far stare il suo numero in tre caselle americane. Lo stesso vale per un utente in Australia o in Francia. I campi divisi peggiorano anche l'esperienza da mobile, perché gli utenti devono toccare da un campo all'altro invece di scrivere di seguito. I test di usabilità mostrano che molti utenti fanno fatica a spostarsi tra campi separati sui telefoni.
Meglio un campo unico. Una casella lunga. Un solo punto in cui scrivere l'intero numero. Il campo guida il formato con la maschera di input, non dividendo. Funziona allo stesso modo per i numeri nazionali e internazionali. Gli utenti mobile scrivono una volta sola e hanno finito.
Come la maschera di input trasforma il caos in ordine
La maschera di input formatta il numero in automatico mentre qualcuno scrive. Scrivono 5 5 5 1 2 3 4 5 6 7 e il campo mostra (555) 123-4567. Che scrivano piano o veloce, la formattazione li segue. Ha due scopi. Primo, dà un riscontro in tempo reale che stanno scrivendo nel formato giusto. Secondo, impedisce di inserire il formato sbagliato fin dall'inizio. Non possono digitare un carattere che rompe il formato. Il campo non lo accetta.
Il formato mostrato dipende dal paese selezionato. Se scelgono Stati Uniti, la maschera è (XXX) XXX-XXXX. Se scelgono Canada, è la stessa. Se scelgono la Germania, la maschera si adatta. L'utente vede un formato che riconosce. Ci scrive dentro. I dati ti arrivano puliti.
Le ricerche mostrano che l'89 per cento degli utenti inserisce il numero di telefono nel formato che preferisce, anche quando ci sono dei suggerimenti. La maschera di input elimina del tutto il problema. Non suggerisci il formato. Lo imponi visivamente mentre scrivono.
Prefisso internazionale e supporto per l'estero
Nel momento in cui ti apri all'estero, ti serve un selettore del paese. Un menu a tendina che mostra i nomi dei paesi con le bandiere. L'utente sceglie il suo paese. Il campo aggiorna la maschera di input. Il prefisso internazionale compare in automatico.
Contano due scelte di design. Primo, imposta un valore predefinito intelligente. Se la maggior parte dei tuoi utenti è negli Stati Uniti, imposta gli Stati Uniti. Se hai un pubblico globale, imposta come predefinita la posizione reale dell'utente usando i dati di geolocalizzazione. Chi è in Francia non dovrebbe scorrere 20 paesi per trovare la Francia. Secondo, tieni il selettore del paese visibile e facile da cambiare. Un utente può scegliere il paese sbagliato per errore. Deve poterlo cambiare con un tocco, senza cercare un menu a tendina nascosto.
Il prefisso internazionale deve comparire accanto al numero. L'utente vede +1 (555) 123-4567, non solo (555) 123-4567. Così il formato è inequivocabile. Capisce che questo è un numero statunitense dal prefisso +1. Se ha sbagliato e ha scelto il paese sbagliato, se ne accorge subito e può cambiarlo.
Un'altra cosa: quando l'utente cambia paese, conserva il numero che ha già scritto. Non svuotare il campo. Non azzerare tutto. Se ha scritto 5551234567 e poi si accorge di aver scelto il paese sbagliato, lascia che cambi il prefisso e tenga le cifre. Non deve ricominciare da capo.
Tastiere mobile e l'attributo type="tel"
Su un telefono la tastiera conta. Mostra la tastiera per le email in un campo email. Mostra la tastiera numerica per un numero di telefono. Non è solo comodità. Una piccola differenza nella disposizione dei tasti previene errori. Chi guarda una tastiera numerica ricorda che sta inserendo un numero, non un testo. La disposizione rende più difficile scrivere lettere per sbaglio.
Usa type="tel" nell'HTML per far comparire la tastiera numerica in automatico. Non tutti i telefoni mostrano la stessa tastiera. Alcuni mostrano 0-9 più simboli. Altri solo numeri. Altri lettere insieme ai numeri. Il comportamento varia da dispositivo a dispositivo. Ma ogni telefono mostrerà qualcosa di più utile della tastiera QWERTY completa.
Oltre alla scelta della tastiera, gli schermi dei dispositivi mobili sono piccoli. Rendi grande il campo di input. Pulsanti a misura di pollice in basso. Campo a tutta larghezza. Nessuno scorrimento orizzontale. Un numero difficile da toccare è un numero che non verrà scritto correttamente.
Quali strategie di validazione funzionano davvero
La validazione controlla se il numero è reale. Reale significa che rispetta le regole di formato del paese selezionato e ha il giusto numero di cifre. Paesi diversi hanno un numero di cifre diverso. Un numero statunitense ha 10 cifre dopo il prefisso internazionale. Un numero tedesco ne ha da 6 a 11 a seconda della regione. La tua validazione deve conoscere queste regole.
L'approccio migliore alla validazione dei numeri di telefono è lo standard E.164. È il formato internazionale definito dall'ITU che ogni sistema globale capisce. Il formato E.164 è un segno più, il prefisso internazionale e poi il numero nazionale. Niente spazi, parentesi o trattini. +14155550123 per un numero statunitense. È questo che viene salvato nel tuo database. Ciò che l'utente vede e scrive è formattato per essere leggibile. Ciò che viene salvato è in E.164, per coerenza e precisione.
Esegui la validazione in due punti. Primo, valida nel browser mentre l'utente scrive. Validazione in tempo reale. Vede una spunta quando il numero è completo e valido. Vede un messaggio quando manca qualcosa. Secondo, valida sul server dopo l'invio. La validazione lato client rende l'esperienza fluida. La validazione lato server protegge i tuoi dati nel caso qualcuno disattivi i controlli del browser o invii dati sbagliati tramite un'API.
L'errore di chiedere la conferma del telefono
Alcuni moduli chiedono il numero di telefono e poi la conferma del numero. Scrivi il tuo numero. Scrivilo di nuovo per confermare. Raddoppia l'attrito. Qualcuno deve scrivere correttamente un numero di 10 cifre e poi riscriverlo correttamente. La maggior parte delle persone sbaglierà in uno dei due tentativi. Poi restano bloccate. I due numeri non coincidono. Devono correggere entrambi i campi per andare avanti.
Un approccio migliore è validare il numero in tempo reale mentre scrivono. Quando arrivano al pulsante di invio, il numero è già validato. Non serve che lo scrivano due volte. La validazione stessa è la conferma.
Errori comuni che rovinano la qualità dei dati telefonici
Accettare qualsiasi numero senza controllare il paese
Un modulo accetta un numero di 7 cifre e uno di 15 cifre senza sapere da quale paese viene ciascuno. Entrambi vengono salvati come validi. Più tardi provi a chiamare qualcuno e nessuno dei due numeri funziona. Valida sempre in base al paese selezionato. Un numero di 7 cifre può essere valido per alcuni paesi europei. Un numero di 10 cifre è lo standard negli Stati Uniti ma sbagliato ovunque altrove. Il contesto del paese conta per ogni regola di validazione.
Mostrare gli errori di validazione solo dopo l'invio
Se aspetti che qualcuno clicchi su invia per dirgli che il numero di telefono è incompleto o non valido, hai creato attrito. Cliccano su invia. Vedono un errore. Correggono il numero. Inviano di nuovo. La validazione in tempo reale evita tutto questo. Appena finiscono di scrivere il numero, sanno se è valido. Al momento dell'invio non devono esserci sorprese.
Nascondere il selettore del paese in un punto poco chiaro
Il prefisso internazionale non è un ripensamento. Rendilo evidente. Un menu a tendina ben visibile in cima al campo telefono, non sepolto sotto altri tre menu a tendina. L'utente deve vederlo e poterlo cambiare facilmente. Se sceglie il paese sbagliato, deve accorgersene subito dal cambio di formato nel campo.
Non spiegare perché ti serve il numero di telefono
Le ricerche mostrano che il 14 per cento degli utenti abbandona il checkout se un campo telefono è obbligatorio senza spiegazione. Eppure i test mostrano anche che gli utenti restano se gli dici semplicemente perché ti serve. Aggiungi una frase di testo di aiuto. "Lo useremo per confermare il tuo ordine" oppure "Così potremo raggiungerti se ci sono domande." Un piccolo contesto previene gli abbandoni.
Usare una formattazione che funziona solo in un paese
Se formatti tutti i numeri come (XXX) XXX-XXXX, ti sei legato ai numeri statunitensi. Quel formato non significa nulla in Germania o in Giappone. Usa E.164 per il salvataggio e una maschera adatta al paese per l'input, oppure fai adattare il formato in base al paese selezionato. Non dare per scontato che un solo formato funzioni ovunque.
Privacy e campo telefono facoltativo
I numeri di telefono sono dati personali. In molte giurisdizioni raccoglierli fa scattare normative sulla privacy. Gli utenti proteggono sempre di più il proprio numero perché porta a chiamate di spam. Alcuni moduli raccolgono i numeri per abitudine, non per reale necessità. Se non ti serve davvero un numero di telefono, non chiederlo. Se ti serve, spiega perché.
Se puoi, rendi il campo facoltativo. I campi obbligatori creano attrito. I campi facoltativi riducono gli abbandoni. Se il contatto telefonico è importante ma non strettamente necessario per il tuo flusso di lavoro, segnalo come facoltativo e spiega il vantaggio. "Aggiungi il tuo numero di telefono per ricevere gli aggiornamenti sull'ordine via SMS" gli dà un motivo per compilarlo anche se non è obbligatorio.
Come WEMASY gestisce i campi per il numero di telefono
Il creatore di moduli di WEMASY include campi telefono con supporto internazionale integrato. Crea un campo telefono e scegli se è locale o internazionale. Per quello locale, imposta il tuo paese. Per quello internazionale, gli utenti vedono un menu a tendina dei paesi con le bandiere. Il campo mostra in automatico la maschera di input giusta in base al paese selezionato. Mentre scrivono, il campo formatta da solo. (555) 123-4567 compare senza che debbano scrivere parentesi e trattini. La validazione in tempo reale conferma che il numero è completo e valido per il paese selezionato. Su mobile compare la tastiera numerica. Il campo funziona su ogni dispositivo. Vedi i dati dei numeri di telefono nelle statistiche del modulo e nota gli schemi nel formato che gli utenti provano a inserire. Quando i dati arrivano nel tuo CRM, tutti i numeri sono in formato E.164. Sono coerenti. Funzionano con i sistemi di chiamata. Le tue comunicazioni successive raggiungono la persona giusta.