logo标签列表

出生日期输入的最佳用户界面是什么？

formsuser-interfaceusability
113
什么是最好的出生日期选择器？
  • 3个文本输入框（月份/日期/年份），或一个掩码输入框。用户必须使用键盘。
  • 3个选择框。用户可以使用键盘或鼠标。
  • 一个漂亮的日期选择器。
我想知道什么是最易用和无问题的解决方案，所以用户不会感到困惑。
那个 jQuery 日期选择器在 Firefox 中似乎可以工作，但在 IE7 中不行。 - Richard Ev
1
也许他们的网站有问题。日期选择器在IE6/7/8、FF、Opera和Safari中都可以正常工作。也许还有其他浏览器 :) - Ionuț Staicu
11
“月/日/年”这种格式说实话有点奇怪。 - TRiG
3
很不幸，我小时候在学校里被教成了月/日/年的日期格式。从科学角度来看这毫无意义。 - Duncan Calvert
2
ISO 8601 赢了！年 / 月 / 日 - Qqwy
24个回答
163

如果你的目标是要确保“用户完全不会感到困惑”，我认为这是最好的选择。

三个下拉框，分别为月、日、年

我不建议在出生日期中使用日期选择器。首先，你必须浏览到该年份（点击，点击，点击...），然后是月份（再次点击），最后找到并点击网格上的小数字。

当你脑海中没有确切的日期时，日期选择器非常有用，例如你正在计划二月份的第二周的旅行。

6
点赞：这正是我要给出的答案。日期选择器适用于“我知道今天是星期五”之类的情况，但对于出生日期而言，它并没有增加任何价值。 - slim
15
被踩：下拉菜单对用户非常烦人，尤其是对于这种数据。请查看Nielsen的文章：http://www.useit.com/alertbox/20001112.html - Mauricio Scheffer
5
这就是为什么我在回答之前会先说：“如果你的目标是确保‘用户不会有任何困惑’”自由下拉菜单确实有其优点……因为它们是标准的小部件（尽管有些讨厌），用户在遇到下拉菜单时知道如何处理它。 - Patrick McElhaney
1
@patrick，你是正确的，下拉菜单非常常见，但简单的文本框更自然，因为它更接近于纸质表单的样子。我的观点是，人们已经将“10/9/1975”深深地编码在他们的大脑中了，所以让他们只写那个就好。 - Mauricio Scheffer
25
你是在10月9日出生还是9月10日出生？我不知道如何用一个简单的文本框解决这种歧义。 - Patrick McElhaney
显示剩余6条评论
146

尽管这是一个非常古老的问题，但在注册表单中正确输入出生日期非常重要。

我认为没有人比Google帐户注册做得更好：

Google Account signup

首先从下拉框中选择月份，然后手动输入日期和年份。简单易行。

易于验证。用户容易理解。不需要在包含1900年至今年份的下拉框中向后滚动年份。无需根据月份输入更新“日”下拉框。在Web上运作良好。在移动设备上也很好用。适用于所有语言环境。例如，01/10/2014是指10月1日还是1月10日？我相信我们将会在未来看到更多这种出生日期选择器格式。

总的来说，日期选择器只是一个糟糕的解决方案。太多的点击！在我看来，只有在知道星期几很重要时（例如预订车票）才有用。

更新2/6/2016： 我来自英国，所以更熟悉日/月/年格式，而不是月/日/年。但是，对于将使用光标选择月份的用户，我认为首先使用下拉框比使用输入>下拉框>输入更容易。评论日期为6月2日，而不是2月6日 ;)

10
为什么这不是最佳答案！ - Snowman
3
我想补充的一点是，在选择下拉菜单时，允许用户输入月份的数字值来选择一个值。这是大多数用户习惯于键入月份的方式，因此对于键盘用户仍然可以“正常工作”。 - Elezar
2
其实，我越想，我真的看不出将月份设置为下拉菜单有什么好处。为什么不也将其设置为文本字段呢？ - Elezar
4
为了避免混淆月份和日期，大多数情况下需要这么做。 - Maciej Gurban
2
尽管我们在美国以外的地方通常是先写月份再写日期。 - jezmck
显示剩余5条评论
28

对于高级用户，文本输入是最好的选择，如果用户知道日期格式，这非常快捷。对于不太熟悉的用户，建议使用日期选择器。由于通常您还有高级和非高级用户，建议使用文本输入和日期选择器的组合。

119
大多数日期选择器的问题在于返回30年、40年或更久远的日期非常麻烦。 - UnkwnTech
3
看看他提供的这个，我想也还不错。 - UnkwnTech
22
在输入出生日期时，日期选择器实际上是一个糟糕的用户体验，因为需要像Unkwntech所提到的那样返回数年。此外，日期时间选择器将特定日期的位置值相对于月份和星期结构放置，而在选择出生日期时并不需要这些信息。 - Alex Czarto
7
jQuery的日期选择器有一个选项，用于显示月份和年份的下拉菜单，这使得选择出生日期更加快速。 - Carl G
1
这是一个具有HTML5正则表达式的蒙版文本输入示例，可强制在iOS设备上使用数字键盘：https://cde.boaterexam.com/washington/register - Alex Czarto
显示剩余2条评论
26

如Jakob Nielsen文章所述，应避免使用下拉列表来展示用户已知的数据：

对于用户熟悉的数据菜单，例如他们的出生年月，应该避免使用下拉列表。这些信息通常被用户记在心里，而从菜单中选择这些选项会打破输入信息的标准范例，甚至可能会给用户带来更多的工作。

