Qual è la migliore interfaccia utente per inserire la data di nascita? [chiuso]

Qual è il metodo migliore per selezionare la data di nascita?

• 3 input di testo (mese / giorno / anno) o un input maschera. L'utente DEVE usare la tastiera
• 3 caselle di selezione. L'utente può utilizzare la tastiera o il mouse.
• Un bel datepicker .

Voglio sapere qual è la soluzione più utilizzabile e senza problemi, così l'utente non sarà affatto confuso.

Per un utente avanzato l'immissione di testo è la migliore, se l'utente conosce il formato della data, è molto veloce. Per un utente non così avanzato suggerisco di utilizzare un datepicker. Dal momento che di solito hai anche utenti avanzati e non avanzati, suggerisco una combinazione di input di testo e datepicker.

Se il tuo obiettivo è assicurarti che "l'utente non venga affatto confuso", penso che questa sia l'opzione migliore.

Non consiglierei un datepicker per la data di nascita . Per prima cosa devi sfogliare l'anno (fare clic, fare clic, fare clic ...), quindi al mese (fare clic ancora), quindi trovare e fare clic sul piccolo numero su una griglia.

I Datepicker sono utili quando non conosci la data esatta nella parte superiore della testa, ad esempio stai pianificando un viaggio per la seconda settimana di febbraio.

Sebbene questa sia una domanda molto vecchia, è così importante ottenere una data di nascita corretta, specialmente in un modulo di registrazione.

Penso che nessuno l'abbia fatto meglio della registrazione degli account Google:

Selezionare prima il mese da una casella di selezione e digitare manualmente la data e l'anno. Semplice.

Facile da convalidare. Facile da capire per gli utenti. Non è possibile scorrere indietro gli anni in una casella di selezione dal 1900 all'anno in corso. Non è necessario aggiornare una casella di selezione "giorno" in base all'immissione del mese. Funziona alla grande sul web. Funziona alla grande sui dispositivi mobili. Funziona per tutte le località, ad esempio il 01/10/2014 - è il 1 ottobre o il 10 gennaio? Mi aspetto che in futuro vedremo questo formato di selezione dei compleanni molto di più.

Un datepicker è solo una cattiva soluzione a tutto tondo. Tanti clic! A mio parere, un datepicker è utile solo quando è importante conoscere il giorno della settimana, ad esempio prenotare i biglietti.

Aggiornamento 2/6/2016: vengo dal Regno Unito, quindi ho più familiarità con i formati giorno / mese / anno, piuttosto che mese / giorno / anno. Tuttavia, gli utenti che useranno il cursore per selezionare il mese, credo che sia molto più facile avere prima la casella di selezione, piuttosto che andare in input> select box> input. La data del commento è il 2 giugno, non il 6 febbraio;)

Come accennato in questo articolo di Jakob Nielsen , gli elenchi a discesa dovrebbero essere evitati per i dati ben noti all'utente :

Menu di dati ben noti agli utenti, come il mese e l'anno di nascita. Tali informazioni sono spesso cablate nelle dita degli utenti e dover selezionare tali opzioni da un menu rompe il paradigma standard per l'immissione di informazioni e può persino creare più lavoro per gli utenti.

La soluzione ideale è probabilmente qualcosa del genere:

• Fornisci 3 caselle di testo separate per giorno, mese e anno (etichettate in modo appropriato)
• Ordina le caselle di testo in base alla cultura dell'utente.
• Le caselle di testo Giorno e Mese devono essere ridimensionate in modo da presupporre un input di 2 cifre.
• La casella di testo Anno deve essere ridimensionata in modo da assumere un anno a 4 cifre.
• Consentire all'utente di inserire un anno a 2 o 4 cifre. Supponiamo che un anno a 2 cifre sia 1900 e aggiorna la casella di testo per riflettere questo suBlur (o su un passaggio di conferma successivo).
• Consentire all'utente di inserire un numero di mese OPPURE il nome del mese.

EDIT: Ecco come abbiamo implementato il nostro selettore DOB: campo di immissione di testo mascherato con regex HTML5 per forzare la tastiera numerica sui dispositivi iOS.

http://www.huntercourse.com/usa/texas/

Le date di nascita sono diverse dalle altre date perché le persone sono spesso abituate a digitare la loro specifica data di nascita.
Una casella di testo con un esempio è chiara, veloce e facile da inserire:

 _______
|_______| (example: 31/3/1970)

Questo dovrebbe supportare una formattazione flessibile come 1/1/1970 o 20/07/70.

