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:
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!