UI ที่ดีที่สุดสำหรับการป้อนวันเดือนปีเกิดคืออะไร? [ปิด]

วิธีที่ดีที่สุดสำหรับตัวเลือกวันเดือนปีเกิดคืออะไร?

• อินพุตข้อความ 3 ช่อง (เดือน / วัน / ปี) หรืออินพุตหน้ากากเดียว ผู้ใช้ต้องใช้แป้นพิมพ์
• 3 ช่องเลือก ผู้ใช้สามารถใช้แป้นพิมพ์หรือเมาส์
• หนึ่งที่ดีdatepicker

ฉันต้องการทราบว่าอะไรเป็นวิธีแก้ปัญหาที่ใช้งานได้และไม่มีปัญหามากที่สุดดังนั้นผู้ใช้จะไม่สับสนเลย

สำหรับการป้อนข้อความของผู้ใช้ขั้นสูงนั้นดีที่สุดถ้าผู้ใช้รู้รูปแบบวันที่จะเร็วมาก สำหรับผู้ใช้ขั้นสูงฉันแนะนำให้ใช้ datepicker เนื่องจากโดยปกติแล้วคุณมีผู้ใช้ขั้นสูงและไม่ใช่ขั้นสูงด้วยฉันขอแนะนำให้ใช้การป้อนข้อความและ datepicker ร่วมกัน

หากเป้าหมายของคุณคือการทำให้แน่ใจว่า "ผู้ใช้จะไม่สับสนเลย" ฉันคิดว่านี่เป็นตัวเลือกที่ดีที่สุด

ฉันจะไม่แนะนำ datepicker สำหรับวันเดือนปีเกิด ก่อนอื่นคุณต้องเรียกดูปี (คลิกคลิกคลิก ... ) จากนั้นไปที่เดือน (คลิกเพิ่มเติม) จากนั้นค้นหาและคลิกตัวเลขเล็ก ๆ บนเส้นตาราง

Datepickers มีประโยชน์เมื่อคุณไม่ทราบวันที่ที่แน่นอนจากด้านบนของศีรษะเช่นคุณกำลังวางแผนการเดินทางในสัปดาห์ที่สองของเดือนกุมภาพันธ์

แม้ว่านี่จะเป็นคำถามที่เก่ามาก แต่การป้อนข้อมูลวันเดือนปีเกิดให้ถูกต้องเป็นเรื่องสำคัญโดยเฉพาะในแบบฟอร์มการลงทะเบียน

ฉันคิดว่าไม่มีใครทำได้ดีไปกว่าการสมัครบัญชี Google:

เลือกเดือนแรกจากกล่องเลือกและพิมพ์วันที่และปีด้วยตนเอง เรียบง่าย

ตรวจสอบได้ง่าย ง่ายสำหรับผู้ใช้ที่ถูกต้อง ไม่มีการเลื่อนปีย้อนกลับในกล่องเลือกจากปี 1900 ถึงปีปัจจุบัน ไม่จำเป็นต้องอัปเดตช่องเลือก "วัน" ตามข้อมูลเดือน ใช้งานได้ดีบนเว็บ ใช้งานได้ดีบนมือถือ ใช้ได้กับทุกพื้นที่เช่น 01/10/2014 - วันที่ 1 ตุลาคมหรือ 10 มกราคม ฉันคาดว่าเราจะได้เห็นรูปแบบตัวเลือกวันเกิดนี้มากขึ้นในอนาคต

datepicker เป็นเพียงทางออกที่ไม่ดีในทุกๆด้าน คลิกมากมาย! ในความคิดของฉัน datepicker มีประโยชน์ก็ต่อเมื่อการรู้วันในสัปดาห์เป็นสิ่งสำคัญเช่นการจองตั๋ว

อัปเดต 2/6/2559:ฉันมาจากสหราชอาณาจักรดังนั้นฉันจึงคุ้นเคยกับรูปแบบวัน / เดือน / ปีมากกว่าเดือน / วัน / ปี อย่างไรก็ตามผู้ใช้ที่จะใช้เคอร์เซอร์เพื่อเลือกเดือนฉันเชื่อว่าการเลือกกล่องก่อนนั้นง่ายกว่ามากแทนที่จะไปที่อินพุต> กล่องเลือก> อินพุต วันที่แสดงความคิดเห็นคือ 2 มิถุนายนไม่ใช่ 6 กุมภาพันธ์)

