用于捕获时间跨度或持续时间的UI

时间:2009-10-16 07:26:51

标签: user-interface

用于从用户捕获持续时间的基于Web的良好UI是什么。 让我们说我们想要在几分钟内捕获持续时间。 但是想要呈现它,以便用户可以在几小时和/或几分钟内输入。

只需使用2个文本框hrs \ min? 或者单个文本框,让他们输入“1小时31分钟”或“91分钟”?

还是有更好的东西吗?

6 个答案:

答案 0 :(得分:2)

如果您有两个标记为小时和分钟的文本框,则需要处理用户键入两个文本框的情况。

3 into h and 35 into m => pretty clear. 3 hours 35 mins

nothing into h and 95 into m  => 1 hour 35 mins (probably update the display to show that)

怎么样?
2 into h and then 95 into m => does that mean 3 h 35 or 1 hour 35

我使用了太多令人讨厌的用户界面,其中更改字段会触发其他条目,以确信我可以设计出一套非完整的行为。

因此,我会选择一个盒子,我们可以输入3h或1h 35m或95m,并有一个单独的只读解释显示。

似乎有机会让一个漂亮的小部件允许鼠标驱动的条目,就像日历小部件允许日期条目一样。一个带可拖动手的小钟?

答案 1 :(得分:1)

让他们只以预先定义的时间格式输入数字。

在没有小时或分钟的情况下放置2个小时和分钟的文本框。

此外,您还必须确定它是24小时制还是12小时制。

答案 2 :(得分:1)

嗯,单独的小时和分钟字段是最安全的,但比单个字段使用更慢。如果您不希望持续时间超过1小时,则可以将小时数默认为0.

可能取决于您的人口,但我希望用户能够在同一文本框中处理小时和分钟,如果您提供提示,例如“持续时间(小时:分钟):”

使用该提示,接受任何初始不间断的数字字符串作为小时和任何后续不间断的数字字符串作为分钟,以便将以下所有输入视为等效。

  • 2:30

  • 02:30

  • 2点30分05秒

  • 2.30(或者可能不是:虽然键盘输入很棒,但您可能希望小数点例外,以允许用户输入小时数,例如2.75,持续2小时45分钟。)< / p>

  • 2 30

  • 2小时30分钟

  • 2小时30分钟

  • 2jaQp 30 !!!!

我认为没有理由要求会议记录少于60分。用户还应该能够将时间表达为:

  • :150

当焦点离开该字段时,自动更正用户输入的指定(小时:分钟)格式,以反馈您所做的解释。

如果你所需要的只是一个粗略的时间近似(或者你的用户只是在估算),那么考虑选项按钮或持续时间范围的下拉列表(例如,0到5分钟,5到15分钟) ,15分钟到1小时,一个多小时。)或者如果持续时间有明确界限且间隔在功能上是线性的,则可以使用带标签的滑块。

无论您使用何种输入格式或控件,它都应与信息源兼容。用户在哪里获得此持续时间?那里使用了哪些单位,格式,间隔和精度?用户如何思考和谈论他们之间的时间?

答案 3 :(得分:1)

感谢所有反馈。

我最终做的是,有一个文本框以“xxhrs yymin”格式显示持续时间

用户可以编辑它,当焦点远离文本框时,它会重新计算持续时间并将文本重新格式化为规范形式。

解释输入文本的解析器相当自由。

这是一组正则表达式,用于匹配任何后跟“h”或“m”或“d”的数字来表示小时,分钟和天。 如果它没有找到任何前面带有数字的“单位”,则假定您输入的是纯数字作为分钟,并将其解释为。

因此,如果用户键入:

“1.5h”,它会在离开文本框后重新格式化为“1小时30分钟”。

“90分钟”也将被重新格式化为“1小时30分钟”

解析器只查看数字后面的第一个字符,这意味着您可以输入“1天,7小时19分钟”,它将正确识别它。

当然,它也会将“2洞和19只老鼠”识别为“2小时19分钟”。

我想我可以忍受。

答案 4 :(得分:0)

我认为应该没有客户端修正大于60的分钟,正如有人建议的那样。它只会令人困惑并产生不必要的问题。

用户输入了数据,因此他应该了解他输入的内容,并且无需纠正他。

我会将这些字段留给用户填写。在服务器端,我只计算总分钟数:

$total_minutes = 60 * $_POST['hours'] + $_POST['minutes'];

答案 5 :(得分:0)

我只是想到这一点,并意识到这种东西的一个熟悉的用户界面是微波炉。对于类似iPhone的用途,键盘可能比我经常看到的滚动滚动条更好。

就我而言,我认为我将使用“数字”的文本字段和“单位”的选择框(年,月,周,日,小时)。

滑块(jqueryui,html5)也可以是一个选项,具体取决于你所说的范围。