Doğum tarihini girmek için en iyi kullanıcı arayüzü nedir? [kapalı]

Doğum tarihi seçimi için en iyi yöntem nedir?

• 3 metin girişi (ay / gün / yıl) veya bir maske girişi. Kullanıcı klavye kullanmalıdır
• 3 seçim kutusu. Kullanıcı klavye veya fareyi kullanabilir.
• Güzel bir tarih seçici .

En kullanışlı ve sorunsuz çözümün ne olduğunu bilmek istiyorum, böylece kullanıcının kafası karışmasın.

Gelişmiş bir kullanıcı için metin girişi en iyisidir, kullanıcı tarih biçimini biliyorsa, çok hızlıdır. Çok gelişmiş olmayan bir kullanıcı için bir tarih seçici kullanmanızı öneririm. Genellikle ileri düzey ve ileri düzey kullanıcılarınız olduğundan, metin girişi ve tarih seçici kombinasyonunu öneririm.

Amacınız "kullanıcının kafasının karışmayacağından" emin olmaksa, bunun en iyi seçenek olduğunu düşünüyorum.

Doğum tarihi için bir tarih seçici önermem . Önce yıla göz atmanız (tıklayın, tıklayın, tıklayın…), ardından aya (biraz daha tıklayın) ve ardından ızgaradaki küçük sayıyı bulup tıklayın.

Datepickers, tam olarak tarihi tam olarak bilmediğiniz, örneğin Şubat ayının ikinci haftası için bir seyahat planlıyorsanız kullanışlıdır.

Bu çok eski bir soru olsa da, özellikle bir kayıt formunda doğum tarihinin doğru girilmesi için çok önemlidir.

Bence bunu google hesaplarına kaydolmaktan daha iyi yapmadı:

Seçim kutusundan önce ayı seçin ve tarihi ve yılı manuel olarak yazın. Basit.

Doğrulaması kolay. Kullanıcıların doğru anlaması kolay. Seçme kutusunda 1900'den günümüze kadar olan yılları geri almak yok. Ay girişine göre bir 'gün' seçim kutusunu güncellemenize gerek yoktur. Web'de harika çalışıyor. Mobil cihazlarda harika çalışıyor. Tüm yerel ayarlar için çalışır, örn. 01/10/2014 - bu 1 Ekim mi yoksa 10 Ocak mı? Bu doğum günü seçici biçimini gelecekte çok daha fazla göreceğimizi umuyorum.

Tarih seçici, her yönüyle kötü bir çözümdür. Çok fazla tıklama! Bana göre, bir tarih seçici, yalnızca haftanın gününün önemli olduğunu bildiğinde, örneğin bilet rezervasyonu yaparken kullanışlıdır.

Güncelleme 2/6/2016: İngiltere'den geliyorum, bu yüzden ay / gün / yıl yerine gün / ay / yıl formatlarına daha aşinayım. Bununla birlikte, ayı seçmek için imleci kullanacak kullanıcılar, giriş> seçim kutusu> giriş'e gitmek yerine önce seçim kutusuna sahip olmanın çok daha kolay olduğuna inanıyorum. Yorum tarihi 6 Şubat değil 2 Haziran'dır;)

Bu Jakob Nielsen makalesinde belirtildiği gibi , kullanıcı tarafından iyi bilinen veriler için açılır listelerden kaçınılmalıdır :

Kullanıcıların iyi bildiği doğum ayı ve yılı gibi veri menüleri. Bu tür bilgiler genellikle kullanıcıların parmaklarına bağlanır ve bir menüden bu tür seçenekleri seçmek zorunda kalmak, bilgi girişi için standart paradigmayı kırar ve hatta kullanıcılar için daha fazla çalışma yaratabilir.

İdeal çözüm muhtemelen aşağıdaki gibi bir şeydir :

