We are creating a UI for a timeclock system, showing workers clock-ins & clock-outs which make up their "shifts".

Something we didn't take into account was worker's shifts can take place over multiple dates (i.e. worker who does night shift). So they will clock-in one day and clock-out the next.

Here's what our web dev came up with as a short-term solution.

showing shifts which start/end over multiple dates

It's not a bad solution - I'm just wondering is it the best, or is there better?

The image I've shown above is the Weekly view. You could filter this view to shown just 1 day.

Thanks in advance for any input!

PS - First-time UX poster, so if I'm out of line asking this sort of question let me know.

3 Answers 3


Is it necessary for your use case to know how many hours someone worked in a specific day rather than during his shift? In other words, is the value “5h18m” meaningful in your situation?

If no, then maybe you could simply have one row for each “clock in => clock out” period. As Jess Eddy mentioned in his response, it doesn’t really make sense to have a date column when shifts are not day-bound.

Listview by shift instead of by day

When looking at the weekly view, you could include shifts that ended on the first day of the week.

If you really need how many hours someone worked between, let’s say, from Monday 8AM to the next Monday 8AM, I would display this total with a different control.


Proximity is an important rule in design: "The principle of proximity is simply the process of ensuring related design elements are placed together. Any unrelated items, should be spaced apart. Close proximity indicates that items are connected or have a relationship to each other and become one visual unit which helps to organise or give structure to a layout."


In your design, the items that are related are not close to one another, they are separated so it's not possible to identify that they're related (= poor usability).

Given that clock in and clock out times can take place on different days, it might not make sense to have your date column as a column as it's very fixed.


You could display these stretches on a timeline, something like this:

enter image description here

You can also mix the timeline and table layout, something like this:

enter image description here

Look at the timeline column showing the months. You could make a version of this that shows the shift length as a bar, with separate sub-columns for multiple days.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.