6

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
Improve this question
5

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

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. – bendur May 11 '11 at 12:57
5

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.

Improve this 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?
Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.