最理想的解决方案可能是以下方式之一：

  • 为日、月和年分别提供 3 个文本框（适当标注）。
  • 根据用户的文化背景排序文本框。
  • 日和月文本框应调整大小，以假定输入为两位数字。
  • 年份文本框应调整大小，以假定输入为四位数字。
  • 允许用户输入两位或四位年份。假定两位年份为 1900，并在 onBlur（或后续确认步骤）时更新文本框以反映此内容。
  • 允许用户输入月份编号或月份名称。

编辑：这是我们实现DOB选择器的方式：使用带有HTML5正则表达式的掩码文本输入字段，在iOS设备上强制使用数字键盘。

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

我唯一会修改你的DOB选择器的地方就是将“MM”、“DD”、“YYYY”作为占位符文本而不是提示。 - Paul Pettengill
@Paul 使用占位符文本存在其可用性挑战。尽管我们最初采用了它，但在阅读此内容后，我们决定将其移除：http://www.nngroup.com/articles/form-design-placeholders/ - Alex Czarto
@AlexCzarto 不错的选择器！（但是您需要知道的是，如果输入类似于02/31/1970这样的内容，它会给出错误的错误消息） - Thiago Duarte
如果我的出生日期是2001年6月5日，我会将其输入为“050601”，而您的建议会将其解释为1901年5月6日。如果您有文本框，则需要依赖用户注意到MMDD日期顺序并适当地输入其信息，如果您提供一个下拉菜单来选择月份，则用户将被迫注意到月份的位置不正确。 - thelem
如果您将月份文本框大小设置为2位数字，如何允许用户输入月份数字或月份名称？ - Jin Wang
哈哈，我在5秒钟内就把你的DOB选择器搞崩了。如果你从中删除一个空格，它就会崩溃并显示“请输入您的出生日期”。我认为在为用户添加斜杠和空格时需要非常小心。 - Jan Kalfus
11

生日日期与其他日期不同，因为人们经常习惯于输入自己的具体生日。
带有示例的文本框清晰、快速且容易输入：

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

这应该支持灵活的格式，例如1/1/1970或20/07/70。

如果您需要支持具有不同日期约定的不同文化（例如美国和英国），那么对于不遵守示例的人来说，这可能容易出错。为了避免这种情况，您可以使用
选择月份的下拉列表，以及日期和年份的文本框。

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

这样做消除了日期和月份顺序之间的歧义，但使用起来会有些笨重。

5
你应该看一下 Datejs。

Datejs是一个开源的JavaScript日期库。

全面、简单、隐秘且快速。Datejs已经通过了所有的测试，准备好了出击。Datejs不仅可以解析字符串，还可以将它们干净利落地切成两半。

6
插件看起来很不错，但是对于一个简单的问题来说，25KB似乎有点太多了… - Zephyr was a Friend of Mine
不同意Noel的观点。日期通常是程序员遇到的最复杂的事情，特别是跨时区和文化（这也是Datejs的设计目的所在）。 - Rustavore
1
@Gitninja -- 这有点像是一个伪命题。她并没有说这对于一个约会来说太复杂了（那确实非常复杂），而是对于一个“简单问题”，我猜测是“出生日期”问题。由于有大量的JavaScript库和方法可以在不到25KB的情况下实现解决方案，我同意这一点。 - Kerry Jones
如果给我的表单增加25kb可以避免使用下拉菜单，那就这样吧。 - ladieu
4
我为解决方案的普遍性而困扰，这种情况下设计比具体实现更重要。 问问题的人说：“我想知道最可用和无问题的解决方案是什么，以便用户不会感到困惑。” 因此，无论是jQuery还是JavaScript，C＃还是FORTRAN，设计都很重要 - 这里重要的是UX设计，而不是UI设计。（另一个请求是避免错误和不合逻辑的构造“UX / UI”）。
使用文本输入。使用三个分别标记为天、月和年（或月、日和年）的单独框。让用户键入日期。在同一交互中混合文本和列表是不好的事情（例如，不要使用文本输入作为年份，而在月份和日期上使用日期选择器或列表）。
使用一个单独的文本字段，其中使用迅速提示格式，例如 [ day / month / year ] 不要过于严格地规定格式。如果用户在您期望月份的地方键入JUN，则在后端使用June。如果用户在您期望月份的位置键入6，则在后端使用June。如果用户在您期望月份的位置键入06，则在后端使用June。
使用Occam's Razor作为指导（实际上，大多数情况下数据足够准确）。减少认知摩擦（不要让用户思考）。
使用三个单独的文本框意味着在移动设备上，我必须点击每个文本框才能显示数字键盘。你的想法很好--所有这些都应该是文本框。 - PKHunter
3
3

我曾经尝试过使用datePicker，但是用户反馈它对他们来说是一个糟糕的用户界面。根据他们的要求，我最终采用了3个文本框，他们可以快速输入[日][月][年] :(

2

将两者结合起来，并使它们互相更新。如果用户从日期选择器中选择日期，很容易在文本字段中修复轻微的误点或可视化您在日期选择器中键入的选择。

我不能放两个，它们不适合设计。我只需要其中一个。 - Ionuț Staicu
由于日期选择器需要 JavaScript，因此只有在需要时才使用 JavaScript 来显示它。将位置设置为绝对位置，以便它可以浮动在所有其他元素上方。 - some
通常情况下，您只需放置文本字段并将图标附加在其旁边，该图标会弹出日期选择器。 - Tuminoid
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接