• Gün, ay ve yıl için 3 ayrı metin kutusu sağlayın (uygun şekilde etiketlenmiş)
• Metin kutularını kullanıcının kültürüne göre sıralayın.
• Gün ve Ay metin kutuları, 2 basamaklı bir giriş varsayılacak şekilde boyutlandırılmalıdır.
• Yıl metin kutusu, 4 basamaklı bir yıl varsayılacak şekilde boyutlandırılmalıdır.
• Kullanıcının 2 veya 4 basamaklı bir yıl girmesine izin verin. 2 basamaklı bir yılın 1900 olduğunu varsayın ve metin kutusunu bunu Bulanıklaştırmayı yansıtacak şekilde (veya sonraki bir onay adımında) güncelleyin.
• Kullanıcının bir ay numarası VEYA ay adı girmesine izin verin.

DÜZENLEME: iOS cihazlarda sayısal klavyeyi zorlamak için DOB seçicimizi şu şekilde uyguladık: HTML5 regex ile maskelenmiş metin giriş alanı.

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

Doğum tarihleri ​​diğer tarihlerden farklıdır çünkü insanlar genellikle belirli doğum tarihlerini yazmaya alışkındır.
Bir örnek ile metin kutusu , berrak ve hızlı girmek kolaydır:

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

Bu, 1/1/1970 veya 20/07/70 gibi esnek biçimlendirmeyi desteklemelidir.

Farklı tarih kurallarına sahip farklı kültürleri desteklemeniz gerekiyorsa (örn. ABD ve İngiltere), bu, örneğe aldırış etmeyen insanlar için hataya açık olabilir. Bundan kaçınmak
için, ay için bir seçim listesi ve tarih ve yıl için metin kutuları kullanabilirsiniz .

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

Bu, gün ve ay siparişleri arasındaki belirsizliği ortadan kaldırır, ancak kullanımı biraz daha zordur.

Datejs'e bir göz atmalısınız .

Datejs, açık kaynaklı bir JavaScript Tarih Kitaplığıdır.

Kapsamlı, ancak basit, gizli ve hızlı. Datejs tüm davaları geçti ve grev yapmaya hazır. Datejs dizeleri yalnızca ayrıştırmakla kalmaz, onları temiz bir şekilde ikiye böler.

Tasarlamak yerine çözüm üretmenin üstünlüğü beni rahatsız ediyor. OP, "En kullanışlı ve sorunsuz çözümün ne olduğunu bilmek istiyorum, böylece kullanıcının kafası karışmayacak." Dedi. Yani jQuery veya JavaScript veya C # veya FORTRAN olsun, tasarım önemlidir - ve burada önemli olan UI tasarımı değil, UX tasarımıdır. (Yanlış ve mantıksız "UX / UI" yapısından kaçınmak için başka bir savunma).

Metin girişini kullanın. Gün, Ay ve Yıl (veya Ay, Gün ve Yıl) etiketli üç ayrı kutu kullanın. Kullanıcıların tarihleri ​​yazmasına izin verin. Aynı etkileşimde metin ve listeleri karıştırmak Kötü Bir Şeydir (örneğin yıl için metin girişi kullanmayın, tarih seçici veya ay ve gün listeleri kullanın).

Alan içi biçim ipuçlarını kullanan tek bir metin alanı kullanın, örneğin, [gün / ay / yıl] Biçimleri çok katı bir şekilde gerektirmeyin. Bir kullanıcı bir ay beklediğiniz yere JUN yazarsa, arka uçta Haziran'ı kullanın. Bir kullanıcı bir ay beklediğiniz yerde 6 yazarsa, arka uç için Haziran'ı kullanın. Bir kullanıcı bir ay beklediğiniz yerde 06 yazarsa, arka uçta Haziran'ı kullanın.

Occam's Razor'ı kılavuz olarak kullanın (aslında, veriler çoğu zaman yeterince doğru olacaktır). Bilişsel sürtüşmeyi azaltın (kullanıcıları düşündürmeyin).

DatePicker ve alanların kombinasyonunu da tavsiye ederim