ดังที่ได้กล่าวไว้ในบทความของ Jakob Nielsenควรหลีกเลี่ยงรายการแบบหล่นลงสำหรับข้อมูลที่ผู้ใช้รู้จักกันดี :

เมนูข้อมูลที่ผู้ใช้รู้จักกันดีเช่นเดือนและปีเกิด ข้อมูลดังกล่าวมักจะเดินสายไปที่นิ้วของผู้ใช้และการเลือกตัวเลือกดังกล่าวจากเมนูจะทำลายกระบวนทัศน์มาตรฐานในการป้อนข้อมูลและยังสามารถสร้างงานให้กับผู้ใช้ได้มากขึ้น

ทางออกที่ดีอาจเป็นไปได้บางสิ่งบางอย่างเช่นต่อไปนี้:

• จัดเตรียมกล่องข้อความแยกกัน 3 ช่องสำหรับวันเดือนและปี (ติดป้ายกำกับอย่างเหมาะสม)
• จัดเรียงกล่องข้อความตามวัฒนธรรมของผู้ใช้
• กล่องข้อความวันและเดือนควรมีขนาดเพื่อให้ถือว่าอินพุตเป็นตัวเลข 2 หลัก
• กล่องข้อความปีควรมีขนาดเพื่อให้ถือว่าปีเป็นตัวเลข 4 หลัก
• อนุญาตให้ผู้ใช้ป้อนปี 2 หรือ 4 หลัก สมมติว่าปี 2 หลักคือ 1900 และอัปเดตกล่องข้อความเพื่อแสดงสิ่งนี้บนเบลอ (หรือในขั้นตอนการยืนยันต่อไปนี้)
• อนุญาตให้ผู้ใช้ป้อนหมายเลขเดือนหรือชื่อเดือน

แก้ไข: นี่คือวิธีที่เราใช้งานตัวเลือก DOB ของเรา: ช่องป้อนข้อความที่มาสก์ด้วย HTML5 regex เพื่อบังคับแป้นพิมพ์ตัวเลขบนอุปกรณ์ iOS

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

วันเกิดแตกต่างจากวันที่อื่น ๆ เนื่องจากผู้คนมักคุ้นเคยกับการพิมพ์วันเกิดเฉพาะของตน กล่องข้อความด้วยตัวอย่างที่ชัดเจนรวดเร็วและง่ายต่อการใส่:

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

สิ่งนี้ควรรองรับการจัดรูปแบบที่ยืดหยุ่นเช่น 1/1/1970 หรือ 20/07/70

หากคุณต้องสนับสนุนวัฒนธรรมที่แตกต่างกันโดยมีการกำหนดวันที่ที่แตกต่างกัน (เช่นสหรัฐอเมริกาและสหราชอาณาจักร) สิ่งนี้อาจเกิดข้อผิดพลาดได้สำหรับผู้ที่ไม่สนใจตัวอย่าง เพื่อหลีกเลี่ยงนี้คุณสามารถใช้รายการเลือกสำหรับเดือนและกล่องข้อความสำหรับวันที่และปี

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

วิธีนี้ช่วยขจัดความคลุมเครือระหว่างการสั่งซื้อแบบวันและเดือน แต่ใช้งานง่ายกว่าเล็กน้อย

คุณควรจะดูที่Datejs

Datejs เป็นไลบรารีวันที่ JavaScript แบบโอเพ่นซอร์ส

ครอบคลุม แต่เรียบง่ายลอบเร้นและรวดเร็ว Datejs ผ่านการทดลองทั้งหมดและพร้อมที่จะหยุดงาน Datejs ไม่เพียง แต่แยกวิเคราะห์สตริง แต่จะแบ่งออกเป็นสองส่วน

ฉันกังวลกับความเหนือกว่าของการแก้ปัญหาแทนที่จะออกแบบ OP กล่าวว่า "ฉันต้องการทราบว่าอะไรคือโซลูชันที่ใช้งานง่ายที่สุดและไม่มีปัญหาดังนั้นผู้ใช้จะไม่สับสนเลย" ดังนั้นไม่ว่าจะเป็น jQuery หรือ JavaScript หรือ C # หรือ FORTRAN การออกแบบจึงมีความสำคัญและเป็นการออกแบบ UX ไม่ใช่การออกแบบ UI ที่สำคัญที่นี่ (ข้ออ้างอื่นเพื่อหลีกเลี่ยงโครงสร้าง "UX / UI" ที่ไม่ถูกต้องและไร้เหตุผล)

