I need to provide the user an option to select the time range. Please see logic needed:logic

I came up with the such design, but I'm currently not quite happy about it, and can't see the reason. Any advices or comments please welcome. design

Here is how it looks as for now

  • What is 'Full day'? Where the user is selecting the start and end times?
    – Assimiz
    Commented Jul 8, 2015 at 4:14
  • It's about taking a leave day. So when the start and end day are the same (this is selected a step before). So in this case I would like to concretize a little bit, so either a full day leave or the part-day only, and which exactly part of the day the employee will be away.
    – Myro
    Commented Jul 8, 2015 at 6:23
  • Am/pm is a half day. But i if you do a calender app or something then it's not precise enough. I dont see a reason for the whole thing to exist because AM/PM dont seem to contain enough information to make the datepicker so complex
    – BlueWizard
    Commented Jul 8, 2015 at 20:33

2 Answers 2


Instead of going too deep about the implementation of this scenario, why not go the Microsoft Outlook way? Most people are already familiar to this technique - thanks to MS Office. It would be a plus for your users as they don't have to learn a new technique.

Assuming your users are to choose the timeslot or make it a full day event. Here are the screens -

Choose date and timeslot:

enter image description here

Make it a full day event:

enter image description here


Check this:

enter image description here

  • That's a really close shot, Dipak! Thanks. The only issue is that I don't need user to state the timeslot. I don't need the details on when You exactly are going to see dentist, you know. Only 'Morning' or 'Afternoon', in case not the whole day.
    – Myro
    Commented Jul 8, 2015 at 9:24
  • 1
    @Myro please check the edit
    – Dipak
    Commented Jul 8, 2015 at 9:52
  • You're welcome - Mark it accepted :)
    – Dipak
    Commented Jul 9, 2015 at 7:59

Revising this response after the information that was provided after the inital question was asked (user requesting leave / buttons being disabled if full day is selected).

I believe that your current design pattern would be appropriate if the user was required to input specific times when they wouldn't be on leave for a full day. However, since you are implementing two different controls for a user to select three implicit options (will they be away for the "Full Day", "AM" or "PM"), I believe it is quite confusing. I'd also recommend changing "AM" to "Morning" and "PM" to "Afternoon" to be more relatable to users (since they're not being specifically requested to enter times).

I'd challenge the thought process behind the flowchart and it's hierarchy as essentially one question is being asked and you are only expecting one of the three predefined responses. Using two different controls to answer the one question doesn't seem appropriate. Below is what I'd go with if I was asking for a user to enter a predefined time range of how long they'd need for one day's leave:


download bmml source – Wireframes created with Balsamiq Mockups

If you are wanting to capture the time that someone would be taking leave for, most organisations would be capturing the exact time if it wasn't a full day. In this instance, the design pattern you were going for (along with actual inputs for the time) would be appropriate. However since you are only capturing predetermined time ranges, using two controls to capture the information and the hierarchy of questioning in the flow chart doesn't seem appropriate.

  • I suppose to have the tabs disabled when the checkbox is on. Also don't' want to break hierarchy by bringing them all at one level.
    – Myro
    Commented Jul 8, 2015 at 6:33
  • @Myro without seeing more of how the whole UI has been designed, it would be impossible to tell that there is a hierarchy without the flowchart you attached. Also I question the relevance of the hierarchy you are wanting to implement due to the fact you are not requesting specific timeframes if a full day has not been selected. I'm not sure if you are looking for visual design advice with this question, but due to fact that you are not requesting specific times when it's not a full day, using different controls for three implicit options is quite confusing and I would not recommend it.
    – Clint
    Commented Jul 8, 2015 at 6:58
  • 1
    I agree 100%. There are three choices: full, am, pm. Since there is no other input required for any of the choices, there is no need for a "sub-choice". That is adding another layer that is unnecessary. The best UX is usually the simplest.
    – sn3ll
    Commented Jul 8, 2015 at 14:49

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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