it-swarm.cn

输入日期/时间的大多数用户友好表单字段?

在应用程序中具有日期,时间或两者的字段有哪些不同的方式?每种都有什么利弊?

最常见的似乎是2–3个下拉菜单或某种形式的日历小部件的组合。还有其他选择吗?哪一个最人性化?

45
GSto

我确实相信通常的文本框通常会显示预期的格式。就像Kevin提到的那样,如果您使用日期选择器,则应绝对提供直接输入的方法。许多人喜欢简单地输入日期。

但这就是我在Techinsurance.com上所做的...

alt text

当然,我也有客户端和服务器端验证。我添加的唯一其他功能是,如果他们输入12121999或12-12-1999,则当您失去对文本框的关注时,文本将自动以斜杠设置格式。我在6月采用了这项技术,到目前为止,它对我们来说效果很好。

31
Steve Wortham

我绝对同意拉胡尔的观点,这取决于具体情况。日历小部件对于回溯或前进几个月很有用,但对于选择出生日期却不是那么好-那将是一场噩梦!

我个人也讨厌那些日期下拉列表来选择您的生日,因为它们往往很难达到您的目标选择,但是最近我在Kontain.com的注册流程中看到了一个漂亮的列表。正如您在下面看到的那样,他们将选项布置在表格中而不是列表中(对于日期和年份也是如此),我发现这是一个了不起的改进。好极了!

alt text

27
annemarie lock

请记住,用户友好性是受众和应用程序领域的产物。例如,如果您要构建像Kayak这样的服务,您将专注于精通技术的用户,他们在使用您的应用程序时会大量使用日期控件。另一方面,谷歌和亚马逊的受众更广,互动更少,因此它们有不同的优先级。

考虑到这一点,这里有一些注意事项:

  • 日历控件。当您要在选择日期时传达有关日期,时间或时间段的其他元数据时,这些功能非常有用。例如,在旅行站点上,用户可能正在选择日期以预订酒店。您可以使用日历控件来指示哪些日期已满。由于日历控件与其现实世界中的表亲(日历)最为接近,因此您可以通过将具有日期和时间的交互方式引入他们的心理模型来为用户带来青睐。但是,在某些情况下,日历控件变得笨拙;由于该控件是围绕一次显示一个月来建模的,因此您将控件推向一个月(通常)再次变为箭头或下拉菜单。如果您想让用户在选择日期时有更大的自由度,那可能会受到限制。

  • 下拉菜单。通常,您会连续看到三个:[日] [月] [年]。当用户只是选择他们已经预先知道的日期(例如生日)时,这些选项就可以很好地工作。如果您要用户重复执行涉及日期的任务,它们将不能很好地工作,因为大多数用户将使用鼠标,因此必须在每个下拉菜单上单击一次以将其打开,在每个项目上都单击一次以将其选中,然后可能会在长列表中上下滚动(对于出生日期,“年份”菜单始于1920年,始于2009年并不少见)。如果选择下拉菜单,请确保考虑到这一点。

  • 纯文本输入字段。正如其他人回答的那样,输入字段的好处是您几乎可以接受任何内容。在这些情况下,请记住表单设计的原则:不要在最终用户上强制执行数据库/后端格式化。尽量接受尽可能多的格式。使用客户端验证在用户提交表单之前向用户指出问题(通过将用户填写的字符串提供给新的Date()函数并查看是否可以追溯到日期,可以很容易地用Javascript验证日期)。

除了控制之外,在处理日期时请考虑一些常识性原则:

  • 检查用户是否没有记错。如果您是为青少年设计的网站,并且有人说他们是1934年出生的,请考虑是否应该选择这样做,是否应该,是否应该与他们再次核实,看看他们实际上是否是76岁。但作为对用户的服务。同样,如果您要设计一个旅游网站,请考虑检查用户是否真的打算在2011年10月(而不是今年10月)预订到夏威夷的假期。

  • 在大多数情况下,不需要选择特定的时间,并且可能不会映射到用户的心理模型。计划活动时,您可能需要的最大间隔为5分钟。提供一个允许用户选择12:00、12:05、12:10等的控件,而不是每分钟60个选项。您决定的粒度可能会对您选择使用的特定控件(例如下拉菜单)的可用性产生很大影响。

  • 始终将标准控件之外的内容视作信息图形领域的一种选择。通常,这些方法实施起来会很复杂且昂贵,但是如果将日期/时间选择作为核心功能,则值得这样做。例如,hipmunk.com具有出色的视觉效果的航班时刻表(读取,而不是输入),如果是交互式的,甚至会更好。在这种情况下,请记住考虑听众的期望。

16
Rahul

尽可能保持数据输入自由格式

程序员很懒!让计算机稍作工作,并考虑甚至没有用于初始日期输入的特定日期字段。 Google日历在创建新事件时仅允许您说:

  • 7月4日:在乔的家吃晚饭

然后,GC会为您(包括在何处)解决所有问题,并且根据您的用户个人资料语言环境,将智能地了解4/7:在Joe住所享用晚餐意味着什么。对于随后的编辑,GC日历控件非常好用。考虑以下内容,这对用户来说将是多么容易:

  1. 下周四
  2. 4小时内
  3. 在2周内

还有...震惊如果用户不知道会发生什么?我没有看到太多,但是为什么在某些情况下这不是可接受的日期输入:

  • 大约三天内

