Best way to select/edit time spans in limit of a day

Question

I'm developing an Android application which is related to a time planning. I need to show/edit some time span related information. I.e.

• Shop is working 9:00-18:00 at weekdays with a hourly break 12:00-13:00.
• Mute the phone volume 21:00-07:00 at weekdays
• etc...

I've implemented the following UI-element for my needs (this is a prototype). The following samples illustrates the cases above. The spans can be dragged by a body up and down, the limits can be changed by dragging handles at the top and bottom (indicated by arrows), spans will be merged if they intersect, new one can be added by double-tap and existing one can be removed by double tab also.

The questions is:

1. Is it clear enought?
2. Is there a better/clear/native way to solve the problem

Answer 1

That's pretty standard for calendars. Google Calendar, iCal.app, etc do the same thing so it should be pretty clear to users.

I would be worried about how small the hour sections are, and if it is easy enough for fat fingers to select the proper ones.

If this approach doesn't work out, maybe try some sliders? Kayak.com uses some like this:

Answer 2

Instead of trying to show all the hours of the day, which makes them small. You could zoom in to show just 12 at a time. Then the user can drag up and down to see more. If they are selecting and the time they are looking for is off screen the page will scroll as they drag up or down to that time.

Answer 3

I think it looks pretty good. I really like that you've displayed the time range and duration in larger letters over top of the highlighted box. A couple of minor suggestions:

• I worry about the arrows getting too close together and having trouble grabbing the correct one on your left screen shot. Perhaps the grab handles could go inside the range instead of outside?
• Also, the duration looks a little too much like another time. Perhaps you could use a format like "5 hours" or "4h30" or something like that?