0

I have a website that lets the user select a specific time on a specific day, like "2PM on Wednesday July 2, 2019".

I've tried a number of options, but they all seem clumsy.

  • A multi-row single-item list of days, and the same for the time, with the times updated via jQuery as the date changes.

This was functional, but the users seemed to not understand that they needed to change the day to see the available times for that day.

  • A jQuery calendar/analog clock combination.

This was visually impressive but confused the hell out of the users because there wasn't a good way to represent unavailable times on a clock.

  • A multi-row single-item select for the days and times, grouped by day. It works but still seem clumsy and is definitely ugly.

Has anybody run into anything with a better UI/UX for letting users pick dates and times?

notes

These are repair appointments to fix broken appliances (refrigerators, stoves, etc.)

Each customer can select any available unused appointment.

IE if Bob picked 11AM on Wednesday, Sally would not be allowed to pick 9AM (not open yet) or 11AM (Bob already picked it), but could pick 10AM or any time between 12PM and closing.

follow-up

This is the current version of the solution:

Current version of date/time picker

It has resulted in very very few confused or angry/annoyed customers, and a number of compliments.

  • I only show about 5 days out, so people can't accidentally pick the "wrong week". This had been an issue before. There is never more than one instance of any day of the week.
  • All times are always shown, so 11am, for example always appears in the same place, whether it's available or not.
  • Unavailable times are shown grayed out with a strike-through and a disabled radio button. Even though many of my customers are elderly, nobody has been confused as to which appointments are available.

enhancement

The back-end now allows/disallows various appointments based on the customer's address.

So for example, users living in the northeast quadrant of the county would see all the time-slots as "unavailable" for the days we're covering the southwest.

Again, thanks to all of you for your help!

Improve this question
8
  • 1
    I think you could update a little this question to be more UX oriented and not so technical. Question about implementation are not allowed here and you seem to be more concern about the libraries you use and how they impact the developers and less the users.
    – Madalina Taina
    Jul 29, 2019 at 3:10
  • 1
    I agree with Madalina, let's go back to the users, what are they trying to do and why?
    – DarrylGodden
    Jul 29, 2019 at 7:05
  • @madalina-taina I don't actually care what libraries I'm using and had mentioned the jQuery date time picker as an example of a UI. I need a good way of presenting the users with a list of available time-slots and letting them pick one.
    – Terry Carmen
    Jul 30, 2019 at 12:08
  • @DarrylGodden The users are trying to pick a hour on a particular day. The hours are between my opening and closing times on the various days, and hours that other users have picked are excluded.
    – Terry Carmen
    Jul 30, 2019 at 12:10
  • 1
    @TerryCarmen I maintain what I said. I'm a developer and I still find your question hard to follow. In fact, it is not clear what you ask. I will try to answer you because in the comment is hard to format the text.
    – Madalina Taina
    Jul 30, 2019 at 12:27

3 Answers 3

Reset to default
3

From a user's perspective, it will be very helpful to provide an overview of what times are available (think also of the way many cinema/theatre sites show a visual seating plan when booking tickets). As a starting point, you should be looking for something along the lines of the following, where they can both see what times are available, and pick the one they want:

Time-slot picker

This image was taken from the question jQuery Calendar time selection suggestion asked on StackOverflow a few years ago. "Closed" times are shown in grey, already-booked-slots are marked with a grey lozenge and the user's current selection is marked with a blue lozenge.

From this starting point, several variations are possible:

  • You can omit rows for most of the "closed" times (in your case, before 10 am; 6 pm and after) and grey-out just those extra times on Saturday when you're closed.

  • You can omit (or make it only a narrow place-holder) the column for Sunday.

  • If space permits (desktop/tablet) you might be able to show both weeks at once.

Where space is restricted, while you could just show fewer columns at a time (e.g. three days at a time), I think you would lose a lot by not letting the user see at least a week's worth of availability.

One approach could be to show a general overview and ask the user to first pick the day they want:

enter image description here

Once they have selected the day, they can then choose the time-slot (with the option of changing to another day if they want):

enter image description here

Improve this answer
3
  • Then adjust it, this achieves everything you have asked for.
    – DarrylGodden
    Jul 31, 2019 at 7:33
  • 1
    @TerryCarmen Added an alternative for smaller screens that still provides the overview I believe is almost essential.
    – TripeHound
    Jul 31, 2019 at 8:57
  • @TripeHound - That's spectacular! I love the day/time grid you have right under "one approach"! Thank you very, very much!
    – Terry Carmen
    Jul 31, 2019 at 14:55
1

I made a mock up just for a reference for the structure since I saw that it was your main concern.

It's important that you show some visual clue in the calendar to different days with/without available hours so the user does not click there in vain.

Hope it helps.

enter image description here

Improve this answer
0

From what I understood, you need to let the user do a recurrent appointment on a specific day of a week, same hour, for an interval of time or let him do an appointment for a specific hour, every day, for an interval of time (I tried to see the problem because you couldn't really explain what you need, even we tried to ask for info in the comments).

In this case, I don't recommend a DateTimePicker or a DatePicker because selecting multiple random days is not the expected behavior and it can be very confusing for the user.

My opinion is, in this case, to use the natural language, like:

"I need an appointment every Monday, at 11 am, in the next 2 months"

"I need an appointment every Friday, at any hour, in the next 2 weeks"

where the bold words are selects.

Improve this answer
1
  • The appointments don't repeat (see edit). Also, the user needs to be able to see the available/unavailable times, otherwise they're left guessing if the time they want is available. Any particular day could easily be booked up except for one or two slots, so letting the user try to pick times with natural language wouldn't be effective.
    – Terry Carmen
    Jul 30, 2019 at 13:49

Your Answer

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

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