Se devi supportare culture diverse con convenzioni di date diverse (ad es. USA e Regno Unito), questo potrebbe essere soggetto a errori per le persone che non tengono conto dell'esempio. Per evitare ciò è possibile utilizzare un
elenco di selezione per il mese e le caselle di testo per la data e l'anno .

 _________   __   ____
|March  |V| |__| |____|

Ciò elimina l'ambiguità tra l'ordine del giorno e quello del mese, ma è un po 'più complicato da usare.

Dovresti dare un'occhiata a Datejs .

Datejs è una libreria di date JavaScript open source.

Completo, ma semplice, furtivo e veloce. Datejs ha superato tutte le prove ed è pronto a colpire. Datejs non si limita ad analizzare le stringhe, le divide in due in modo netto.

Sono turbato dalla preponderanza di soluzioni invece di progettare. L'OP ha detto: "Voglio sapere qual è la soluzione più utilizzabile e priva di problemi, così l'utente non sarà affatto confuso". Quindi, che si tratti di jQuery o JavaScript o C # o FORTRAN, il design è importante - ed è il design UX, non il design dell'interfaccia utente che conta qui. (Un altro motivo per evitare il costrutto errato e illogico "UX / UI").

Usa l'immissione di testo. Utilizza tre caselle separate denominate Giorno, Mese e Anno (o Mese, Giorno e Anno). Consenti agli utenti di digitare le date. Mescolare testo ed elenchi nella stessa interazione è una brutta cosa (non utilizzare l'immissione di testo per l'anno ma il selettore di date o gli elenchi per mese e giorno, ad esempio).

Utilizza un singolo campo di testo che utilizza suggerimenti sul formato nel campo, ad esempio, [giorno / mese / anno] Non richiedere formati troppo rigidi. Se un utente digita GIU nel luogo in cui prevedi un mese, utilizza giugno nel back-end. Se un utente digita 6 nel punto in cui prevedi un mese, utilizza giugno nel back-end. Se un utente digita 06 nel punto in cui ti aspetti un mese, utilizza giugno sul back-end.

Usa il rasoio di Occam come guida (in effetti, la maggior parte delle volte i dati saranno abbastanza accurati). Riduci l'attrito cognitivo (non far pensare gli utenti).

Suggerirei anche la combinazione di DatePicker e campi

Guarda questa demo , in cui il selettore di data riflette la data inserita nei campi dall'utente.
Tuttavia si basa su un DatePicker che utilizza Prototype e Scriptaculous . Lo menziono a scopo illustrativo.

