Giao diện người dùng tốt nhất để nhập ngày sinh là gì? [đóng cửa]

Phương pháp tốt nhất để chọn ngày sinh là gì?

• 3 đầu vào văn bản (tháng / ngày / năm) hoặc một đầu vào mặt nạ. Người dùng PHẢI sử dụng bàn phím
• 3 hộp chọn. Người dùng có thể sử dụng bàn phím hoặc chuột.
• Một đẹp datepicker .

Tôi muốn biết đâu là giải pháp hữu dụng nhất và không có vấn đề, vì vậy người dùng sẽ không bị nhầm lẫn.

Đối với người dùng nâng cao, nhập văn bản là tốt nhất, nếu người dùng biết định dạng ngày tháng, nó rất nhanh. Đối với người dùng không quá cao, tôi khuyên bạn nên sử dụng công cụ chọn ngày. Vì thông thường bạn cũng có người dùng nâng cao và không nâng cao, tôi đề xuất kết hợp giữa nhập văn bản và trình chọn ngày.

Nếu mục tiêu của bạn là đảm bảo "người dùng sẽ không bị nhầm lẫn gì cả", tôi nghĩ đây là lựa chọn tốt nhất.

Tôi sẽ không đề xuất một công cụ chọn ngày cho ngày sinh . Đầu tiên bạn phải duyệt đến năm (nhấp, nhấp, nhấp…), sau đó đến tháng (nhấp thêm một số), sau đó tìm và nhấp vào số nhỏ trên lưới.

Công cụ chọn ngày rất hữu ích khi bạn không biết chính xác ngày nào đó, ví dụ như bạn đang lên kế hoạch cho một chuyến đi vào tuần thứ hai của tháng Hai.

Mặc dù đây là một câu hỏi rất cũ, nhưng điều quan trọng là bạn phải điền đúng ngày tháng năm sinh, đặc biệt là trong mẫu đăng ký.

Tôi nghĩ không ai làm điều này tốt hơn các tài khoản google đã đăng ký:

Trước tiên, hãy chọn tháng từ một hộp chọn và nhập ngày và năm theo cách thủ công. Đơn giản.

Dễ dàng xác nhận. Dễ dàng cho người dùng để làm đúng. Không cuộn lại các năm trong một hộp chọn lọc từ năm 1900 đến năm nay. Không cần cập nhật hộp chọn 'ngày' dựa trên đầu vào tháng. Hoạt động tốt trên web. Hoạt động tốt trên thiết bị di động. Hoạt động cho tất cả các ngôn ngữ, ví dụ: 01/10/2014 - đó là ngày 1 tháng 10 hay ngày 10 tháng 1? Tôi hy vọng chúng ta sẽ thấy định dạng bộ chọn sinh nhật này nhiều hơn nữa trong tương lai.

Người chọn ngày chỉ là một giải pháp tồi. Rất nhiều nhấp chuột! Theo tôi, một người chọn ngày chỉ hữu ích khi biết ngày nào trong tuần là quan trọng, ví dụ như đặt vé.

Cập nhật 2/6/2016: Tôi đến từ Vương quốc Anh, vì vậy tôi quen với các định dạng ngày / tháng / năm hơn là tháng / ngày / năm. Tuy nhiên, những người dùng sẽ sử dụng con trỏ của họ để chọn tháng, tôi tin rằng việc có hộp chọn trước sẽ dễ dàng hơn nhiều so với việc nhập> hộp chọn> nhập. Ngày bình luận là ngày 2 tháng 6, không phải ngày 6 tháng 2;)

Như đã đề cập trong bài viết Jakob Nielsen này , nên tránh các danh sách thả xuống đối với dữ liệu mà người dùng biết rõ :

Menu dữ liệu được người dùng biết đến, chẳng hạn như tháng và năm sinh của họ. Những thông tin như vậy thường được người dùng đưa vào ngón tay và việc phải chọn các tùy chọn như vậy từ menu sẽ phá vỡ mô hình tiêu chuẩn để nhập thông tin và thậm chí có thể tạo ra nhiều công việc hơn cho người dùng.

Giải pháp lý tưởng là khả năng một cái gì đó như sau:

• Cung cấp 3 hộp văn bản riêng biệt cho ngày, tháng và năm (được gắn nhãn thích hợp)
• Sắp xếp các hộp văn bản theo văn hóa của người dùng.
• Hộp văn bản Ngày và Tháng phải được định kích thước sao cho giả định đầu vào gồm 2 chữ số.
• Hộp văn bản năm phải có kích thước sao cho năm có 4 chữ số được giả định.
• Cho phép người dùng nhập năm 2 hoặc 4 chữ số. Giả sử năm có 2 chữ số là 1900 và cập nhật hộp văn bản để phản ánh điều này onBlur (hoặc trên bước xác nhận sau).
• Cho phép người dùng nhập số tháng HOẶC tên tháng.

CHỈNH SỬA: Đây là cách chúng tôi triển khai bộ chọn DOB của mình: Trường nhập văn bản có mặt nạ với HTML5 regex để buộc bàn phím số trên thiết bị iOS.

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

Ngày sinh khác với các ngày khác vì mọi người thường quen với việc nhập ngày sinh cụ thể của họ.
Một hộp văn bản với một ví dụ rõ ràng, nhanh chóng và dễ dàng để nhập:

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

Điều này sẽ hỗ trợ định dạng linh hoạt như 1/1/1970 hoặc 20/07/70.

Nếu bạn phải ủng hộ các nền văn hóa khác nhau với các quy ước ngày tháng khác nhau (ví dụ như Hoa Kỳ và Vương quốc Anh) thì điều này có thể dễ xảy ra sai sót đối với những người không chú ý đến ví dụ này. Để tránh điều này, bạn có thể sử dụng
danh sách được chọn cho tháng và các hộp văn bản cho ngày và năm .

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

Điều này loại bỏ sự không rõ ràng giữa thứ tự ngày và tháng, nhưng khó sử dụng hơn một chút.

Bạn nên xem qua Datejs .

Datejs là một Thư viện ngày JavaScript mã nguồn mở.

Toàn diện, nhưng đơn giản, lén lút và nhanh chóng. Datejs đã vượt qua tất cả các thử nghiệm và sẵn sàng đình công. Datejs không chỉ phân tích cú pháp các chuỗi, nó còn cắt chúng ra làm hai.

Tôi gặp rắc rối với ưu thế của việc giải quyết thay vì thiết kế. OP cho biết, "Tôi muốn biết đâu là giải pháp hữu dụng nhất và không có vấn đề gì, vì vậy người dùng sẽ không bị nhầm lẫn." Vì vậy, cho dù đó là jQuery hay JavaScript hoặc C # hoặc FORTRAN, thiết kế vẫn quan trọng - và đó là thiết kế UX, không phải thiết kế giao diện người dùng mới quan trọng ở đây. (Một lời cầu xin khác để tránh cấu trúc "UX / UI" không chính xác và phi logic).

Sử dụng kiểu nhập văn bản. Sử dụng ba hộp riêng biệt có nhãn Ngày, Tháng và Năm (hoặc Tháng, Ngày và Năm). Cho phép người dùng nhập ngày tháng. Kết hợp văn bản và danh sách trong cùng một tương tác là Điều không tốt (ví dụ: không sử dụng đầu vào văn bản cho năm mà sử dụng bộ chọn ngày hoặc danh sách cho tháng và ngày).

Sử dụng một trường văn bản duy nhất sử dụng gợi ý định dạng trong trường, ví dụ: [ngày / tháng / năm] Không yêu cầu định dạng quá cứng nhắc. Nếu người dùng nhập JUN vào nơi bạn mong đợi một tháng, thì hãy sử dụng June ở mặt sau. Nếu người dùng nhập 6 vào vị trí mà bạn mong đợi là một tháng, thì hãy sử dụng June ở phía sau. Nếu người dùng nhập 06 vào vị trí mà bạn mong đợi một tháng, thì hãy sử dụng June ở phía sau.

Sử dụng Occam's Razor như một hướng dẫn (trên thực tế, hầu hết thời gian dữ liệu sẽ đủ chính xác). Giảm ma sát nhận thức (không khiến người dùng phải suy nghĩ).

