it-swarm-vi.tech

Các trường biểu mẫu thân thiện với người dùng nhất để nhập ngày / giờ?

Các cách khác nhau để có các trường trong một ứng dụng cho ngày, thời gian hoặc cả hai là gì? Những ưu và nhược điểm cho mỗi là gì?

Phổ biến nhất dường như là sự kết hợp của 2 thả xuống3 hoặc một số tiện ích lịch biểu mẫu. Có những lựa chọn khác có sẵn? Cái nào thân thiện với người dùng nhất?

45
GSto

Tôi tin rằng một hộp văn bản thông thường với một dấu hiệu của định dạng dự kiến ​​thường là đủ. Giống như Kevin đã đề cập, nếu bạn sử dụng công cụ chọn ngày, bạn hoàn toàn nên cung cấp một phương thức để nhập trực tiếp. Nhiều người thích chỉ đơn giản là gõ ngày.

Nhưng đây là những gì tôi làm trên Techinsurance.com ...

alt text

Tất nhiên tôi cũng có xác nhận phía máy khách và máy chủ. Tính năng duy nhất khác mà tôi đã thêm là nếu họ nhập 12121999 hoặc 12-12-1999 thì văn bản sẽ được tự động định dạng bằng dấu gạch chéo khi bạn mất tiêu điểm vào hộp văn bản. Tôi đã áp dụng kỹ thuật này vào tháng 6 và nó đã hoạt động khá tốt đối với chúng tôi cho đến nay.

31
Steve Wortham

Tôi chắc chắn đồng ý với Rahul, rằng nó phụ thuộc vào bối cảnh. Một tiện ích lịch cực kỳ hữu ích để quay lại hoặc chuyển tiếp một vài tháng, nhưng không tuyệt vời lắm để chọn ngày sinh của bạn - đó sẽ là một cơn ác mộng khi nhấp!

Cá nhân tôi cũng ghét những ngày kéo xuống để chọn ngày sinh của bạn, vì chúng có xu hướng gây khó khăn cho việc lựa chọn mục tiêu của bạn, nhưng tôi đã thấy một điều thú vị gần đây trong dòng đăng ký tại Kontain.com. Như bạn có thể thấy bên dưới, họ đã đưa ra các tùy chọn trong một bảng thay vì danh sách (và thực hiện tương tự cho ngày và năm) và tôi thấy rằng đó là một cải tiến tuyệt vời. Yay!

alt text

27
annemarie lock

Hãy nhớ rằng sự thân thiện với người dùng là sản phẩm của đối tượng và miền của ứng dụng của bạn. Chẳng hạn, nếu bạn đang xây dựng một dịch vụ như kayak, bạn sẽ tập trung vào những người dùng hiểu biết về công nghệ một cách hợp lý, những người sẽ sử dụng điều khiển ngày rất nhiều trong trải nghiệm của họ với ứng dụng của bạn. Mặt khác, Google và Amazon có đối tượng rộng hơn và ít tương tác hơn, vì vậy họ có các ưu tiên khác nhau.

Với ý nghĩ đó, đây là một số cân nhắc:

  • Điều khiển lịch. Chúng có thể rất hữu ích khi bạn muốn truyền đạt siêu dữ liệu bổ sung về ngày, thời gian hoặc khoảng thời gian trong khi chọn ngày. Chẳng hạn, trên một trang web du lịch, người dùng có thể chọn ngày để đặt khách sạn. Bạn có thể sử dụng điều khiển lịch để cho biết ngày nào được đặt đầy đủ. Vì lịch kiểm soát gần nhất so với người anh em trong thế giới thực của nó, lịch, bạn sẽ được người dùng ưu tiên bằng cách đưa các tương tác với ngày và thời gian vào mô hình tinh thần của họ. Tuy nhiên, có những trường hợp sử dụng mà điều khiển lịch trở nên khó xử; do điều khiển được mô hình hóa xung quanh việc hiển thị một tháng một lần, bạn sẽ đẩy điều khiển bỏ qua giữa các tháng thành mũi tên (thường) hoặc thả xuống một lần nữa. Điều đó có thể hạn chế nếu bạn đang cố gắng cho người dùng tự do hơn trong việc chọn ngày.

  • Menu thả xuống. Thường thì bạn sẽ thấy ba liên tiếp: [Ngày] [Tháng] [Năm]. Chúng hoạt động tốt khi người dùng chỉ chọn ngày mà họ đã biết trước, chẳng hạn như ngày sinh của họ. Chúng không hoạt động tốt nếu bạn yêu cầu người dùng lặp lại một tác vụ liên quan đến ngày, vì hầu hết người dùng sẽ sử dụng chuột và do đó phải nhấp một lần vào mỗi lần thả xuống để mở nó, một lần trên mỗi mục để chọn và có thể cuộn lên và xuống một danh sách dài (đối với ngày sinh, không có gì lạ khi menu Năm bắt đầu từ năm 1920 và kết thúc vào năm 2009). Hãy chắc chắn rằng bạn tính đến điều này nếu bạn chọn menu thả xuống.

  • Các trường nhập văn bản thuần túy. Như những người khác đã trả lời, điều thú vị về các trường đầu vào là bạn có thể chấp nhận hầu như mọi thứ. Trong những trường hợp này, hãy nhớ các nguyên tắc thiết kế biểu mẫu: không thực thi định dạng cơ sở dữ liệu/phụ trợ của bạn trên người dùng cuối. Cố gắng hào phóng hết mức có thể trong việc chấp nhận càng nhiều định dạng càng tốt. Sử dụng xác thực phía máy khách để chỉ ra các vấn đề cho người dùng trước khi cô ấy gửi biểu mẫu (ngày rất dễ xác thực trong Javascript bằng cách cung cấp chuỗi người dùng đã điền vào hàm Date () mới và xem bạn có lấy lại được ngày không).