Avevo provato datePicker con il mio utente, ma si è rivelata una cattiva interfaccia utente per loro. Quello che finisco in base alla loro richiesta è di avere 3 caselle di testo in cui possono digitare rapidamente [giorno] [mese] [anno] :(

Mettili entrambi e aggiorna l'altro. Se l'utente sceglie la data dal datepicker, è facile correggere un piccolo errore nel campo di testo o visualizzare la scelta che hai digitato nel campo di testo nel datepicker.

Perché non provi tutti e tre e scegli quello che si comporta meglio? Questo sembra un buon candidato per il test dello Strumento per ottimizzare il sito di Google .

Può darsi che il tipo di utenti che hai, o il tipo di sito che stai eseguendo possa imporre che la tua soluzione debba essere diversa dalla "norma".

Normalmente uso entrambi: un datepicker che popola un campo di testo nel formato corretto. Gli utenti avanzati possono modificare direttamente il campo di testo, gli utenti felici del mouse possono scegliere utilizzando il datepicker.

Se sei preoccupato per lo spazio, di solito ho solo il campo di testo con una piccola icona del calendario accanto. Se fai clic sull'icona del calendario, viene visualizzato il datepicker come popup.

Inoltre trovo sia una buona pratica precompilare il campo di testo con del testo che indichi il formato corretto (es: "GG / MM / AAAA"). Quando l'utente mette a fuoco il campo di testo, il testo scompare in modo che possa inserire il proprio.

Essendo forse una delle persone anziane qui, e nata alla fine del mese, trovo che i menu a discesa per le date di nascita siano frustranti. In genere devo scorrere verso il basso su due menu a discesa, e questo è imbarazzante. Preferisco di gran lunga scriverlo.

Se puoi avere un controllo progettato in modo che possa accettare menu a discesa o essere digitato in e rendere chiaro che entrambi funzionano, sarebbe eccellente.

Se usare o meno un datepicker, penso dipenda da quanto tempo fa le date. Se sono tipicamente nel mese corrente, e quasi mai più vecchi di pochi mesi, e sai che Javascript sarà in giro, un datepicker è buono. Se le date non sono recenti (ad esempio, una data di nascita) penso che questa sia l'opzione migliore:

http://img411.imageshack.us/img411/6328/mockupg.png

Nota che questo è diverso dalla risposta di Patrick McElhaney in quanto l'anno è una casella di testo, non un menu a discesa . Selezionare un numero da una casella a discesa lunga centinaia di elementi è molto fastidioso per l'utente.

Penso che un selettore di date renda la mossa più complicata per inserire la propria data di nascita.

Come già accennato, una combinazione di elenchi a discesa per giorni e mesi con una casella di testo per l'anno sembra la più efficiente per un utente. Bastano meno di 10 secondi per inserire una data di nascita in questo modo, che è molto più veloce di un selettore di date: grazie al tasto tab (che tutti gli utenti dovrebbero imparare a usare per completare un modulo), è veloce passare da un modulo elemento a quello successivo.

Almeno in Macintosh (non so di Windows), puoi anche usare la tastiera per accedere alla data all'interno delle caselle di selezione: grazie al tasto tab, metti il ​​fuoco sull'elemento del modulo, quindi premi il tasto freccia per scorrere verso il basso l'elenco, quindi digita ad esempio 1967 e ci arrivi in ​​un batter d'occhio ...

Preferirei un datepicker (e una casella di input con formato documentato come riserva) per un sito internazionale.

I formati della data variano e talvolta sono difficili da leggere se ora ci sei abituato. Peccato che molte persone non si sentano a proprio agio con ISO 8601. :-(

Suggerirei di utilizzare un menu a discesa per ogni campo, assicurandoti di etichettare ciascuno come giorno, mese e anno. Un selettore di date potrebbe anche aiutare, ma se l'utente non ha JavaScript abilitato, non funzionerà.

Vorrei prendere un DatePicker. È l'unico componente che consente agli utenti esperti di inserirlo manualmente e guida i principianti a inserire una data molto facilmente.

Il calendario non dovrebbe apparire se si accede premendo tab, ma facendo clic su un pulsante. Quindi nessun utente esperto ne è infastidito.

Chi non usi jQuery UI DatePicker?

È configurabile per soddisfare praticamente qualsiasi esigenza. L'unico svantaggio è che se lo includi con jQuery UI ha un'impronta piuttosto grande.

Aggiornare

Alcune delle dimensioni dei file sembrano essere cambiate, quindi vengono aggiornate di seguito. Tieni presente che questi numeri saranno corretti solo per l'ora in cui sono stati aggiornati l'ultima volta. Le cose potrebbero essere cambiate da allora.

• Tema CSS - 23kb
• jQuery UI - 71kb minimizzato
• DatePicker - 38kb
• Più un paio di immagini (mese prossimo / mese precedente, che sono abbastanza sicuro che siano sprite)

Ma non è poi così male ...

Il selettore data / ora di JQueryUI è l'opzione migliore in quanto consente agli utenti professionisti di inserire il proprio valore nella casella di testo o possono sceglierlo dal selettore.

Anche l'impostazione del selettore per consentire un facile inserimento di compleanni o date future è abbastanza semplice:

$ ( '# Datepicker'). Datepicker ({
    changeMonth: true,
    changeYear: true,
    yearRange: '-100: +50'
});

questo mostra qualcosa del genere (non posso pubblicare una foto perché sono un nuovo utente: http://klalex.com/wp-content/uploads/2009/07/picture-1.png )

e yearRange mostra le date da DateTime.Now.Year - 100 a DateTime.Now.Year + 50

l' ho trovato su: http://klalex.com/2009/07/jquery-ui-datepicker-for-birth-date-input/

Ho appena scoperto un plugin su JSFiddle. Due possibili alternative: 1 ingresso singolo O 3 ingressi, ma sembra uno solo ... (usa il tasto Tab per passare all'ingresso successivo)

[link] http://jsfiddle.net/davidelrizzo/c8ASE/ Sembra interessante!

Penso che tu possa provare il plugin birthdaypicker ,

puoi usare il plugin cxcalendar . Sembra un altro datepicker. ma puoi scegliere anno e mese in select dopo aver fatto clic sul titolo anno-mese.

Ho creato tre menu a discesa per la selezione della data di nascita e il numero di giorni cambia dinamicamente in base alla selezione dell'anno e del mese. http://jsfiddle.net/ravitejagunda/FH4VB/10/

daysInMonth = new Date(year,month,1,-1).getDate();