HTML5: risolvere il problema della compilazione delle date

Con le specifiche HTML5 possiamo utilizzare i campi di input dei form per chiedere agli utenti le loro date di nascita. Tuttavia questa nuova, affascinante opzione, porta con se alcune problematiche che è bene tenere presente in ottica di sviluppo front-end. Vediamole.

La prima problematica che si evince chiaramente dipende dal formato stesso delle date che varia a seconda della nazione in cui ci troviamo. Queste consistono in un formato composto da tre sezioni separate, indicanti il giorno, il mese e l'anno. Il problema è che in zone differenti vengono composte date utilizzando questi segmenti in modo diverso, come ad esempio:

giorno / mese /anno
mese / giorno / anno
anno / mese /giorno

Se all'utente mostrassimo un formato che differisce da quello utilizzato nella sua regione potrebbe incorrere in problematiche di compilazione. Inoltre, le date vengono presentate attraverso la notazione standard che utilizza la lettera "d" per indicare il giorno (day), la lettera "m" per indicare il mese (month) e la lettera "y" per indicare l'anno (year), in un formato cosi composto:

dd / mm / yyyy
mm / dd / yyyy
yyyy / mm / dd

Il giorno e il mese sono composti da due cifre, mentre l'anno da quattro cifre. Altra problematica dunque: chi è nato in un giorno inferiore al 10 del mese (ad esempio l'8), dovrà aggiungere lo zero oppure no ("8" o "08")?

Ciò che spesso capita è che l'utente inserisca la data nel formato in uso nella sua zona, mentre l'applicazione la elabora tramite il proprio sistema di lettura, e questa situazione genera problematiche sia lato server sia nell'interazione con l'utente.

Opzioni di selezione

Per migliorare l'esperienza utente possiamo innanzitutto definire in modo esteso le etichette "Giorno", "Mese" ed "Anno" nella direzione intesa dall'applicazione, in modo da imporre un formato generale che però non possa indurre in errore.

E' possibile aggiungere agli input i menù di selezione di opzioni, in cui l'utente può selezionare ognuna delle tre componenti della data, scegliendole tra un parco di opzioni pre-impostato. Questo permette di risolvere la problematica relativa alla presenza o meno dello "zero" nei giorni e nei mesi inferiori a 10, poiché la scelta viene effettuata dall'applicazione ed imposta. Anche questa soluzione presenta degli inconvenienti: la grafica di selezione è molto lunga (i giorni sono 31, i mesi 12 e gli anni molti di più) e questo potrebbe risultare sgradevole a seconda del dispositivo utilizzato dall'utente.

Data Picker e calendario

Un'altra soluzione risiede nell'aggiunta di un Data Picker, o calendario dinamico, tramite il quale l'utente può scegliere la propria data unicamente cliccando sugli elementi desiderati. Sebbene siano in molti a considerare il Data Picker come la soluzione migliore per l'esperienza utente, altrettanti designer lo trovano difficoltoso da utilizzare ed in alcuni casi controproducente.

CSS pulito

Se utilizziamo un approccio pulito e semplice, possiamo adottare tre campi di input con tre etichette (label) che indicano con chiarezza cosa deve essere introdotto in ogni campo, utilizzando un suggerimento di digitazione per ognuno di essi. Dunque, ad esempio, il campo del giorno avrà inserito il valore di default "08", il campo del mese il valore "05" ed il campo dell'anno il valore "1980". In questo modo viene risolta la problematica relativa al significato degli input, cosi come il formato corretto per tutti e tre i valori.

La lunghezza dei campi inoltre, impostata tramite HTML, è un'ulteriore indicatore del formato richiesto. Un altro vantaggio di questa opzione finale si trova nel fatto che l'utente può compilare il modulo utilizzando unicamente la tastiera, senza dover passare al mouse per la selezione.