Take the 2-minute tour ×

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.

UI-element prototype, case 1 UI-element prototype, case 2

The questions is:

  1. Is it clear enought?
  2. Is there a better/clear/native way to solve the problem
share|improve this question
add comment

3 Answers

up vote 5 down vote accepted

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: enter image description here

share|improve this answer
In a "web based" Google calendar (google.com/calendar) the "Find a time" function is acting almost the same ways as mine UI-element but i can't add more than one time span for a task within a day there. D'you mean some other Google Calendar implementation? –  Olegas May 11 '11 at 8:37
@Olegas You are right, there isn't an option for more than one time span for a given task, but the way you are having them choose time spans is pretty standard. –  Ben Durnell May 11 '11 at 12:57
add comment

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.

share|improve this answer
add comment

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?
share|improve this answer
add comment

Your Answer


