用于时间跟踪的UI设计

Question

我正在尝试设计一个时间保持系统的界面，让用户一眼就能看到还需要多长时间才能完成。

由于没有固定的工作时间这一事实很复杂 - 员工必须在任何给定的工作日工作至少6个小时，并且在每月结束时应该在当月的每个星期工作7.5小时。 7.5小时任何一种方式都可以延续到下个月。员工也可以每月上午1点和下午1点的“弹性”时间。时间需要应该在第二天10.15记录下来，但是这个规则在繁忙时期是弯曲的，而周末，特别是月末边界变得更加重要。

那么显示当前输入时间和突出显示未完成条目的截止日期的最可读格式是什么，同时仍然感觉到员工前进/后退的距离（即如果您有一个星期去那个月和你提前8小时就可以安排一点额外的羽绒被时间。）

我的第一次拍摄是每天的条形图，红线为6.但这并不能让您知道每天或每月的前方或后方是多远，或者您是否接近错过了期限...

（请原谅可怕的模型）

也许我想在一个地方传达太多信息？

-

这是一个记录时间的模型。 Dickon Reed建议的时间

-

编辑：这方面非常适合这样的事情。我准备在早上踢一些这些想法，希望能在这里发布一些东西。

Answer 1

“试管/温度计”图像怎么样，就像它们用于慈善机构一样...当你增加时间，试图达到目标（红线）时，它会填满。

每天填写不同的颜色，并相应地标记......如果用户加班M-T，他们可能在星期五之前到达等等。

类似于： alt text http://goyamarketing.com/blog/wp-content/uploads/2008/11/goal_thermometer.gif

Answer 2

您可以通过显示below所示的剩余时间来改善您的第一张图表。在截止日期前的剩余天数内，剩余时间直到下一周/每月截止日期均分。因此用户界面将回答这个问题：“我需要每天工作多少小时才能完成最后期限？”如果用户想要关闭一个上午/下午（或者我是否理解错误？），那么在检查了哪些估算值将相应调整后，您应该在当天有一个复选框。

你还应该在每个垂直条的顶部显示确切的时间，这样用户就不需要在头脑中估计它了（我很懒，并且只将它们添加到模型中的几个条形图中）。同时突出显示当前日期，例如在下图中，这是通过盘旋“星期四”并使用粗体字来表示用户今天工作的时间。你也可以在今天的垂直条上使用一些视觉效果。

improved bar chart http://img11.imageshack.us/img11/6755/20090216203339em2.png

对于您的第二张图表，您还应该在每周或每月截止日期中绘制水平条形图。在某些情况下，第二个图表可能会更好，但在这种情况下，我会选择第一个图表（我的改进），因为它可能更好地对应用户的心智模型，这样你也可以想象每日最低6小时某种方式。

Answer 3

char栏在视觉上看起来很不错，但你真正需要知道的是你完全在你的小时内完成了多远。

如果我理解正确，您只对当前的saldo和当前截止日期感兴趣，那么您可以在2个单独的字段中显示该信息（例如，在图表下方）。当然，您也可以在图表中用一些水平线标记截止日期。

Answer 4

饼图如何总大小代表最小目标，并为每天添加饼图切片，实际天数满足最小一种颜色，带有额外时间的天数另一种，然后将剩余天数填充为带有数字的灰色切片员工必须在工作中平均分配几小时？

Answer 5

X轴上的“工作日过去”和Y轴上的“每月所需工作的分数”的线图？只需几个数据点，就可以通过视觉外推来确定您是早期还是晚期。情节看起来像一个不规则的楼梯。

PS。爱德华·图夫特（Edward Tufte）的“量化信息的视觉显示”是一本关于这类话题的好书。

Answer 6

为了让Dickon Reed的想法更进一步，为什么不将每个点作为+/-小时前进或后退，你的基线始终为0.这样你就可以获得更多细节。我不确定我是否明白我的观点，但没有一个例子很难做到，而且我的时间很短。