我知道这很可怕:)但是 Tog On Software Design ,Bruce Tognazzini(Apple Human Interface Guidelines)的原始作者)描述了用户体验的实现有点像魔术。技巧:“一种幻想”:看起来很简单,但是在下面,各种各样的精神错乱还在发生。

在说“嘿,大约现在您想做些事情”之前,我会先让软件放置1d自动提醒功能

另外,尽可能使用pos:

  • 在乔的生日之前

...如果您有联系方式或社交图,这应该很容易弄清楚;如果没有,问。

考虑一个多月

在设置日期范围时,请注意,对于仅显示一个月的日历视图来说,月边界确实是一件麻烦事。 Mac上的iCal整齐,因为您可以显示任何月份,因此可以轻松检查“从现在开始2到3周之间”的确切日期。

12
Julian H

我通常只使用常规文本框,然后向其中添加Jquery UI Datepicker。

当用户通过选项卡或单击将重点放在文本框上时,日历控件会暂时在其下方弹出-不打扰文本输入

alt text

然后,用户可以只是以任何可解析的格式键入日期,或者将鼠标与日历弹出窗口配合使用。用鼠标选择一个日期,只需在文本框中以用户首选的格式将其输入,然后关闭弹出窗口。

对于时间输入,我发现某人做了类似的事情,但我忘记了谁,但在表格小部件中弹出了(12或24小时)小时,选择一个小时,然后弹出一些选择分钟选项,例如0、15、30和45。之前,只需输入时间就可以了,忽略弹出窗口。

alt text

另外,可以调整日历控件一次一次显示多个月,我通常让它彼此相邻显示2-3个月-取决于日期的上下文。在我看来,日期输入通常围绕当前季度。出生日期条目的效果不佳,因为有人已经指出了^^

7
Oskar Duveborn

多个下拉列表或窗口小部件的常见替代方法是标准格式帮助文本。有时,您会在文本字段内看到它作为默认值,有时会在字段的右/下方看到它。默认文本将显示类似“ MM/DD/YYYY”或“ dd-mm-yyyy”。这是Google注册表单中的示例:

Google's date format

这使用户可以完全控制要输入的内容,并且仅使用一个文本字段。这种方法的缺点是需要进行其他客户端验证,以确保它们遵循正确的日期约定。

5
wnathanlee

第一个问题是您在应用程序中有多少个日期输入字段,以及它们使用的频率。

如果您必须在注册时输入生日,就这样,对您而言,这可能不是一个高优先级。

但是,如果您约会的时间很多,则有一些要考虑的地方值得一提:

  1. 您需要注意用户的首选日期格式(我不在美国,我希望我的日期采用DD/MM/YYYY格式,那些以月开头的美国日期让我很难阅读和类型)。

  2. 另外,请考虑日期字段周围的其他控件,如果它是一个已构建的页面,以便用户使用鼠标与之交互,则应该有一个只能使用鼠标的日期选择器,另一方面,如果您有文本字段在用户可能处于“键入模式”的日期前后,强迫需要鼠标的交互(例如多个下拉菜单)可能会令人讨厌。

最后,您的用户不是我的用户,您应该对其进行测试,为一半的用户提供文本字段和一半的图形日历控件,测量多少用户填写每个表单,以及平均每个组花费多少时间填写表单。

如果在这里对其进行迷恋足够重要,那么对其进行测试就足够重要。

4
Nir

我的两分钱:我是盲人,我认为最好的是:3个组合框!一个替代方案可以是2个组合框,分别用于月份和日期,以及年份的输入文本,但是您应该在此字段上进行控制...如果我应该以程序员的身份考虑,则我会输入一个单独的输入文本,但是如果您认为在您的网站上可能是“菜鸟用户”,我认为最好的是第一个选择:)

3
Filippo1980

至于速度和易用性,没有什么比简单的数字输入更好的了,例如2010-09-21。使用单个文本框,但(除了常见的“ /”和“ -”)之外)还接受制表符以从一个字段移至下一个字段一。点击“ [tab]”应插入一个分隔符。作为分隔符,我喜欢破折号,因为它可以更清楚地分隔字段。

不要强迫人们键入前导零。

我不会像Bevan建议的那样使用像缩写月份那样的文本输入,因为它们需要更长的输入时间。另外,您如何缩写?三个字母?四个?就像我在对Bevan的答复中说的那样,如果您与国际观众合作,这是一个坏主意;用您用户的语言,“ 9月”可能不是“ 9月”。

谈论国际受众:并非每个人都使用MM-DD-YYYY顺序(事实上,在美国以外,几乎没有人使用)。您可以在文本框下方指示所需的顺序。避免5-06-201之类的日期含糊不清的一种方法是使用ISO 8601格式YYYY-MM-DD

2
stevenvh

提供文本输入,用户可以在其中输入日期以及可以使用哪种格式的提示,然后接受任何明确的格式,无论分隔符或数字位数如何。当用户键入标准格式以外的其他内容时,请立即将其更新为标准格式,以便用户清楚地了解您如何以明确的方式解释日期。添加日历图标给想要从日历中选择选项的用户也很好-想要输入日期的用户不必使用它。

1
Sam

我只是在做一些研究。日历应用程序是一个很好的起点。我最喜欢的布局是右边的日期。我不喜欢Google日历的“日期-时间-时间-日期”格式,但执行日期选择器和下拉菜单的操作很明确。

(我无法发布它的图片,但我建议您检查一下)

0
sudonim