it-swarm.cn

用户选择日期范围的更好方法

在我的应用程序中,用户选择需要结果的日期范围。 UI看起来像这样:

Existing UI

我的用户不喜欢这样,因为日期选择器要求他们选择一个特定的日期。这比他们要求的要精确得多-系统编译的大多数结果仅按月或按季度显示。有些只是每年一次。

我提出的两个想法是:

alt text

在左侧,只需使用组合框从有效日期中进行选择。这种方法的问题在于,有时结果是每日的,有效日期范围可以追溯到1860年代。这样一来,组合框中将要处理的项目太多了。

在右侧,使用三个组合框选择日期。这具有一些优点。如果结果将是每月一次,则可以禁用当天组合;如果结果将是每季度一次,我还可以限制月份组合中可用的项目。但是,这种设计似乎需要一整堆点击才能使用。

UX的替代设计是什么,它使用户可以更轻松地选择“有用的”日期?

我的技术堆栈是C#,WinForms,.NET 3.5

更新10月1日

  • 我的用户选择的日期范围通常很长-几年到几十年-会在很长一段时间内降低稀疏结果。
  • 唯一已识别的常见默认值是“尽早”作为开始日期,而“直到今天”完成日期。

到目前为止的答案中有很多好主意-谢谢大家。

10月2日更新

  • 下面的一些答案(我假设很多读者)是在假设我需要日期范围来生成报告。实际上,我的应用程序的这一特定部分更多地是查询引擎。如果这个细节激发了任何新的想法,请回答。
46
Bevan

通常,只要您的验证不必过于繁琐,并且为子字段提供了不错的自动更正和默认设置(例如,接受2-9-04作为以及2004年2月9日)。日历控件非常适合作为用户不确定日期的一种选择(例如,对于用户考虑“下周三星期三”的情况),但日历控件并不是输入日期的唯一方法。每个子字段的单独下拉列表使用户使用起来很慢。

如果您有权访问查询日志,请对其进行研究以更好地了解用户使用的日期类型。虽然您可能需要支持追溯到1860年的任意日期,但您可能只需要针对少量日期或日期模式来优化设计。

这里有一些可能性:

  • 默认值。可能大多数查询只是从用户所在的页面即可预测的(例如,取决于页面/窗口的上个月或上一季度或去年)。将您的“从-到”范围默认为每个页面的这些值,并且用户几乎无需输入任何内容。

  • 典型日期范围列表。如果大部分查询(例如去年的每个月)构成了一些日期范围,请在列表框或单选按钮列表中列出它们。最后一个是“自定义”,它启用了带有日历控件的几个文本框,供用户输入特定日期。

  • 常用输入的下拉菜单。如果From和To值的可预测列表相对较小,则提供From和To组合框,使每个框都接受任何用户键入的日期,但具有最多From和To常见日期的下拉列表(例如, “发件人”字段的最后一年)。

  • 单个文本框。如果大多数日期范围是整个月,季度和年份,请提供两种输入日期范围的方法。默认情况下有一个标记为“月,季或年”的文本框。接受“ Sep”(默认为最近的9月),“ 6/09”,“ 3Q06”和“ 1933”之类的输入。研究用户编写的材料以查看预期的字符串类型。非默认方法为任意日期提供了单独的“从-到”文本框。

  • 微语法。如果主要是您的专家用户抱怨日期输入,那么请考虑为“从”和“到”文本框支持微语法,用户可以在其中输入确切的日期或其他各种语法快捷方式(例如,“上季度”或“ LQ” “开始”框中的“”解释为最近完成的季度中的全部)。请参阅 使用文本框微语法有效地收集数据

41
Michael Zuschlag

为什么不考虑一个带有最新报表管理单元以选择的时间轴滑块?

如果您的报告可以追溯到1860年,则需要多久返回一次?

                   | Report XYZ, Jan 12, 1983 |       
<--- Earlier                   \/                         Later --->
|------------------------------||----------------------------------|
     ^      ^ ^  ^            ^    ^   ^    ^   ^ ^ ^ ^ ^

这样的事情可能会让他们从视觉上挑选它?通过列表上方的气泡,应该可以使他们更轻松地查看所获得的内容。较早/较晚的按钮/选项卡停止移动年份或类似年份。滑块可通过键盘访问。

23
Dominic Hopton

使用两个日历并调暗无法选择的日期。您将为用户提供日历的优势(可以一次查看一整个月,可以轻松地在时间上前后移动,并且可以选择自己喜欢的任何日期),并且只限于某些有效日期。当用户单击一个暗淡的日期时,请给他们一些有关该日期为何无效的反馈,或使用图例。

