User Experience Stack Exchange is a question and answer site for user experience researchers and experts. Join them; it only takes a minute:

Sign up
Here's how it works:
  1. Anybody can ask a question
  2. Anybody can answer
  3. The best answers are voted up and rise to the top

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
up vote 5 down vote accepted

That's pretty standard for calendars. Google Calendar,, 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? uses some like this: enter image description here

share|improve this answer
In a "web based" Google 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

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

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

Your Answer


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.