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.

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.
share|improve this question
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 May 2 '12 at 14:14
    
OK. I've updated the question with a screenshot. –  Rom098 May 2 '12 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:

mockup

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.

EDIT:

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. :)

share|improve this answer
    
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 May 2 '12 at 15:02
    
Looks cool :) I suppose there is an additional way to set start/end time - manually from keyboard, isn't it? –  Rom098 May 2 '12 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 May 2 '12 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. –  Andres Riofrio May 5 '12 at 3:35
    
@AndresRiofrio: Good idea, thanks. –  Rom098 May 5 '12 at 6:17

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.

mockup

download bmml source – Wireframes created with Balsamiq Mockups

share|improve this answer

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.