Se un modulo chiede una data e i tuoi visitatori rinunciano invece di compilarla, hai un problema con il campo data. Sembra semplice. Scegliere una data. Scrivere un'ora. Ma le piccole scelte di design su come chiedi questi dati pesano in modo sorprendente sugli abbandoni del modulo.
I campi data e ora sembrano lineari dal punto di vista di chi progetta. La difficoltà è che i visitatori li usano in modo diverso a seconda della data che cercano, del dispositivo che usano e del fatto che debbano scorrere i mesi o scrivere dei numeri. Se il design del campo è giusto, le persone attraversano il modulo senza attrito. Se è sbagliato, abbandonano prima ancora di provare.
Perché i campi data e ora contano per il tasso di compilazione del modulo
I campi data sono punti decisionali. Un visitatore che compila un modulo di prenotazione deve scegliere la data dell'appuntamento. Chi si iscrive a un evento deve inserire il proprio anno di nascita. Un cliente che imposta un ordine ricorrente deve scegliere una data di inizio. In ogni caso, il costo di interazione di quel singolo campo può decidere se finisce o se ne va.
Prendi la prenotazione di appuntamenti. Le ricerche mostrano che i selettori di date funzionano bene quando i visitatori scelgono date nel futuro prossimo. Lo stesso selettore diventa una frustrazione quando il visitatore inserisce la sua data di nascita e deve scorrere indietro di 40 anni. Il modello di interazione che sembra facile per il mese prossimo sembra rotto per il 1985.
I campi ora creano un problema simile. Un visitatore che vuole fissare un appuntamento alle 14:30 non dovrebbe dover toccare elenchi a tendina separati per ore, minuti e AM/PM. Il modo in cui strutturi questi campi incide direttamente sul fatto che qualcuno prenoti l'appuntamento o chiuda il browser.
Campi di testo o selettori di date: scegliere l'interazione giusta
La scelta tra un campo di testo e un selettore di date a calendario non è universale. Dipende dal tipo di data che stai chiedendo.
Usa caselle di testo per le date molto nel passato o nel futuro
Quando qualcuno inserisce la data di nascita, cerca una data che può essere di 30, 40 o 50 anni fa. Un selettore a calendario lo costringe a cliccare tra decine di mesi per arrivarci. Funzionano meglio tre caselle di testo separate con le etichette Giorno, Mese e Anno. Il visitatore scrive velocemente in ciascun campo, passando in automatico da una casella all'altra. Otto-dieci tasti e ha finito. Un selettore di date per la stessa azione richiede molti più tocchi o clic.
Se usi una sola casella di testo invece di tre separate, mostra chiaramente il formato atteso con un'etichetta come "MM/DD/YYYY" o "DD/MM/YYYY" a seconda della tua regione. Non usare un segnaposto che sparisce quando l'utente clicca. Un'etichetta resta visibile e dice che cosa vuoi.
Usa i selettori di date per le date nel futuro prossimo
Un selettore di date a calendario ha senso quando qualcuno prenota un appuntamento per la prossima settimana o sceglie una data di viaggio per il mese prossimo. Il selettore mostra per impostazione predefinita il mese corrente, e l'utente clicca o tocca la data che vuole. La metafora visiva del calendario corrisponde a come le persone già pensano alla pianificazione.
La regola chiave: per le date future, imposta il calendario sul mese corrente. Non far cliccare tra i mesi per trovare quello giusto. E se alcune date non sono disponibili, mostra direttamente nel selettore quali lo sono. Le date in grigio o disattivate evitano la frustrazione di scegliere una data per vedere poi un errore "non disponibile" dopo l'invio.
Buone pratiche per i selettori di date: farli funzionare per i tuoi visitatori
Un selettore di date è utile quanto è facile da usare per i visitatori. Le regole che contano:
Supporta l'inserimento manuale del testo accanto al selettore
Non tutti vogliono usare l'interfaccia a calendario. Alcuni visitatori preferiscono scrivere la data direttamente. Permetti sempre l'inserimento da tastiera. Se qualcuno scrive "3/15/2026", accettalo senza costringerlo a usare il selettore. Non richiedere caratteri speciali. Accetta "3-15-2026" o "3 15 2026" allo stesso modo. Una formattazione flessibile elimina l'attrito.
Usa i tipi di input HTML5 su mobile
I dispositivi mobili hanno selettori nativi di data e ora integrati nel sistema operativo. Usa type="date" o type="time" nel campo del modulo HTML. Su molti telefoni compare il selettore a rotella del sistema. Su Android compare il selettore di date della piattaforma. I visitatori si aspettano questa interazione sul loro telefono, e il selettore nativo è ottimizzato per l'uso su mobile.
Limita l'intervallo di date per evitare scorrimenti infiniti
Se chiedi una data futura, limita il selettore a mostrare i mesi dei prossimi 2-3 anni, non dei prossimi 50. Se chiedi una data storica, imposta un punto di partenza ragionevole. Per la "data di nascita", parti da 30 o 50 anni fa, non da 100 anni fa.
Mostra il contesto per le date non disponibili
Se alcune date non possono essere selezionate (perché quegli orari sono già prenotati o il meteo impedisce il servizio), contrassegna quelle date in modo diverso nel selettore. Mettile in grigio, disattivale o mostra un indicatore visivo. Così eviti il vicolo cieco in cui qualcuno sceglie una data e vede poi un messaggio di errore che dice che non è disponibile.
Design del campo ora: aiutare i visitatori a scegliere il momento giusto
I campi ora hanno le loro difficoltà. Un visitatore che sceglie l'orario di un appuntamento non dovrebbe dover selezionare ore, minuti e AM/PM in elenchi a tendina separati. Combinali in modo intelligente.
Offri gli orari a intervalli di 30 minuti
La maggior parte dei sistemi di prenotazione non ha bisogno di una granularità al minuto. Intervalli di trenta minuti coprono appuntamenti, consulenze e prenotazioni. Offri orari come 9:00 AM, 9:30 AM, 10:00 AM e così via. Questo riduce il numero di opzioni senza perdere funzionalità.
Mostra l'ora in un formato che i visitatori già usano
Per un pubblico statunitense usa il formato a 12 ore con AM/PM. Per contesti internazionali o turni di lavoro, il formato a 24 ore può avere più senso. Sii coerente in tutto il modulo. Non passare mai da un formato all'altro a metà dello stesso modulo.
Preseleziona un orario predefinito o mostra l'ora attuale
Un campo ora non dovrebbe mai essere completamente vuoto. Preseleziona un orario di appuntamento comune (come 10:00 AM) oppure mostra l'ora attuale. Così i visitatori hanno un punto di partenza e vedono quale formato ti aspetti.
Considerazioni mobile per i campi data e ora
I moduli su mobile hanno vincoli diversi da quelli su desktop. Lo spazio è limitato. Le aree di tocco devono essere più grandi. Le tastiere coprono metà dello schermo.
Usa i selettori mobile nativi quando possibile
Gli input HTML5 di data e ora attivano il selettore del sistema operativo su mobile. È più veloce e più familiare per gli utenti di un selettore personalizzato che progetti tu. Il selettore a rotella e il selettore di date di Android sono già ottimizzati per l'interazione su mobile.
Rendi le aree di tocco abbastanza grandi da essere toccate
Se costruisci un selettore personalizzato, assicurati che pulsanti e date siano almeno di 44 per 44 pixel. I piccoli quadratini del calendario che vanno bene su desktop diventano impossibili da toccare su un telefono.
Evita l'invio automatico
Non inviare automaticamente il modulo e non passare al campo successivo nel momento in cui viene scelta una data. Lascia che i visitatori confermino la scelta e vadano avanti da soli. L'invio automatico può intrappolare gli utenti nella data o nell'ora sbagliata e frustrarli.
Messaggi di errore e validazione: guidare gli utenti verso la data giusta
Anche con un buon design, a volte i visitatori scelgono date non valide. Inseriscono una data di ritorno prima della data di partenza. Scelgono una data già prenotata. Scrivono "13/45" per errore. Come gestisci gli errori decide se correggono il problema o abbandonano il modulo.
Valida in tempo reale
Non aspettare l'invio del modulo per dire ai visitatori che la data è sbagliata. Valida mentre scrivono o selezionano. Se qualcuno sceglie una data di ritorno prima della data di partenza, diglielo subito. Se una data non è disponibile, fallo sapere subito, così può sceglierne un'altra.
Scrivi messaggi di errore che spiegano che cosa è andato storto
Un cattivo errore dice "Data non valida". Un errore utile dice "Inserisci una data nel formato MM/DD/YYYY" oppure "Quella data non è disponibile. Scegline un'altra."
Indica il problema specifico e suggerisci la soluzione. Il tuo messaggio di errore non è una punizione. È una guida utile.
Impedisci le selezioni logicamente impossibili
Se chiedi una data di partenza e una di ritorno, disattiva le date di ritorno precedenti alla data di partenza una volta scelta. Se chiedi un appuntamento, disattiva le date già completamente prenotate. Rendi non disponibili le selezioni impossibili invece di far scegliere i visitatori per poi respingerli.
Schemi del mondo reale: che cosa funziona nei diversi casi d'uso
Il miglior design del campo data dipende dal tipo specifico di modulo. Ecco gli schemi più comuni.
Moduli di prenotazione e appuntamento
Usa un selettore di date a calendario. Imposta come predefinito il mese corrente o il primo mese disponibile. Mostra le date non disponibili. Accetta l'inserimento manuale della data come alternativa.
Campi data di nascita
Usa tre caselle di testo (Giorno, Mese, Anno) o un unico campo di testo con formattazione flessibile. Evita i selettori di date perché la data è così lontana nel passato che il selettore diventa ingestibile.
Data di inizio per ordini ricorrenti o abbonamenti
Usa un semplice selettore di date con la prima data disponibile come predefinita. La maggior parte dei visitatori accetta il valore predefinito o sceglie una data entro il mese successivo.
Scelta dell'orario di un evento
Se il tuo evento ha una data fissa ma i visitatori scelgono una fascia oraria, usa un semplice selettore di orari con intervalli di 30 minuti o di un'ora. Mostra quali fasce sono disponibili e quali sono complete.