1

I've already designed an HR attendance application, given the apps UI below:

A screen of an HR application with an animated timer that counts up

When they clock in, the progress fills up. When they take a break the progress stops and the grey part below starts counting. When they resume the grey stops and the timer starts again: break time + elapsed time.

I don't consider this a good UI right now, because it doesn't clearly state and visualize the break. I've thought about adding an overlapping circle on top of the current one and visualize the break with the same grey color.

What are some options for visualizing break times in an HR attendance application, given the current UI shown in the attached image? Specifically, I'm looking for ways to clearly and visually indicate breaks without adding too much clutter to the interface.

Improve this question
6
  • Why a circle? Is the total amount of time fixed? ...or can it vary.
    – bloodyKnuckles
    Jan 9 at 14:39
  • @bloodyKnuckles Total amount of time is fixed because it's based on the work hours. I've made the work hours really small for debugging purposes. Usually it's 8 hours and the circle gets filled uip much slower. I went with the circle because you can also change the work hours in the settings.
    – Akar
    Jan 11 at 14:32
  • Hi Akar, what would you say is the "job to be done" for showing the user their time in, time out, and break time? It doesn't seem like "time out" would be a piece of the donut / slice of the pie, so to speak... what does this information help them do? Thanks.
    – Izquierdo
    Jan 11 at 21:55
  • @Izquierdo I am not putting the "time out" in the slice. I've resorted to using just colors for the entire circle. When the user clocks in, the circle gets filled up every second, and the color is that primary purple color. When the user takes a break, it'll turn into a dark gray, and the timer stops. But the value in the card increases according to the break time. When they clock out, the circle turns orange and it'll stop.
    – Akar
    Jan 13 at 16:00
  • Thanks for the clarification. Does this account for overtime or working beyond the total value of the circle?
    – Izquierdo
    Jan 13 at 18:16

2 Answers 2

Reset to default
0

The trackers at the bottom seem really great (Clock in, break, clock out), but the clock/timer is a bit confusing to me. I would look to other examples.

What I have seen in similar apps is that it either functions as an analog clock with points, or the times are laid out vertically.

In the example below (from a pomodoro timer app), the clock hand shows the current time, the red shows the time already worked, and the light red shows the time remaining in the day. The time at the bottom (22:32) is the time remaining in the work session.

Image from Pomodoro timer app

This second example below (from google calendar) shows the time vertically. There are time interval markers on the left, the purple shows the duration of the task, and the red bar shows the current time.

Google calendar example

You could adopt either approach, maybe look for more examples. I think it is important to make sure they can see the current time, whether they are currently clocked in, how long they have been clocked in for, and have a different colour for the breaks so that way they can see when they've been taken. Maybe ask your potential users what is important for them to see.

Once you have decided on a format, I would suggest making a sketch and running it by some friends or users to see if it includes all of the information they would want, and to make sure everything makes sense to them.

Hope this helps!

Improve this answer
0

Given the circle representing a fixed amount of time, and assuming the sum of clock hours and break hour equals the total fixed amount of time, colored strokes visually represent the relationship of each type, clock and break, to each other and to the total amount of time.

The problem with using gray as the break color is it's already used as the circle background, so choosing green for break instead:

clock break

 

If users need to know amounts of time on the clock and on break, that can also be added as summaries along with start times.

 

clock out

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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