Apa UI terbaik untuk memasukkan tanggal lahir? [Tutup]

Apa metode terbaik untuk pemilih tanggal lahir?

• 3 input teks (bulan / hari / tahun) atau satu input topeng. Pengguna HARUS menggunakan keyboard
• 3 kotak pilih. Pengguna dapat menggunakan keyboard atau mouse.
• Satu bagus datepicker .

Saya ingin tahu solusi apa yang paling berguna dan bebas masalah, sehingga pengguna tidak akan bingung sama sekali.

Untuk input teks pengguna mahir adalah yang terbaik, jika pengguna mengetahui format tanggal, itu sangat cepat. Untuk pengguna yang tidak begitu mahir saya sarankan menggunakan datepicker. Karena biasanya Anda juga memiliki pengguna mahir dan non-mahir, saya menyarankan kombinasi input teks dan datepicker.

Jika tujuan Anda adalah untuk memastikan "pengguna tidak akan bingung sama sekali," menurut saya ini adalah pilihan terbaik.

Saya tidak akan merekomendasikan pemilih tanggal untuk tanggal lahir . Pertama, Anda harus menelusuri tahun (klik, klik, klik…), lalu ke bulan (klik lagi), lalu cari dan klik angka kecil di kisi.

Datepickers berguna ketika Anda tidak tahu tanggal pastinya, misalnya Anda merencanakan perjalanan untuk minggu kedua bulan Februari.

Meskipun ini adalah pertanyaan yang sangat lama, sangat penting untuk mendapatkan masukan tanggal lahir yang benar, terutama dalam formulir pendaftaran.

Saya pikir tidak ada yang melakukan ini lebih baik daripada mendaftar akun google:

Pilih bulan pertama dari kotak pilih dan ketik tanggal dan tahun secara manual. Sederhana.

Mudah divalidasi. Mudah bagi pengguna untuk melakukannya dengan benar. Tidak ada pengguliran mundur tahun di kotak pilih dari tahun 1900-tahun ini. Tidak perlu memperbarui kotak pilih 'hari' berdasarkan masukan bulan. Berfungsi dengan baik di web. Berfungsi dengan baik di perangkat seluler. Berfungsi untuk semua lokal, mis. 01/10/2014 - apakah itu tanggal 1 Oktober atau 10 Januari? Saya berharap kita akan melihat format pemilih ulang tahun ini lebih banyak di masa mendatang.

Seorang datepicker hanyalah solusi yang buruk secara keseluruhan. Begitu banyak klik! Menurut pendapat saya, datepicker hanya berguna ketika mengetahui hari dalam seminggu itu penting misalnya memesan tiket.

Pembaruan 2/6/2016: Saya dari Inggris, jadi saya lebih akrab dengan format hari / bulan / tahun, daripada bulan / hari / tahun. Namun, pengguna yang akan menggunakan kursor mereka untuk memilih bulan, saya yakin lebih mudah memiliki kotak pilih terlebih dahulu, daripada masuk ke input> pilih kotak> input. Tanggal komentar adalah 2 Juni, bukan 6 Februari;)

Seperti yang disebutkan dalam artikel Jakob Nielsen ini , daftar drop-down harus dihindari untuk data yang diketahui oleh pengguna :

Menu-menu data yang diketahui pengguna, seperti bulan dan tahun kelahiran mereka. Informasi semacam itu sering kali tertanam di jari pengguna, dan harus memilih opsi tersebut dari menu melanggar paradigma standar untuk memasukkan informasi dan bahkan dapat menciptakan lebih banyak pekerjaan bagi pengguna.

Solusi ideal mungkin sesuatu seperti berikut:

• Sediakan 3 kotak teks terpisah untuk hari, bulan, dan tahun (diberi label dengan benar)
• Urutkan kotak teks sesuai dengan budaya pengguna.
• Kotak teks Hari dan Bulan harus berukuran sedemikian rupa sehingga diasumsikan input 2 digit.
• Kotak teks tahun harus berukuran sehingga diasumsikan tahun dengan 4 digit.
• Izinkan pengguna memasukkan tahun 2 atau 4 digit. Asumsikan tahun 2 digit adalah 1900, dan perbarui kotak teks untuk mencerminkan onBlur ini (atau pada langkah konfirmasi berikut).
• Izinkan pengguna untuk memasukkan nomor bulan ATAU nama bulan.

EDIT: Berikut adalah cara kami menerapkan pemilih DOB kami: Bidang input teks bertopeng dengan regex HTML5 untuk memaksa keyboard numerik pada perangkat iOS.

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

Tanggal lahir berbeda dari tanggal lain karena orang sering kali terbiasa mengetikkan tanggal lahir spesifik mereka.
Sebuah kotak teks dengan contoh jelas, cepat dan mudah untuk masuk:

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

Ini harus mendukung pemformatan fleksibel seperti 1/1/1970 atau 20/07/70.