Tarih seçicinin, kullanıcı tarafından alanlara girilen tarihi yansıttığı bu demoya bakın .
Bununla birlikte, Prototype ve Scriptaculous kullanan bir DatePicker'a dayanmaktadır . Örnekleme amacıyla bundan bahsediyorum.

Kullanıcımla datePicker'ı denedim ama onlar için kötü bir kullanıcı arayüzü olduğu ortaya çıktı. Onların isteklerine dayandığım şey, hızlı bir şekilde [gün] [ay] [yıl] yazabilecekleri 3 metin kutusuna sahip olmaktır :(

İkisini de koyun ve her birini diğerini güncelleyin. Kullanıcı tarih seçiciden tarihi seçerse, metin alanındaki küçük bir yanlış tıklamayı düzeltmek veya tarih seçicide metin alanına yazdığınız seçimi görselleştirmek kolaydır.

Neden üçünü de test edip en iyi performansı gösteren birini seçmiyorsunuz? Bu, Google Web Sitesi Optimize Edici'nin test etmesi için iyi bir aday gibi görünüyor .

Sahip olduğunuz kullanıcı türü veya çalıştırdığınız site türü, çözümünüzün "norm" dan farklı olmasını gerektirebilir.

Normalde ikisini de kullanıyorum - bir metin alanını doğru biçimde dolduran bir tarih seçici. İleri düzey kullanıcılar metin alanını doğrudan düzenleyebilir, fareden memnun kullanıcılar ise tarih seçiciyi kullanarak seçim yapabilir.

Uzay konusunda endişeleniyorsanız, genellikle sadece yanında küçük bir takvim simgesi olan metin alanına sahibim. Takvim simgesine tıklarsanız, tarih seçiciyi bir açılır pencere olarak açar.

Ayrıca, metin alanını doğru biçimi gösteren metinle önceden doldurmanın iyi bir uygulama olduğunu düşünüyorum (yani: "GG / AA / YYYY"). Kullanıcı metin alanına odaklandığında, metin kaybolur, böylece kendi alanlarına girebilirler.

Belki de buradaki yaşlılardan biri olarak ve ayın sonlarında doğmuş olarak, doğum tarihlerinin aşağı açılan menülerini sinir bozucu buluyorum. Genelde iki açılır menüyü aşağı kaydırmam gerekiyor ve bu garip. Yazmayı tercih ederim.

Açılır menüleri kabul edebilecek veya yazılabilecek şekilde tasarlanmış bir kontrolünüz varsa ve her iki işi de netleştirebilirseniz, bu mükemmel olur.

Bir tarih seçici kullanıp kullanmama sanırım tarihlerin ne kadar önce olduğuna bağlı. Tipik olarak bu ay içindeyse ve neredeyse hiç bir zaman birkaç aydan eski değilse ve Javascript'in yakında olacağını biliyorsanız, bir tarih seçici iyidir. Tarihler yakın değilse (mesela doğum tarihi), bunun en iyi seçenek olduğunu düşünüyorum:

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

Bunun Patrick McElhaney'nin cevabından farklı olduğunu , yılın bir açılır liste değil, bir metin kutusu olduğunu unutmayın . Açılır kutudan yüzlerce öğe uzunluğunda bir sayı seçmek, kullanıcı için çok can sıkıcıdır.

Bence bir tarih seçici, kişinin doğum tarihini girmek için hareketi daha karmaşık hale getiriyor.

Daha önce de belirtildiği gibi, günler ve aylar için açılan listelerin ve yıl için bir metin kutusunun kombinasyonu, bir kullanıcı için en verimli gibi görünüyor. Bu şekilde bir doğum tarihini girmek 10 saniyeden daha kısa sürer, bu bir tarih seçiciden çok daha hızlıdır: sekme tuşu (tüm kullanıcıların bir formu doldurmak için kullanmayı öğrenmesi gereken) sayesinde, tek bir formdan hızla geçiş bir sonraki öğeye.

