Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

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.

share|improve this question
    
Duplicate? ux.stackexchange.com/questions/20860/… –  JOG Sep 11 '12 at 15:35
add comment

2 Answers

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".

share|improve this answer
    
Unfortunately knowing lunch break time is critical to my application. –  wael34218 Sep 9 '12 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 Sep 11 '12 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 Sep 13 '12 at 9:57
add comment

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

share|improve this answer
    
I like it, but isn't there a simpler way to do it? –  wael34218 Sep 7 '12 at 20:09
    
Define simpler ? –  Mervin Johnsingh Sep 7 '12 at 20:10
    
easier to implement technically (coding) –  wael34218 Sep 7 '12 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 Sep 9 '12 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 Sep 9 '12 at 14:45
show 2 more comments

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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