Jika Anda harus mendukung budaya yang berbeda dengan konvensi tanggal yang berbeda (misalnya AS dan Inggris) maka ini bisa menjadi rawan kesalahan bagi orang yang tidak mengindahkan contoh. Untuk menghindari hal ini, Anda dapat menggunakan
daftar pilih untuk bulan, dan kotak teks untuk tanggal dan tahun .

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

Ini menghilangkan ambiguitas antara pemesanan hari dan bulan, tetapi sedikit lebih kaku untuk digunakan.

Anda harus melihat Datejs .

Datejs adalah Perpustakaan Tanggal JavaScript sumber terbuka.

Komprehensif, namun sederhana, tersembunyi, dan cepat. Datejs telah melewati semua ujian dan siap untuk menyerang. Datejs tidak hanya mengurai string, ia memotongnya dengan rapi menjadi dua.

Saya bermasalah dengan banyaknya solusi daripada mendesain. OP berkata, "Saya ingin tahu solusi apa yang paling berguna dan bebas masalah, jadi pengguna tidak akan bingung sama sekali." Jadi apakah itu jQuery atau JavaScript atau C # atau FORTRAN, desainnya penting - dan desain UX-nya, bukan desain UI yang penting di sini. (Permohonan lain untuk menghindari konstruksi "UX / UI" yang salah dan tidak logis).

Gunakan input teks. Gunakan tiga kotak terpisah berlabel Hari, Bulan, dan Tahun (atau Bulan, Hari, dan Tahun). Izinkan pengguna mengetik tanggal. Mencampur teks dan daftar dalam interaksi yang sama adalah Hal yang Buruk (jangan gunakan input teks untuk tahun tetapi pemilih tanggal atau daftar untuk bulan dan hari, misalnya).

Gunakan satu bidang teks yang menggunakan petunjuk format dalam bidang, misalnya, [hari / bulan / tahun] Jangan memerlukan format terlalu kaku. Jika pengguna mengetik JUN di tempat yang Anda harapkan satu bulan, gunakan Juni di bagian belakang. Jika pengguna mengetik 6 di tempat yang Anda harapkan sebulan, gunakan Juni di bagian belakang. Jika pengguna mengetik 06 di tempat yang Anda harapkan satu bulan, maka gunakan Juni di bagian belakang.

Gunakan Occam's Razor sebagai panduan (pada dasarnya, sebagian besar data akan cukup akurat). Kurangi gesekan kognitif (jangan buat pengguna berpikir).

Saya juga merekomendasikan kombinasi DatePicker dan bidang

Lihat demo ini , di mana pemilih tanggal mencerminkan tanggal yang dimasukkan ke dalam bidang oleh pengguna.
Namun ini didasarkan pada DatePicker menggunakan Prototype dan Scriptaculous . Saya menyebutkannya untuk tujuan ilustrasi.

