3

In my web application I want the user to select his work schedule. For example, someone could select [Sunday (8AM - 5PM), Monday (9AM-1PM , 2PM-6PM) ...etc. So the user has the freedom to select any combination of days with any working hours he pleases.

How am I going to prompt the user to select his schedule in an easy intuitive way.

Improve this question
1

2 Answers 2

Reset to default
3

This is the approach we use for recording client working hours, for the purposes of answering questions like "It's 5pm Friday, can we call them or do we need to wait until tomorrow?"

enter image description here

A single jQuery range slider for each day of the week. Dragging the start and end handle together (as shown for Saturday and Sunday) means "doesn't work on that day".

It's a simple approach; it doesn't allow you to specify lunch hours or breaks because a) that would complicate the interface, and b) people don't always take their lunch hours or breaks at the same time each day. You will need to decide whether this is an appropriate tradeoff for your application.

The design show allows for 24-hour selection; but because most people work from 9am (ish) to 6pm (ish) these are the only labels shown.

The background bars represent 15 minute intervals; the darker bars are exact hours. You can of course use any granularity you like, but too fine (5 minutes, 1 minute etc.) and users may find the pixel-precision required to get an exact time fiddly and annoying. I think the scale shown here is a good compromise between "chunky and non-fiddly" and "allows a reasonable accuracy of specifying an employee's start and finish times".

Improve this answer
3
  • Unfortunately knowing lunch break time is critical to my application.
    – wael34218
    Commented Sep 9, 2012 at 11:19
  • 2
    @wael34218: Lunch break solution: If you click the bar, let's say at 1 PM, it will split in to two bars, one for 9 PM - 1 PM and one with 2 PM - 6 PM. The bars respectively get their own handles.
    – JOG
    Commented Sep 11, 2012 at 15:39
  • @JOG That is actually a smart solution. Maybe we could make the second slider dynamically change depending on when the first slider ends.
    – wael34218
    Commented Sep 13, 2012 at 9:57
1

I would recommend an simple approach like this

enter image description here

The user is shown the current week and is shown a color code which he can use to specify his work hours.Once he selects his work hours he can drag from top to down on each day to set the time in his calender. This approach works well since the user can set the time easily with one single mouse motion without having to do any text entry

Improve this answer
6
  • I like it, but isn't there a simpler way to do it?
    – wael34218
    Commented Sep 7, 2012 at 20:09
  • Define simpler ?
    – Mervin
    Commented Sep 7, 2012 at 20:10
  • easier to implement technically (coding)
    – wael34218
    Commented Sep 7, 2012 at 21:16
  • 2
    @wael34218: just grab a plugin, like here: arshaw.com/js/fullcalendar-1.5.4/demos/selectable.html (switch to week view) - what I thought of (based on James version) wouldn't be simpler, as you'd like a flexible solution with great UI, well, these are hard to implement by definition: that's their tradeoff
    – Aadaam
    Commented Sep 9, 2012 at 13:21
  • @wael34218 UX.SE is meant for answers on how things should be done (UX-wise). For how to implement, use SO (stackoverflow.com),
    – Danny Varod
    Commented Sep 9, 2012 at 14:45

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.