时间跟踪的 UI 设计
我正在尝试设计一个计时系统的界面，让用户“一目了然”地看到还需要完成多少时间。
由于没有固定的工作时间，情况变得更加复杂 - 员工在任何给定工作日必须工作至少 6 小时，并且在每个月末该月每个工作日应工作 7.5 小时。 无论哪种方式 7.5 小时都可以结转到下个月。 员工每月还可以享受最多 1 个上午和 1 个下午的“弹性”时间。 时间需求应在第二天 10.15 之前记录，但这一规则在繁忙时间会被扭曲，周末，特别是月末的界限变得更加重要。
那么，最易读的格式是什么，可以显示当前输入的时间并突出显示未完成条目的即将截止日期，同时仍能感觉到员工的进度领先/落后多少（即，如果您该月还有一周时间，并且您在您可以提前 8 小时安排一些额外的羽绒被时间）。
我的第一个想法是绘制每天的条形图，其中 6 处有一条红线。但这并不能让您了解每天或每月的领先或落后程度，或者您是否接近错过最后期限。 .
（请原谅这个可怕的模型）
也许我试图在一个地方传达太多信息？
--
这是迪肯·里德建议的记录时间与所需时间的模型 
--
编辑：这一面非常适合这样的东西。 我将在早上讨论其中一些想法，并希望能在这里发布一些内容。
I'm trying to think an interface for a time-keeping system that will let users see "at a glance" how much time still needs to be completed.
This is complicated by the fact that there are no fixed hours - employees must work at least 6 hours on any given week day, and at the end of each month should have worked 7.5 hours for each week day that month. 7.5 hours either way can be carried over to next month. Employees can also take up to 1 morning and 1 afternoon per month 'flex' time. Time needs should be recorded by 10.15 the following day, but this rule is bent during busy times, and end of week and particularly end of month boundaries become more important.
So what's the most readable format to display the currently entered time and highlight approaching deadlines for uncompleted entries, while still giving a feeling for how far ahead/behind track the employee is (i.e. if you have a week to go that month and you're 8 hours ahead you could schedule a little extra duvet time).
My first take was a bar chart for each day with a red line at 6. But this doesn't give you any idea of how far ahead or behind you are for each day or month or whether you are close to missing a deadline...
(Please excuse the horrible mockup)
Maybe I'm trying to convey too much info in one place?
--
Here's a mockup of time recorded v.s. time required as suggested by Dickon Reed
--
EDIT: this side works great for stuff like this. i'm going to kick some of these ideas around in the morning and hopefully get something posted back here.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（6）
您的第一个图表可以通过显示剩余时间来改进，如下所示下面。 到下一个每周/每月截止日期之前的剩余时间将平均分配到截止日期之前的剩余天数。 因此，用户界面将回答以下问题：“我每天需要工作多少小时才能满足截止日期？” 如果用户想请一天早上/下午的休息（或者我理解错了？），您应该在这一天有一个复选框，选中该复选框后，估算值将相应调整。
您还应该在每个垂直条的顶部显示确切的时间，以便用户不需要在头脑中估计它（我很懒，只将它们添加到模型中的几个条中）。 还要突出显示当天，例如在下图中，这是通过圈出“星期四”并使用粗体字体来表示用户今天工作的时间来完成的。 您还可以对今天的垂直条使用一些视觉效果。
改进的条形图 http://img11.imageshack.us/img11/6755/20090216203339em2.png
对于第二个图表，您还应该以水平条的形式绘制每周或每月的截止日期。 在某些情况下，第二个图表可能会更好，但在这种情况下，我会选择第一个图表（经过我的改进），因为它可能更符合用户的心智模型，这样您还可以可视化每日最少 6 小时某种方式。
Your first chart could be improved by showing the remaining time as shown below. The remaining time until the next weekly/montly deadline is divided evenly over the remaining days before the deadline. So the UI will answer to the question: "How many hours per day will I need to work to meet my deadline?" If the user wants to take one morning/afternoon off (or did I understand you incorrectly?), you should have a checkbox for that day, after checking which the estimates will be adjusted accordingly.
You should also show the exact time on top of every vertical bar, so that the user doesn't need to estimate it in his head (I was lazy and added them to only a couple of bars in the mockup). Also highlight the current day, for example in the below picture this was done by circling "Thursday" and using a bold font for the time that the user has been working today. You could also use some visual effect for today's vertical bar.
improved bar chart http://img11.imageshack.us/img11/6755/20090216203339em2.png
For your second chart you should also draw in the weekly or monthly deadlines, as horizontal bars. In some cases the second chart might be better, but in this case I would settle with the first chart (with my improvements), because it might better correspond to the users' mental model, and that way you can also visualize the daily minimum 6h some way.
怎么样一个“试管/温度计”图像，就像他们为慈善机构所做的那样……当你增加时间，试图达到一个目标（红线）时，它就会填满。
每天用不同的颜色填充，并相应地标记...如果用户加班MT，他们可能在周五之前就到达了队列，等等，
类似于：
替代文本 http://goyamarketing.com/blog/wp-内容/uploads/2008/11/goal_thermometer.gif
how about a "test tube/thermometer" image, like they have for charities... it fills up as you add time, trying to reach a goal (the red line).
Fill each day with a different color, and label accordingly... if the user works overtime M-T, they may have reached the line before Friday, etc.
similar to:
alt text http://goyamarketing.com/blog/wp-content/uploads/2008/11/goal_thermometer.gif
字符栏在视觉上看起来不错，但您真正需要知道的是您在工作时间内总共落后/领先了多远。
如果我理解正确，您只对当前的萨尔多和当前的截止日期感兴趣，因此您可以在 2 个单独的字段中显示该信息（例如图表下方）。 当然，您也可以在图中用一些水平线标记截止日期。
The char bar looks nice visually, but what you really need to know is how far behind/ahead you are in your hours totally.
If i understood correctly, you are interested only in your current saldo and your current deadline, so you could display that information in 2 seperate fields (e.g. below the chart). Of course, you could also mark the deadline with some horizontal line in the graph.
一个饼图怎么样，其中总大小代表最小目标，并为每一天添加饼图，其中包含满足最小一种颜色的实际天数，还有额外时间的天数，然后将剩余的天数填充为灰色切片，其中包含需要的小时数员工必须在他们之间平均分配工作吗？
How about a pie chart where the total size represents the minimum goal and add pie slices for each day with actual days that met the minimum one color, days with extra time another and then fill the remaining days as gray slices with the number of hours the employee would have to work divided evenly among them?
X 轴为“已过工作日”、Y 轴为“每月所需工作完成比例”的线图？ 只需几个数据点，通过视觉推断您是否会提前或较晚到达顶峰就应该很清楚了。 该地块看起来像一个不规则的楼梯。
附注 爱德华·塔夫特（Edward Tufte）的《定量信息的视觉显示》是一本关于此类主题的好书。
A line plot with "working days elapsed" on the X axis and "fraction of monthly required work done" on the Y axis? With only a few data points, it should be clear by visually extrapolating whether you'll hit the top early or late. The plot would look like an irregular staircase.
ps. "The Visual Display of Quantative Information" by Edward Tufte is a great book for ideas on this kind of topic.
为了将 Dickon Reed 的想法更进一步，为什么不将每个点提前或落后 +/- 小时，并且基线始终为 0。这样您就可以获得更多细节。 我不确定我是否明白了我的观点，但如果没有例子就很难做到，而且我的时间很短。
To take Dickon Reed's idea one step further, why not do each point as a +/- hours ahead or behind, with your baseline always 0. That way you have more detail. I'm not sure if I got my point across, but it's hard to do without an example, and I'm short on time.