Saya telah mencoba datePicker dengan pengguna saya, tetapi ternyata UI yang buruk bagi mereka. Yang akhirnya saya lakukan berdasarkan permintaan mereka adalah memiliki 3 kotak teks tempat mereka dapat mengetik [hari] [bulan] [tahun] dengan cepat :(

Letakkan keduanya dan buat satu sama lain memperbarui. Jika pengguna memilih tanggal dari pemilih data, mudah untuk memperbaiki kesalahan klik kecil di bidang teks atau memvisualisasikan pilihan yang Anda ketikkan ke dalam bidang teks di pemilih data.

Mengapa Anda tidak menguji ketiganya dan memilih salah satu yang berkinerja terbaik? Ini sepertinya kandidat yang baik untuk diuji oleh Google Pengoptimal Situs Web .

Mungkin jenis pengguna yang Anda miliki, atau jenis situs yang Anda jalankan mungkin menentukan bahwa solusi Anda harus berbeda dari "norma".

Saya biasanya menggunakan keduanya - datepicker yang mengisi bidang teks dalam format yang benar. Pengguna mahir dapat mengedit textfield secara langsung, pengguna yang menyukai mouse dapat memilih menggunakan datepicker.

Jika Anda khawatir tentang ruang, saya biasanya hanya memiliki bidang teks dengan ikon kalender kecil di sebelahnya. Jika Anda mengklik ikon kalender, ini akan menampilkan datepicker sebagai popup.

Juga menurut saya praktik yang baik untuk mengisi sebelumnya bidang teks dengan teks yang menunjukkan format yang benar (yaitu: "DD / MM / YYYY"). Ketika pengguna memfokuskan bidang teks, teks itu menghilang sehingga mereka dapat memasukkannya sendiri.

Sebagai salah satu orang tua di sini, dan lahir di akhir bulan, saya merasa menu drop-down untuk tanggal lahir membuat saya frustrasi. Saya biasanya harus menggulir ke bawah pada dua menu drop-down, dan itu canggung. Saya lebih suka mengetiknya.

Jika Anda dapat memiliki kontrol yang dirancang agar dapat menerima menu drop-down atau diketik, dan memperjelas keduanya berfungsi, itu akan sangat baik.

Apakah akan menggunakan datepicker atau tidak, saya pikir tergantung pada berapa lama tanggal tersebut. Jika mereka biasanya pada bulan ini, dan hampir tidak pernah lebih dari beberapa bulan, dan Anda tahu bahwa Javascript akan ada, sebuah datepicker adalah baik. Jika tanggalnya bukan yang terbaru (katakanlah, tanggal lahir) saya pikir ini adalah pilihan terbaik:

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

Perhatikan bahwa ini berbeda dengan jawaban Patrick McElhaney karena tahun adalah kotak teks, bukan dropdown . Memilih nomor dari kotak drop-down yang panjangnya ratusan elemen sangat mengganggu pengguna.

Saya pikir seorang pemilih tanggal hanya membuat langkah yang lebih rumit untuk memasukkan tanggal lahir seseorang.

Seperti yang telah disebutkan, kombinasi daftar drop untuk hari dan bulan dengan kotak teks untuk tahun tampaknya paling efisien untuk pengguna. Hanya perlu kurang dari 10 detik untuk memasukkan tanggal lahir dengan cara ini, yang jauh lebih cepat daripada alat pilih tanggal: berkat tombol tab (yang harus dipelajari oleh semua pengguna untuk mengisi formulir), cepat untuk beralih dari satu formulir elemen ke yang berikutnya.

Setidaknya di bawah Macintosh (Saya tidak tahu tentang Windows), Anda juga dapat menggunakan keyboard untuk mengakses tanggal di dalam kotak pilih: berkat tombol tab, Anda mendapatkan fokus ke elemen formulir, lalu tekan tombol panah untuk drop down daftar, lalu ketik misalnya 1967 dan Anda sampai di sana dalam sekejap mata…

Saya lebih suka datepicker (dan kotak input dengan format terdokumentasi sebagai fall-back) untuk situs internasional.

Format tanggal bervariasi dan terkadang sulit dibaca jika Anda sekarang sudah terbiasa. Sayang sekali banyak orang tidak nyaman dengan ISO 8601. :-(

Saya akan menyarankan menggunakan menu drop-down untuk setiap bidang, pastikan untuk memberi label masing-masing sebagai hari, bulan dan tahun. Pemilih tanggal mungkin juga membantu, tetapi jika pengguna tidak mengaktifkan JavaScript, ini tidak akan berfungsi.

Saya akan mengambil DatePicker. Ini adalah satu-satunya komponen yang memungkinkan pengguna ahli untuk memasukkannya secara manual dan memandu pemula untuk memasukkan tanggal dengan sangat mudah.

Kalender seharusnya tidak muncul jika Anda masuk dengan menekan tab, tetapi mengklik tombol. Jadi tidak ada pengguna ahli yang kesal.

Siapa yang tidak Anda gunakan jQuery UI DatePicker?

Ini dapat dikonfigurasi untuk memenuhi hampir semua kebutuhan. Satu-satunya downside adalah jika Anda memasukkannya dengan jQuery UI, ia memiliki footprint yang agak besar ..

Memperbarui

Beberapa ukuran file tampaknya telah berubah, sehingga diperbarui di bawah ini. Ingatlah bahwa nomor ini hanya akan benar pada saat terakhir diperbarui. Banyak hal mungkin telah berubah sejak itu.

• Tema CSS - 23kb
• jQuery UI - 71kb diminimalkan
• DatePicker - 38kb
• Ditambah beberapa gambar (bulan depan / bulan sebelumnya, yang saya yakin sprited)

Tapi itu tidak terlalu buruk ...

JQueryUI datetime picker adalah opsi terbaik karena memungkinkan pengguna pro untuk memasukkan nilai mereka sendiri di kotak teks atau mereka dapat memilihnya dari picker.

Menyiapkan picker untuk memungkinkan memasukkan ulang tahun atau tanggal mendatang dengan mudah juga cukup mudah:

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

ini menunjukkan sesuatu seperti ini (tidak dapat memposting foto karena saya pengguna baru: http://klalex.com/wp-content/uploads/2009/07/picture-1.png )

dan yearRange menunjukkan tanggal dari DateTime.Now.Year - 100 hingga DateTime.Now.Year + 50

menemukan ini di: http://klalex.com/2009/07/jquery-ui-datepicker-for-birth-date-input/

Saya baru saja menemukan plugin di JSFiddle. Dua kemungkinan alternatif: 1 masukan tunggal ATAU 3 masukan, tetapi terlihat seperti satu masukan ... (gunakan tombol Tab untuk beralih ke masukan berikutnya)

[link] http://jsfiddle.net/davidelrizzo/c8ASE/ Sepertinya menarik!

Saya rasa Anda bisa mencoba plugin birthdaypicker ,

Anda dapat menggunakan plugin cxcalendar . Sepertinya pemilih data lainnya. tetapi Anda dapat memilih tahun dan bulan setelah mengklik judul tahun-bulan.

Saya membuat tiga dropdown untuk pemilihan Tanggal Lahir dan jumlah hari berubah secara dinamis berdasarkan pemilihan tahun dan bulan. http://jsfiddle.net/ravitejagunda/FH4VB/10/

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