Tôi cũng muốn giới thiệu sự kết hợp giữa DatePicker và các trường

Xem bản trình diễn này , nơi bộ chọn ngày phản ánh ngày được người dùng nhập vào các trường.
Tuy nhiên, nó dựa trên DatePicker bằng Prototype và Scriptaculous . Tôi đề cập đến nó với mục đích minh họa.

Tôi đã thử datePicker với người dùng của mình nhưng hóa ra nó lại là một giao diện người dùng không tốt cho họ. Điều tôi kết thúc dựa trên yêu cầu của họ là có 3 hộp văn bản để họ có thể nhanh chóng nhập [ngày] [tháng] [năm] :(

Đặt cả hai và làm cho mỗi cập nhật khác. Nếu người dùng chọn ngày từ trình chọn ngày, có thể dễ dàng sửa một cú nhấp chuột nhỏ trong trường văn bản hoặc trực quan hóa lựa chọn bạn đã nhập vào trường văn bản trong trình chọn ngày.

Tại sao bạn không kiểm tra cả ba và chọn một trong những hoạt động tốt nhất? Đây có vẻ là một ứng cử viên sáng giá cho Trình tối ưu hóa trang web của Google kiểm tra.

Có thể là loại người dùng bạn có hoặc loại trang web bạn đang chạy có thể quy định rằng giải pháp của bạn phải khác với "tiêu chuẩn".

Tôi thường sử dụng cả hai - một công cụ chọn ngày điền vào một trường văn bản theo đúng định dạng. Người dùng nâng cao có thể chỉnh sửa trường văn bản trực tiếp, người dùng thích chuột có thể chọn bằng cách sử dụng công cụ chọn ngày.

Nếu bạn lo lắng về không gian, tôi thường chỉ có trường văn bản với một biểu tượng lịch nhỏ bên cạnh. Nếu bạn nhấp vào biểu tượng lịch, nó sẽ hiển thị bộ chọn ngày dưới dạng cửa sổ bật lên.

Ngoài ra, tôi thấy cách điền trước trường văn bản bằng văn bản cho biết định dạng chính xác (ví dụ: "DD / MM / YYYY") là một phương pháp hay. Khi người dùng tập trung vào trường văn bản, văn bản đó sẽ biến mất để họ có thể nhập văn bản của riêng mình.

Có lẽ là một trong những người lớn tuổi ở đây và sinh vào cuối tháng, tôi thấy thực đơn thả xuống cho ngày sinh thật khó chịu. Tôi thường phải cuộn xuống trên hai menu thả xuống và điều đó thật khó xử. Tôi muốn gõ nó vào.

Nếu bạn có thể có một điều khiển được thiết kế để nó có thể chấp nhận các menu thả xuống hoặc được nhập vào và làm cho nó rõ ràng cả hai đều hoạt động, điều đó sẽ rất tuyệt vời.

Tôi nghĩ có sử dụng công cụ chọn ngày hay không phụ thuộc vào cách ngày tháng trước. Nếu chúng thường ở trong tháng hiện tại và hầu như không bao giờ quá vài tháng, và bạn biết rằng Javascript sẽ xuất hiện, thì một công cụ chọn ngày là tốt. Nếu các ngày không phải gần đây (giả sử, ngày sinh), tôi nghĩ đây là lựa chọn tốt nhất:

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

Lưu ý rằng điều này khác với câu trả lời của Patrick McElhaney ở chỗ năm là một hộp văn bản, không phải là một danh sách thả xuống . Chọn một số từ một hộp thả xuống dài hàng trăm phần tử sẽ rất khó chịu cho người dùng.

Tôi nghĩ một công cụ chọn ngày chỉ làm cho việc nhập ngày sinh của một người trở nên phức tạp hơn.

Như đã đề cập, kết hợp danh sách thả cho ngày và tháng với hộp văn bản cho năm có vẻ hiệu quả nhất đối với người dùng. Chỉ mất chưa đến 10 giây để nhập ngày sinh theo cách này, nhanh hơn nhiều so với công cụ chọn ngày: nhờ phím tab (mà tất cả người dùng nên học cách sử dụng để hoàn thành biểu mẫu), thật nhanh chóng để chuyển từ một biểu mẫu phần tử tiếp theo.

Ít nhất dưới Macintosh (tôi không biết về Windows), bạn cũng có thể sử dụng bàn phím để truy cập ngày tháng bên trong các hộp chọn: nhờ phím tab, bạn lấy tiêu điểm vào phần tử biểu mẫu, sau đó nhấn phím mũi tên để thả xuống danh sách, sau đó nhập ví dụ như 1967 và bạn đến đó trong nháy mắt…

Tôi muốn một công cụ chọn ngày (và một hộp nhập liệu có định dạng được ghi chép lại làm dự phòng) cho một trang quốc tế.

Các định dạng ngày tháng khác nhau và đôi khi khó đọc nếu bây giờ bạn đã quen với chúng. Thật tệ là nhiều người không cảm thấy thoải mái với ISO 8601. :-(

Tôi khuyên bạn nên sử dụng menu thả xuống cho từng trường, đảm bảo gắn nhãn mỗi trường là ngày, tháng và năm. Công cụ chọn ngày cũng có thể hữu ích, nhưng nếu người dùng không bật JavaScript, nó sẽ không hoạt động.

Tôi sẽ chọn một DatePicker. Đây là thành phần duy nhất cho phép người dùng chuyên nghiệp nhập ngày theo cách thủ công và hướng dẫn người mới nhập ngày rất dễ dàng.

Lịch sẽ không bật lên nếu bạn nhập bằng cách nhấn tab, nhưng nhấp vào nút. Vì vậy, không có người dùng chuyên nghiệp nào khó chịu về nó.

Ai mà bạn không sử dụng DatePicker giao diện người dùng jQuery?

Nó có thể cấu hình để phù hợp với khá nhiều nhu cầu. Nhược điểm duy nhất là nếu bạn đưa nó vào giao diện người dùng jQuery, nó có một dấu ấn hơi lớn ..

Cập nhật

Một số kích thước tệp dường như đã thay đổi, vì vậy chúng được cập nhật bên dưới. Hãy nhớ rằng những con số này sẽ chỉ chính xác vào thời điểm chúng được cập nhật lần cuối. Mọi thứ có thể đã thay đổi kể từ đó.

• Chủ đề CSS - 23kb
• jQuery UI - được rút gọn 71kb
• DatePicker - 38kb
• Cộng với một vài hình ảnh (tháng sau / tháng trước, mà tôi khá chắc chắn là được tạo ra)

Nhưng điều đó không quá tệ ...

Bộ chọn ngày giờ trong JQueryUI là lựa chọn tốt nhất vì nó cho phép người dùng chuyên nghiệp nhập giá trị của riêng họ vào hộp văn bản hoặc họ có thể chọn nó từ bộ chọn.

Việc thiết lập bộ chọn để cho phép nhập sinh nhật hoặc ngày trong tương lai cũng khá dễ dàng:

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

điều này hiển thị một cái gì đó như thế này (không thể đăng ảnh vì tôi là người dùng mới: http://klalex.com/wp-content/uploads/2009/07/picture-1.png )

và yearRange hiển thị các ngày từ DateTime.Now.Year - 100 đến DateTime.Now.Year + 50

tìm thấy điều này trên: http://klalex.com/2009/07/jquery-ui-datepicker-for-birth-date-input/

Tôi vừa phát hiện ra một plugin trên JSFiddle. Hai lựa chọn thay thế có thể có: 1 đầu vào HOẶC 3 đầu vào, nhưng trông giống như một ... (sử dụng phím Tab để chuyển đến đầu vào tiếp theo)

[link] http://jsfiddle.net/davidelrizzo/c8ASE/ Có vẻ thú vị!

Tôi nghĩ bạn có thể thử plugin birthdaypicker ,

bạn có thể sử dụng plugin cxcalendar . Nó trông giống như những người chọn ngày khác. nhưng bạn có thể chọn năm và tháng sau khi nhấp vào tiêu đề năm tháng.

Tôi đã tạo ba trình đơn thả xuống cho lựa chọn Ngày sinh và số ngày thay đổi động dựa trên lựa chọn năm và tháng. http://jsfiddle.net/ravitejagunda/FH4VB/10/

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