ใช้การป้อนข้อความ ใช้ช่องสามช่องที่มีข้อความวันเดือนและปี (หรือเดือนวันและปี) ให้ผู้ใช้พิมพ์วันที่ การผสมข้อความและรายการในการโต้ตอบเดียวกันเป็นสิ่งที่ไม่ดี (อย่าใช้การป้อนข้อความสำหรับปี แต่เป็นตัวเลือกวันที่หรือรายการสำหรับเดือนและวันเป็นต้น)

ใช้ช่องข้อความเดียวที่ใช้คำแนะนำรูปแบบในช่องตัวอย่างเช่น [วัน / เดือน / ปี] ไม่ต้องใช้รูปแบบที่เข้มงวดเกินไป หากผู้ใช้พิมพ์ JUN ในตำแหน่งที่คุณคาดว่าจะเป็นเดือนให้ใช้เดือนมิถุนายนที่ด้านหลัง หากผู้ใช้พิมพ์ 6 ในตำแหน่งที่คุณคาดว่าจะเป็นเดือนให้ใช้มิถุนายนต่อท้าย หากผู้ใช้พิมพ์ 06 ในตำแหน่งที่คุณคาดว่าจะเป็นเดือนให้ใช้ June ต่อท้าย

ใช้มีดโกนของ Occam เป็นแนวทาง (โดยส่วนใหญ่แล้วข้อมูลจะแม่นยำเพียงพอ) ลดแรงเสียดทานทางปัญญา (อย่าทำให้ผู้ใช้คิด)

ฉันขอแนะนำการรวมกันของ DatePicker และเขตข้อมูล

ดูการสาธิตนี้โดยตัวเลือกวันที่จะแสดงวันที่ที่ผู้ใช้ป้อนในฟิลด์
อย่างไรก็ตามมันขึ้นอยู่กับDatePicker โดยใช้ Prototype และ Scriptaculousแม้ว่า ฉันพูดถึงเพื่อเป็นภาพประกอบ

