I've got a dialog that helps an user to set up working hours for different days in a week. In this dialog an user can choose a day of week and hours/minutes which point on start/end of working time, e.g. "Mon 9:30 - Mon 16:00", "Fri 21:00 - Sat 04:30", etc.

I've already got such dialog which works properly, but users ask to improve the dialog design to simplify (and make more comfortable) their work with the dialog.

I've decided to begin with the following question here: Is there any product which has similar dialogs to solve a similar task effectively? I could start learning from existing solutions. Could anyone please tell me names or links to such products?

UPDATE. This is the dialog looks like at the moment. It looks ugly a bit :) But I have no idea what I need to start with and where I need to go. Could anyone please advise any improvements?

This is the dialog looks like at the moment

The controls are (from top to bottom):

  1. A drop-down list and "X" button. A list of user-defined presets. "24/5" is a name of the current preset. "X" button deletes the current preset. To insert a new one just type another name at the drop-down list area.
  2. Time pickers with spin buttons. It sets up start/end time.
  3. Buttons "Update", "Insert", "Delete". Updates/deletes an item selected in the list box below. The Insert button is enabled in case the list box below doesn't contain start/end time which the time pickers currently contain.
  4. A list box. A list of start/end time inserted by an user into the current preset.
  • 2
    Hi @Roman. We can't provide you with lists of examples to existing products (we need questions that can be given an actual answer ) but if it's advice about the dialog you already have then you should be able to get some answers here. If so, can you post a sketch of your current approach?
    – JonW
    Commented May 2, 2012 at 14:14
  • OK. I've updated the question with a screenshot.
    – Rom098
    Commented May 2, 2012 at 21:34

2 Answers 2


We got a page like that in a server admin interface. You can unfortunately not download a demo of it (as it is the server admin interface) but it looks kind of like this:


download bmml source – Wireframes created with Balsamiq Mockups

One of those bars each for every day of the week. And then a set of presets like "Always", "Never", "Working hours", and so on.


In this case the draggable handles is the only input with discrete steps each 15 or even 30 minutes. The bar can also be split into several bars, allowing for multiple intervals during the same day; and rejoined by dragging two bar handles to overlap.

Oh, and all cred to our amazing designer, not me, of course. :)

  • out of curiosity, how do you handle someone trying to set the start time to the end time with that control? Just not allowing it?
    – GotDibbs
    Commented May 2, 2012 at 15:02
  • Looks cool :) I suppose there is an additional way to set start/end time - manually from keyboard, isn't it?
    – Rom098
    Commented May 2, 2012 at 15:05
  • I'll update the answer. It cannot be set shorter than a certain interval of 15 or 30 min, if I remember it correctly.
    – JOG
    Commented May 2, 2012 at 20:16
  • 1
    @Roman: How about when clicking on the start/end time captions? As for keyboard navigation, the captions could be added to the tab list, so that you can use <Tab> to move from Monday start, Monday end, Tuesday start, Tuesday end, etc. And if you wanna get really fancy, <Left>/<Right> moves the currently focused handle (start/end) and <Up>/<Down> focuses the previous/next day. Commented May 5, 2012 at 3:35

Lotus Notes

Lotus Notes calendar preferences

I am aware it is not very suitable for your need. Therefore I would suggest to improve JOG's answer: combine your existing dialog with continuous time bar (scrollable across entire week/month) showing already entered values (from keyboard, as in your screenshot) and with ability to drag to add/modify more intervals.


download bmml source – Wireframes created with Balsamiq Mockups

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.