Hipmunk.com 在简化此方面做得很好。他们始终有两个日历,并且今天之前的日期都是灰色的(很明显,在这种情况下,为什么他们不需要指定原因,但您可能必须这样做)。单击日期选择开始日期,然后再次单击选择结束日期。请注意它们还具有日期字段,因此您可以根据需要键入日期,并且在单击以指示要选择的日期时,这些字段会突出显示。这是非常规的,并且还不是“不要让我思考”,但这是一种很好地组合这些控件而无需添加大量丰富小部件的好方法。一探究竟:

Hipmunk's homepage

Hipmunk仍然可以做IMO的一件事就是突出显示您离开和返回之间的日子,就像额外的视觉细节一样。现在,您仍然必须将两个日期之间的空间解析为“哦,对了,从该日期到该日期的每一行都是我要离开的地方”。

(奖励很棒:尝试指定返回日期之后的出发日期)

6
Rahul

这实际上来自于我在工作中使用的基于Web的软件,但是这个想法可以很容易地转换为WinForms。

我一直使用此控件生成日期范围不同的报告。文本框没有被屏蔽,它们相当宽容可以转换为日期的值,因此我可以自由输入不同的日期范围,而不会出现问题。一旦您跳出该字段,日期将被格式化为“适当的”日期格式。如果无法确定日期,则文本会变成红色,并在其旁边带有一个小错误符号(例如,如果我输入的日期不明确,例如1109)。

如果需要执行特定操作,可以单击文本框右侧的日历按钮以查看日历(例如,如果我需要查看2009年3月第三周的报告,则不需要知道日期从我的头顶掉)。

我更喜欢这种风格,因为我几乎不需要花一秒钟就可以填写日期范围-只是010109 tab 030109 tab 然后进入下一组详细信息。

alt text

顶部的空白控件。中间的自由文本日期。底部,日期格式和日历控件

至于您的第三个选项,我必须使用一款使用该样式的软件,但我讨厌它-尤其是因为必须使用鼠标。我还要指出的是,显示的日期是加载页面时的默认日期,因此默认情况下,它希望我搜索大于将来但小于现在的项目。 [〜#〜] huge [〜#〜]的缺点是下拉列表中对年份进行了硬编码-我们必须等到2010年2月才能添加2010年,以便我们可以搜索任何内容最近。

alt text

如果您事先知道特定查询仅具有季度结果,则可以对布局进行一些更改,并选择以下选项和年份:

alt text

您可以禁用当前年度尚未生成的季度。

6
Jared Harley

我没有阅读所有答案。也许有人已经建议从大多数用户大部分时间需要的控件开始,然后逐步公开其他控件。例如,单击链接以显示日期和月份,几个不重叠的日期范围等的控件。

alt text

或这个:

alt text

4
JeromeR

这是我的解决方案。

First, Second

2
Alexandr

我爱上 bootstrap-daterangepicker jquery插件中使用的设计。

基本上,它具有默认范围,默认范围是-到带有日期选择器的字段,以突出显示所选范围。 I like it

1
JCM

可滚动的日期范围字段:5个交互步骤,为.Png图像,带有俄语注释!

日期范围+典型时间段的预设为1/3/6/12个月http://1ne.twozerotwenty.com/pics/2011/10/show_me_the_date.png

如果需要-我可以在英语和演示页面中完整地说明交互和功能区域。

1
denis.efremov

这是我解决类似问题的方式...您可以更改30天/ 60天/ 90天,以提醒生成的最常见报告(每年/季度/每月)。日期范围功能会为那些专门寻找日期范围的用户打开一个具有日期范围功能的工具提示,但不会强制用户输入日期以生成结果。 enter image description here

0
Ashlie

我喜欢它在Google日历应用(MIUI)中的实现方式。有两个微调器用于选择日期时间。看起来就是这样:

enter image description here

在第一个选择器中设置日期时间时,第二个自动设置为+1小时。

0
naXa

如何使用jQuery ui日期范围选择器:

http://www.filamentgroup.com/lab/date_range_picker_using_jquery_ui_16_and_jquery_ui_css_framework/

您可以预先填充一些默认值,并进行设置,以便可以将年和月作为下拉列表,而不仅仅是按月显示<>箭头。

0
Patricia

您可以显示一个外观正常的日历选择器,但是如果用户从标题栏中选择了月份,则它将自动填写开始日期和结束日期作为月份的开始和结束时间。今年也是如此。

如果用户想要一个稍微不同的范围,则可以覆盖结束日期。

我不知道你怎么会显示四分之一。

0
ChrisF

两个想法:

  • 您能否针对不同的报告类型显示不同的日期选择器(例如,您说一些是年度报告-在这种情况下,您只需要年份即可-可以是一个简单的文本字段。)

  • 开始/结束日期是否是用户考虑报告的方式?在几个项目中,我曾为需要报告的人员提供服务,他们考虑的是日期和时间,而不是两个日期。因此,对于季度报告,他们可能希望从1980年第三季度开始的4年。

0
adrianh