ฉันได้ลอง datePicker กับผู้ใช้ของฉันแล้ว แต่กลับกลายเป็น UI ที่ไม่ดีสำหรับพวกเขา สิ่งที่ฉันได้รับจากคำขอของพวกเขาคือการมีช่องข้อความ 3 ช่องที่พวกเขาสามารถพิมพ์ [วัน] [เดือน] [ปี] :(

ใส่ทั้งสองอย่างและทำการอัปเดตซึ่งกันและกัน หากผู้ใช้เลือกวันที่จาก datepicker การแก้ไขการคลิกผิดเล็กน้อยในช่องข้อความนั้นทำได้ง่ายหรือแสดงภาพตัวเลือกที่คุณพิมพ์ลงในช่องข้อความใน datepicker

ทำไมคุณไม่ทดสอบทั้งสามและเลือกอันที่มีประสิทธิภาพดีที่สุด ดูเหมือนว่าตัวเลือกที่ดีสำหรับGoogle Website Optimizerในการทดสอบ

อาจเป็นไปได้ว่าประเภทของผู้ใช้ที่คุณมีหรือประเภทของไซต์ที่คุณใช้งานอยู่อาจกำหนดว่าโซลูชันของคุณควรแตกต่างจาก "บรรทัดฐาน"

ปกติฉันใช้ทั้งสองอย่าง - datepicker ที่เติมฟิลด์ข้อความในรูปแบบที่ถูกต้อง ผู้ใช้ขั้นสูงสามารถแก้ไขช่องข้อความได้โดยตรงผู้ใช้ที่ชอบใช้เมาส์สามารถเลือกได้โดยใช้ datepicker

หากคุณกังวลเกี่ยวกับพื้นที่ว่างฉันมักจะมีเพียงช่องข้อความที่มีไอคอนปฏิทินเล็ก ๆ อยู่ข้างๆ หากคุณคลิกที่ไอคอนปฏิทินจะแสดง datepicker เป็นป๊อปอัป

นอกจากนี้ฉันพบแนวทางปฏิบัติที่ดีในการเติมฟิลด์ข้อความล่วงหน้าด้วยข้อความที่ระบุรูปแบบที่ถูกต้อง (เช่น: "DD / MM / YYYY") เมื่อผู้ใช้โฟกัสไปที่ช่องข้อความข้อความนั้นจะหายไปเพื่อให้ป้อนข้อมูลได้เอง

เนื่องจากอาจเป็นผู้สูงอายุคนหนึ่งที่นี่และเกิดในช่วงปลายเดือนฉันพบว่าเมนูแบบเลื่อนลงสำหรับวันเกิดที่น่าหงุดหงิด ปกติฉันจะต้องเลื่อนลงบนเมนูแบบเลื่อนลงสองเมนูและมันก็น่าอึดอัด ฉันค่อนข้างจะพิมพ์ลงไป

หากคุณสามารถมีตัวควบคุมที่ออกแบบมาเพื่อให้สามารถยอมรับเมนูแบบเลื่อนลงหรือพิมพ์ลงไปและทำให้ชัดเจนทั้งสองอย่างก็จะดีมาก

ไม่ว่าจะใช้ datepicker หรือไม่ฉันคิดว่าขึ้นอยู่กับระยะเวลาที่ผ่านมา หากโดยปกติแล้วจะอยู่ในเดือนปัจจุบันและเกือบจะไม่เกินสองสามเดือนและคุณรู้ว่า Javascript จะอยู่ใกล้ ๆ datepicker ก็เป็นสิ่งที่ดี หากวันที่ไม่ใช่วันที่ล่าสุด (เช่นวันเกิด) ฉันคิดว่านี่เป็นตัวเลือกที่ดีที่สุด:

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

หมายเหตุว่านี่คือคำตอบที่แตกต่างจากแพทริค McElhaney ในที่ปีเป็นกล่องข้อความไม่ได้เป็นแบบเลื่อนลง การเลือกตัวเลขจากกล่องแบบเลื่อนลงที่มีความยาวหลายร้อยองค์ประกอบเป็นเรื่องที่น่ารำคาญมากสำหรับผู้ใช้

ฉันคิดว่าเครื่องมือเลือกวันที่ทำให้การย้ายซับซ้อนขึ้นเพื่อป้อนวันเดือนปีเกิด

ดังที่ได้กล่าวไปแล้วการรวมรายการแบบเลื่อนสำหรับวันและเดือนพร้อมกล่องข้อความสำหรับปีดูเหมือนจะมีประสิทธิภาพมากที่สุดสำหรับผู้ใช้ ใช้เวลาเพียงไม่ถึง 10 วินาทีในการป้อนวันเดือนปีเกิดด้วยวิธีนี้ซึ่งเร็วกว่าตัวเลือกวันที่มาก: ด้วยปุ่มแท็บ (ซึ่งผู้ใช้ทุกคนควรเรียนรู้ที่จะใช้เพื่อกรอกแบบฟอร์ม) ทำให้ไปจากแบบฟอร์มเดียวได้อย่างรวดเร็ว องค์ประกอบต่อไป

อย่างน้อยใน Macintosh (ฉันไม่รู้เกี่ยวกับ Windows) คุณยังสามารถใช้แป้นพิมพ์เพื่อเข้าถึงวันที่ภายในกล่องเลือกได้ด้วยปุ่มแท็บคุณจะได้รับโฟกัสไปที่องค์ประกอบแบบฟอร์มจากนั้นกดปุ่มลูกศรเพื่อเลื่อนลง จากนั้นพิมพ์เช่น 1967 และคุณจะไปถึงที่นั่นในพริบตา ...

ฉันต้องการ datepicker (และช่องป้อนข้อมูลที่มีรูปแบบเอกสารเป็นด้านหลัง) สำหรับไซต์ระหว่างประเทศ

รูปแบบวันที่แตกต่างกันไปและบางครั้งก็ยากที่จะอ่านหากคุณคุ้นเคยกับมันแล้ว น่าเสียดายที่หลายคนไม่พอใจกับ ISO 8601 :-(

ฉันขอแนะนำให้ใช้เมนูแบบเลื่อนลงสำหรับแต่ละช่องอย่าลืมติดป้ายกำกับเป็นวันเดือนและปี เครื่องมือเลือกวันที่อาจช่วยได้เช่นกัน แต่หากผู้ใช้ไม่ได้เปิดใช้งาน JavaScript ก็จะไม่ทำงาน

ฉันจะใช้ DatePicker เป็นส่วนประกอบเดียวที่อนุญาตให้ผู้ใช้ผู้เชี่ยวชาญป้อนข้อมูลด้วยตนเองและแนะนำให้มือใหม่ป้อนวันที่ได้ง่ายมาก

ปฏิทินไม่ควรปรากฏขึ้นหากคุณเข้าสู่โดยกดแท็บ แต่คลิกที่ปุ่ม ดังนั้นจึงไม่มีผู้ใช้ที่เชี่ยวชาญรำคาญมัน

คุณไม่ใช้ jQuery UI DatePicker ใคร

สามารถกำหนดค่าได้เพื่อให้เหมาะกับความต้องการ ข้อเสียเพียงอย่างเดียวคือถ้าคุณใส่ jQuery UI ด้วยมันมีขนาดค่อนข้างใหญ่ ..

อัปเดต

ขนาดไฟล์บางส่วนมีการเปลี่ยนแปลงดังนั้นจึงมีการอัปเดตด้านล่าง โปรดทราบว่าตัวเลขเหล่านี้จะถูกต้องในช่วงเวลาที่อัปเดตล่าสุดเท่านั้น สิ่งต่างๆอาจมีการเปลี่ยนแปลงตั้งแต่นั้นมา

• ธีม CSS - 23kb
• jQuery UI - ลดขนาด 71kb
• DatePicker - 38kb
• บวกสองสามภาพ (เดือนหน้า / เดือนก่อนหน้าซึ่งฉันค่อนข้างมั่นใจว่าเป็นสไปรท์)

แต่นั่นก็ไม่เลวร้ายเกินไป ...

ตัวเลือกวันที่และเวลาของ JQueryUI เป็นตัวเลือกที่ดีที่สุดเนื่องจากอนุญาตให้ผู้ใช้ระดับมืออาชีพป้อนค่าของตนเองในกล่องข้อความหรือสามารถเลือกได้จากตัวเลือก

การตั้งค่าตัวเลือกเพื่อให้ป้อนวันเกิดหรือวันที่ในอนาคตได้อย่างง่ายดายก็ค่อนข้างง่ายเช่นกัน:

$ ('# datepicker'). datepicker ({
    changeMonth: จริง
    เปลี่ยนปี: จริง
    yearRange: '-100: +50'
});

สิ่งนี้แสดงสิ่งนี้ (ไม่สามารถโพสต์รูปภาพได้เนื่องจากฉันเป็นผู้ใช้ใหม่: http://klalex.com/wp-content/uploads/2009/07/picture-1.png )

และ yearRange แสดงวันที่ตั้งแต่ DateTime.Now ปี - 100 ถึง DateTime.Now ปี + 50

พบสิ่งนี้เมื่อ: http://klalex.com/2009/07/jquery-ui-datepicker-for-birth-date-input/

ฉันเพิ่งค้นพบปลั๊กอินใน JSFiddle สองทางเลือกที่เป็นไปได้: 1 อินพุตเดียวหรือ 3 อินพุต แต่ดูเหมือนอินพุตเดียว ... (ใช้ปุ่ม Tab เพื่อไปที่อินพุตถัดไป)

[ลิงค์] http://jsfiddle.net/davidelrizzo/c8ASE/ น่าดู!

ฉันคิดว่าคุณสามารถลองปลั๊กอินbirthdaypicker ,

คุณสามารถใช้ปลั๊กอินcxcalendar ดูเหมือนว่า datepicker อื่น ๆ แต่คุณสามารถเลือกปีและเดือนได้หลังจากคลิกชื่อปี - เดือน

ฉันสร้างรายการแบบเลื่อนลงสามรายการสำหรับการเลือกวันเดือนปีเกิดและจำนวนวันที่เปลี่ยนแปลงแบบไดนามิกตามการเลือกปีและเดือน http://jsfiddle.net/ravitejagunda/FH4VB/10/

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