Nhìn xa hơn kiểm soát, hãy xem xét một số nguyên tắc thông thường khi xử lý ngày:

  • Kiểm tra xem người dùng đã không phạm sai lầm. Nếu bạn đang thiết kế một trang web dành cho thanh thiếu niên và ai đó nói rằng họ sinh năm 1934, hãy xem xét liệu đó có phải là một lựa chọn không và liệu có nên hay không, liệu bạn có nên nhân đôi với họ để xem họ có thực sự là 76 hay không. nhưng là một dịch vụ cho người dùng. Tương tự, nếu bạn đang thiết kế một trang web du lịch, hãy xem xét việc kiểm tra xem người dùng có thực sự đặt kỳ nghỉ tới Hawaii vào tháng 10 năm 2011 không, trong tháng 10 này.

  • Trong hầu hết các trường hợp, các lựa chọn thời gian cụ thể là không cần thiết và có thể không ánh xạ tới mô hình tinh thần của người dùng. Khi lên kế hoạch cho một sự kiện, mức độ chi tiết tối đa bạn có thể cần là trong khoảng thời gian 5 phút. Cung cấp một điều khiển cho phép người dùng chọn 12:00, 12:05, 12:10, v.v. thay vì 60 tùy chọn cho mỗi phút. Độ chi tiết mà bạn quyết định có thể có ảnh hưởng lớn đến khả năng sử dụng của điều khiển cụ thể mà bạn chọn sử dụng (chẳng hạn như trình đơn thả xuống).

  • Luôn luôn nhìn xa hơn các điều khiển tiêu chuẩn và vào lĩnh vực đồ họa thông tin như một tùy chọn. Thông thường những thứ này sẽ phức tạp và tốn kém khi thực hiện, nhưng chúng có thể có giá trị nếu lựa chọn ngày/giờ là một tính năng cốt lõi. Ví dụ, hipmunk.com có ​​một đại diện trực quan tuyệt vời về lịch trình chuyến bay (đọc, không phải là đầu vào) thậm chí có thể tốt hơn nếu nó tương tác. Trong những trường hợp này, hãy nhớ xem xét mong đợi của khán giả.

16
Rahul

Giữ biểu mẫu nhập dữ liệu miễn phí khi có thể

Lập trình viên lười biếng! Hãy để máy tính làm việc một chút và xem xét thậm chí không có trường ngày cụ thể để nhập ngày đầu tiên. Lịch Google, khi tạo một sự kiện mới, chỉ cần cho phép bạn nói:

  • 4 tháng 7: Ăn tối tại địa điểm của Joe

Sau đó, GC sẽ tính toán tất cả cho bạn (bao gồm cả ở đâu), và, dựa trên địa điểm hồ sơ người dùng của bạn, sẽ thông minh về ý nghĩa của 4/7: Bữa tối tại địa điểm của Joe. Để chỉnh sửa tiếp theo, điều khiển lịch GC rất hay và dễ sử dụng. Hãy xem xét những điều sau đây và việc này sẽ dễ dàng như thế nào đối với người dùng:

  1. thu tiếp
  2. trong 4 giờ
  3. trong 2 tuần

Và ... SHOCK HORROR điều gì xảy ra nếu người dùng không biết ?? Tôi đã không nhìn thấy điều này nhiều nhưng tại sao đây không phải là một mục nhập ngày được chấp nhận cho một số trường hợp:

  • Trong khoảng 3 ngày

