I am working on a doctor availability schedule page. In this page I need to setup the available times for each day in a week for a doctor.

This is a one-time activity. Something is repeated for every week. I am not sure how to create an UX for this. The screenshot below is referenced from http://checkappointments.com/

enter image description here

But I dont want a location so I X'd it out.

Also, the UI should let the user easily choose the Start & End Time.

Is there a better UX for this?

  • 2
    Why is there both a "day" and a "start/end date"? One hint I could give is that a 24h time input is much easier to interact with because there is only one input. Other than that, perhaps you can make your question a bit more specific? Is there something you tried that didn't work? Commented Apr 27, 2013 at 7:45
  • @KoenLageveen, I yet to design the page. The user will set the working hours for a doctor. A doctor can visit only 3 days a week and with specific time slot (Ex: 2 P.M to 6 P.M)
    – Billa
    Commented Apr 27, 2013 at 7:54
  • +1 for Koen's comment on AM/PM. In my country we use 24h format and it's way less complicated when planning the hours fields. Commented Apr 27, 2013 at 8:00

3 Answers 3


Why don't you try a more graphical approach ?

Use a calendar and put your times directly into context.

enter image description here

To repeat from a week to another, just add a "periodic" option close to the validation

  • +1 Much better than any list of times (especially without 24-hour time specs). People are vision-oriented creatures and this gives you a lot of information about the scheduled slots in relation to each other in one glance. It would be a breeze to spot slots that are not exactly "nice". Think of a night shift followed by a morning shift... Much harder to spot in a list. Commented Apr 27, 2013 at 10:46
  • can you explain what you mean by the validate button? validate against what? what could be invalid in this scenario?
    – abbood
    Commented Jul 13, 2018 at 13:48
  • @abbood my mistake, Validate/Validation should say Save or something. I badly translated from french :( Commented Apr 1, 2019 at 8:15

I have created an account on checkappointments.com to check how it works. One important information is that there is no limit to how many dates user can schedule working hours for. In the same time, most doctors work on weekly basis, so week to week the schedule does not change much. I would suggest then setting up a standard weekly calendar first, and then add a possibility to manually override the settings.

It may be good to consider also a situation where the schedule does not change from day to day. This information can be also propagated automatically to other days, once user fills in the first one.

It's also worth considering to simplify time entering to using just numbers, so that user does not need to enter ":". The "minutes" field could be filled in automatically with "00", as this is what I think will be most popular choice.

So, here comes the wireframe:

enter image description here

Update: This is an updated wireframe, with a possibility to add multiple time slots per day (based on a comment below my answer). Previous version here:

enter image description here

Btw, for "daily" only one row should be displayed in the "Set up default schedule" tab, without day name. And accordingly: 14 rows for bi-weekly. Regarding the "Set up specific dates" tab, there is also an option to go for calendar-like view, something like you have e.g. on Google Calendar. In my solution, past dates are hidden, as they would clutter the interface pretty much, and are not important regarding scheduling future availability. Still, user can go back to see the history.

  • 1
    This really looks great. Is there a flexible way to specify that a doctor can visit twice a day (Ex: 9 A.M - 11 A.M and 4 P.M to 6 P.M in all days in a week?
    – Billa
    Commented Apr 27, 2013 at 8:03
  • Sure. Wait a sec, I will add an image in my answer. Commented Apr 27, 2013 at 8:07

First user (secretary?) needs to pick the doctor and the office, then probably the week, maybe somebody wants to schedule more than 1 week ahead of time? Depending on these selections the system might want to offer 'smart defaults' in case the doctor works the same schedule more often.

Then for the input itself you might want to start with one line only and once that line is complete another line (day) can be added. In that way you avoid having to fill out all 5 days even though the doctor only works 3 days.

As mentioned above, not sure what the start/end date mean, you can probably get rid of them.

What are the increments for the time slots? 1 hour? 1/2 hour? Only offer available increments, not minutes. How about a simple time slider with two handles? I find them really nice especially once they align for all days, it's almost like a mini-agenda.

Can the doctor work on the same day in different locations? Then you should allow users to pick the same day multiple times. Add basic validation to detect input errors like overlaps.

Hope that helps

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.