En azından Macintosh altında (Windows'u bilmiyorum), seçim kutularının içindeki tarihe erişmek için klavyeyi de kullanabilirsiniz: sekme tuşu sayesinde, odağı form öğesine alırsınız, ardından aşağı açmak için ok tuşuna basarsınız listeye örneğin 1967 yazın ve oraya göz açıp kapayıncaya kadar varırsınız…

Uluslararası bir site için bir tarih seçici (ve geri dönüş olarak belgelenmiş formatta bir giriş kutusu) tercih ederim.

Tarih biçimleri değişiklik gösterir ve bazen bunlara alışkınsanız okunması zordur. Çoğu insanın ISO 8601 ile rahat olmaması çok kötü. :-(

Her alan için bir açılır menü kullanmanızı öneririm, her birini gün, ay ve yıl olarak etiketlediğinizden emin olun. Bir tarih seçici de yardımcı olabilir, ancak kullanıcı JavaScript'i etkinleştirmemişse çalışmaz.

Bir DatePicker alırdım. Uzman kullanıcıların manuel olarak girmesine izin veren ve acemilere çok kolay bir tarih girmeleri için rehberlik eden tek bileşendir.

Sekmeye basarak, ancak bir düğmeye tıklayarak girerseniz, takvim açılmamalıdır. Yani hiçbir uzman kullanıcı bundan rahatsız olmuyor.

JQuery UI DatePicker'ı kim kullanmıyorsunuz?

Hemen hemen her ihtiyaca uyacak şekilde yapılandırılabilir. Tek dezavantajı, jQuery kullanıcı arayüzüne dahil ediyorsanız, biraz büyük bir ayak izine sahip olmasıdır.

Güncelleme

Bazı dosya boyutları değişmiş gibi görünmektedir, bu nedenle aşağıda güncellenmiştir. Bu numaraların yalnızca son güncellendikleri zaman için doğru olacağını unutmayın. O zamandan beri işler değişmiş olabilir.

• CSS teması - 23kb
• jQuery kullanıcı arayüzü - 71 kb küçültülmüş
• DatePicker - 38 kb
• Artı birkaç resim (gelecek ay / önceki ay, kesinlikle birbiriyle uyumlu olduğundan eminim)

Ama bu çok kötü değil ...

JQueryUI tarih saat seçici, profesyonel kullanıcıların metin kutusuna kendi değerlerini girmelerine veya seçiciden seçmelerine izin verdiği için en iyi seçenektir.

Seçiciyi doğum günlerinin veya gelecekteki tarihlerin kolayca girilmesine izin verecek şekilde ayarlamak da oldukça kolaydır:

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

bu, buna benzer bir şey gösterir (yeni kullanıcı olduğum için bir fotoğraf gönderemezsiniz: http://klalex.com/wp-content/uploads/2009/07/picture-1.png )

ve yearRange, DateTime.Now.Year - 100 ile DateTime.Now.Year + 50 arasındaki tarihleri ​​gösterir

bunu şurada buldu: http://klalex.com/2009/07/jquery-ui-datepicker-for-birth-date-input/

JSFiddle üzerinde bir eklenti keşfettim. Olası iki alternatif: 1 tek giriş VEYA 3 giriş, ancak tek bir giriş gibi görünüyor ... (sonraki girişe gitmek için Tab tuşunu kullanın)

[bağlantı] http://jsfiddle.net/davidelrizzo/c8ASE/ İlginç görünüyor!

Sana eklentisi deneyebilirsiniz düşünüyorum birthdaypicker ,

cxcalendar eklentisini kullanabilirsiniz . Diğer tarih seçici gibi görünüyor. ancak yıl-ay başlığına tıkladıktan sonra seçimde yılı ve ayı seçebilirsiniz.

Doğum Tarihi seçimi ve yıl ve ay seçimine göre dinamik olarak gün sayısı değişikliği için üç açılır menü oluşturdum. http://jsfiddle.net/ravitejagunda/FH4VB/10/

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