Tôi biết điều này thật đáng sợ :) Nhưng Tog On Software Design , Bruce Tognazzini (tác giả gốc của Apple Nguyên tắc giao diện con người) mô tả việc triển khai Trải nghiệm người dùng hơi giống một phép thuật lừa: 'một ảo ảnh': có vẻ dễ dàng, nhưng bên dưới, tất cả các loại điên rồ đang diễn ra.

Tôi sẽ nhận phần mềm để đặt lời nhắc tự động 1d trước khi nói 'này, khoảng bây giờ bạn muốn làm công cụ'

Ngoài ra, sử dụng bối cảnh nhiều như sở hữu:

  • trước sinh nhật của Joe

... Nếu bạn có địa chỉ liên hệ hoặc biểu đồ xã hội, điều này sẽ dễ dàng tìm ra; nếu không, hãy hỏi.

Cân nhắc hơn một tháng

Khi có phạm vi ngày, hãy xem xét rằng ranh giới tháng là một rắc rối thực sự cho các chế độ xem lịch chỉ hiển thị một tháng. iCal trên Mac gọn gàng theo cách này vì bạn có thể hiển thị bất kỳ số tháng nào để bạn có thể dễ dàng kiểm tra ngày chính xác của 'trong khoảng từ 2 đến 3 tuần kể từ bây giờ'.

12
Julian H

Tôi thường chỉ sử dụng một hộp văn bản thông thường và thêm Datepicker UI Jquery vào nó.

Khi người dùng tập trung vào hộp văn bản bằng tab hoặc nhấp hoặc không chú ý, điều khiển lịch sẽ bật lên tạm thời bên dưới nó - không làm phiền nhập văn bản:

alt text

Sau đó, người dùng có thể chỉ cần nhập một ngày ở bất kỳ định dạng có thể phân tích được hoặc sử dụng chuột với cửa sổ bật lên lịch. Chọn một ngày bằng chuột sẽ chỉ cần nhập nó vào hộp văn bản ở định dạng ưa thích của trang web cho người dùng và đóng cửa sổ bật lên.

Để nhập thời gian, tôi đã tìm thấy một cái gì đó tương tự được thực hiện bởi một người mà tôi đã quên, nhưng với (12 hoặc 24) giờ xuất hiện trong một tiện ích dạng bảng, chọn một giờ sau đó bật lên một vài tùy chọn phút như 0, 15, 30 và 45. Như trước đó, chỉ cần gõ thời gian hoạt động tốt, bỏ qua cửa sổ bật lên.

alt text

Ngoài ra, một điều khiển lịch có thể được điều chỉnh để hiển thị hơn một tháng tại một thời điểm, tôi thường có nó hiển thị 2-3 tháng cạnh nhau - tùy thuộc vào bối cảnh của ngày. Ngày nhập trong trường hợp của tôi thường xoay quanh quý hiện tại mặc dù. Một mục nhập ngày sinh sẽ không hoạt động tốt như ai đó đã chỉ ra ^^

7
Oskar Duveborn

Một thay thế phổ biến cho nhiều trình đơn thả xuống hoặc các tiện ích là văn bản trợ giúp định dạng tiêu chuẩn. Đôi khi bạn sẽ thấy nó bên trong trường văn bản là giá trị mặc định và đôi khi ở bên phải/bên dưới trường. Văn bản mặc định sẽ nói một cái gì đó như "MM/DD/YYYY" hoặc "dd-mm-yyyy". Đây là một ví dụ từ mẫu đăng ký của Google:

Google's date format

Điều này cung cấp cho người dùng toàn quyền kiểm soát những gì cần nhập và chỉ sử dụng một trường văn bản. Một nhược điểm của phương pháp này là cần phải xác nhận bổ sung phía khách hàng để đảm bảo rằng họ đã tuân theo quy ước ngày thích hợp.

5
wnathanlee

Câu hỏi đầu tiên là bạn có bao nhiêu trường nhập ngày trong ứng dụng và tần suất sử dụng chúng.

Nếu bạn phải nhập ngày sinh của bạn khi bạn đăng ký và đó là tốt, có lẽ đó không phải là ưu tiên cao đối với bạn.

