时间追踪的UI设计答案

【问题标题】：UI design for time tracking时间追踪的UI设计
【发布时间】：2010-10-07 21:12:53
【问题描述】：

我正在尝试为计时系统设计一个界面，让用户“一目了然”地看到还需要完成多少时间。

由于没有固定的工作时间，这使情况变得复杂 - 员工在任何给定的工作日必须至少工作 6 小时，并且在每个月月底该月的每个工作日应该工作 7.5 小时。无论哪种方式，7.5小时都可以结转到下个月。员工每月最多可占用 1 个上午和 1 个下午的“弹性”时间。时间需求应该在第二天 10.15 之前记录下来，但是这条规则在繁忙时间是弯曲的，周末，尤其是月底的界限变得更加重要。

那么，什么是最易读的格式来显示当前输入的时间并突出显示未完成条目的接近截止日期，同时仍然让人感觉员工领先/落后于轨道多远（即，如果您那个月还有一周的时间，并且你提前 8 小时，你可以安排一点额外的羽绒被时间）。

我的第一个想法是每天的条形图，在 6 处有一条红线。但这并不能让您了解每天或每月的领先或落后，或者您是否接近错过截止日期...

(请原谅可怕的模型)

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

--

这是时间记录与时间的模型。 Dickon Reed 建议的所需时间

--

编辑：这一面非常适合这样的东西。我将在早上讨论其中的一些想法，希望能在这里发布一些内容。

【问题讨论】：

“帮助 UI 进行时间跟踪”是否适用于标题？
“也许我试图在一个地方传达太多信息？” -- 拥有太多信息是非常罕见的——这只是信息如何组织的问题。当一切都井井有条并可视化时，您可以一次在屏幕上显示大量信息，而不会给用户带来太多的心理负担。

标签： user-interface ui-design

【解决方案1】：

字符条在视觉上看起来不错，但您真正需要知道的是，您在工作时间内总共落后/领先多远。

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

【讨论】：

【解决方案2】：

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

【讨论】：

饼图的问题在于您有 20 多个几乎相同大小的切片。
一般来说，饼图不利于数据的可视化，因为当它们不是并排的时候，准确比较不同幻灯片的大小是很困难的。饼图在 2D 中不必要地表示 1D 数据。
这完全是你的决定，但我认为它在每个切片上都有数字，以帮助使整个事物在视觉上引人注目。
我真的很喜欢这个想法，我会尝试一下，也许可以将它用作替代视图

【解决方案3】：

“试管/温度计”图像怎么样，就像他们为慈善机构所做的那样......随着时间的推移，它会填满，试图达到一个目标（红线）。

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

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

【讨论】：

我很喜欢这个主意。我想这只是一个垂直进度条，但您可以更轻松地标记该月的小时数和目标小时数，并计算剩余的平均天数。不过，多色可能会让人感到困惑，所以我可能会将它放在条形图旁边。
完全正确。该图像是我在互联网上能找到的最好的图像，但我相信您可以创建一个更准确地指示状态的更好的图像。

【解决方案4】：

X 轴为“经过的工作日”，Y 轴为“每月所需工作的比例”的线图？只有几个数据点，通过直观地推断您是否会早晚达到顶峰应该很清楚。情节看起来像一个不规则的楼梯。

ps。 Edward Tufte 的“定量信息的可视化显示”是一本很好的书，可以提供有关此类主题的想法。

【讨论】：

【解决方案5】：

您的第一个图表可以通过显示剩余时间来改进，如below 所示。直到下一个每周/每月截止日期的剩余时间平均分配给截止日期前的剩余天数。所以 UI 会回答这个问题：“我每天需要工作多少小时才能赶上我的最后期限？”如果用户想请一个上午/下午的假（或者我对您的理解有误？），您应该有一个该天的复选框，然后检查哪些估算值会相应地进行调整。

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

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

对于您的第二张图表，您还应该将每周或每月的截止日期绘制为水平条。在某些情况下，第二张图表可能会更好，但在这种情况下，我会选择第一张图表（经过我的改进），因为它可能更符合用户的心理模型，这样您还可以可视化每日最少 6 小时某种方式。

【讨论】：

请问您能重新附上图片吗？
我不记得我在这里画了什么（6 年前！），我怀疑我是否将它保存在任何地方。
6 年前就是这样！谢谢你回来！你能看看stackoverflow.com/questions/29101926/…

【解决方案6】：

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

【讨论】：