Nhưng nếu bạn có nhiều cuộc hẹn hò, có một số điểm cần xem xét chưa có ai khác nói về:

  1. Bạn cần quan tâm đến định dạng ngày ưa thích của người dùng (Tôi không ở Hoa Kỳ, tôi muốn ngày của tôi ở định dạng DD/MM/YYYY, những ngày ở Hoa Kỳ với tháng đầu rất khó đọc và kiểu).

  2. Ngoài ra, hãy xem xét các điều khiển khác xung quanh trường ngày, nếu đó là một trang được tạo để người dùng tương tác với nó, bạn nên có một công cụ chọn ngày chỉ có thể là người dùng bằng chuột, mặt khác nếu bạn có trường văn bản vào khoảng ngày người dùng có thể ở "chế độ gõ" và buộc tương tác yêu cầu chuột (như nhiều lần thả xuống) có thể gây khó chịu.

Và cuối cùng, người dùng của bạn không phải là người dùng của tôi, bạn nên kiểm tra nó, cung cấp cho một nửa người dùng một trường văn bản và một nửa điều khiển lịch đồ họa, đo xem có bao nhiêu người dùng hoàn thành mỗi biểu mẫu và trung bình mỗi nhóm mất bao nhiêu thời gian để hoàn thành biểu mẫu .

Nếu nó đủ quan trọng để ám ảnh về nó ở đây thì nó đủ quan trọng để kiểm tra nó.

4
Nir

Hai xu của tôi: Tôi bị mù và tôi nghĩ rằng điều tốt nhất là: 3 hộp combo! Một lựa chọn thay thế có thể là 2 hộp tổ hợp trong nhiều tháng và một ngày và một văn bản đầu vào trong năm nhưng bạn nên thực hiện một điều khiển trên lĩnh vực này ... Nếu tôi nghĩ là lập trình viên, tôi đã chọn một văn bản đầu vào nhưng nếu bạn nghĩ rằng trong trang web của bạn có thể là một "người dùng noob" Tôi nghĩ rằng điều tốt nhất là lựa chọn đầu tiên :)

3
Filippo1980

Đối với tốc độ và dễ sử dụng, không có gì vượt qua mục nhập số đơn giản, ví dụ: 2010-09-21. Sử dụng một hộp văn bản đơn nhưng (ngoài "/" và "-") cũng chấp nhận các tab để chuyển từ trường này sang trường tiếp theo một. Nhấn "[tab]" sẽ chèn một dấu phân cách. Là dấu phân cách tôi thích dấu gạch ngang, vì nó phân tách các trường rõ ràng hơn.

Đừng ép mọi người gõ số không hàng đầu.

Tôi sẽ không sử dụng mục nhập văn bản như các tháng viết tắt như Bevan đề xuất vì chúng mất nhiều thời gian hơn để nhập. Ngoài ra, làm thế nào để bạn viết tắt? Ba bức thư? Bốn? Giống như tôi đã nói trong bài trả lời của mình cho Bevan, đó là một ý tưởng tồi nếu bạn làm việc với khán giả quốc tế; "Tháng chín" có thể không phải là "Tháng chín" trong ngôn ngữ người dùng của bạn.

Nói về khán giả quốc tế: không phải ai cũng sử dụng thứ tự MM-DD-YYYY (như một vấn đề thực tế, bên ngoài Hoa Kỳ hầu như không có ai làm). Bạn có thể chỉ ra thứ tự yêu cầu bên dưới hộp văn bản. Một cách để tránh sự mơ hồ của các ngày như 5-06-201 là sử dụng định dạng ISO 8601 YYYY-MM-DD.

2
stevenvh

Đưa ra một kiểu nhập văn bản nơi người dùng có thể nhập ngày cùng với gợi ý về định dạng họ có thể sử dụng, nhưng sau đó chấp nhận bất kỳ định dạng rõ ràng nào bất kể dấu phân cách hoặc số chữ số. Khi người dùng nhập một cái gì đó không phải là định dạng tiêu chuẩn, ngay lập tức cập nhật nó thành định dạng chuẩn để người dùng thấy chính xác cách bạn diễn giải ngày theo cách rõ ràng. Thêm biểu tượng lịch để cung cấp cho người dùng muốn tùy chọn chọn từ lịch cũng tốt - người dùng muốn nhập ngày không phải sử dụng ngày đó.

1
Sam

Tôi chỉ đang làm một số nghiên cứu về điều này. Ứng dụng Lịch là một nơi tốt để bắt đầu. Bố cục yêu thích của tôi là ngày với thời gian bên phải. Tôi không thích định dạng lịch ngày - Thời gian - Thời gian - Ngày của google, nhưng tính năng hẹn hò và thả xuống được thực hiện khá rõ ràng.

(Tôi không thể đăng hình ảnh của nó, nhưng tôi khuyến khích bạn xem nó)

0
sudonim