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 <select> for the 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.

  • The above, only with radio buttons.

This works, but has the same drawbacks, as well as failing accessibility validation for small screens.

  • A jQuery calendar/analog clock combination.

This looked the best so far but confused the hell out of the users because there wasn't a good way to represent unavailable times, and the calendar took up a lot of real-estate since it shows a month and I only allow a 2-week window.

  • A multi-row single-item <select> for the days and times, grouped by day. This is what I'm currently using, and it works but still seem clumsy and is definitely ugly.

FWIW, I only allow the user to pick whole hours, so there's no need for a "minute" hand on any analog clock, and I only allow a max of 14 days from today. They can't pick anything farther out or anything in the past.

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

edit for clarity

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

The appointments don't repeat. Once a customer picks a day and time, they wouldn't come back to the site unless some other appliance breaks.

Customers are allowed to select any day and time that the business is open (M-F, 10am-6PM, Sat 11AM-2PM) within the next 2 weeks, but are not allowed to select a time that another customer has already selected.

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 for anybody researching this in the future . . .

This is the current version of the solution:

Terry's Appliance Serve Date Time Picker

This seems to work nicely.

What's not visible is that I also have

  • aria-label tags on the available slots, so people with screen readers can find what they need

  • title tags on the available slots, so people who can see, can confirm what they're about to click.

  • title tags on the non-available slots so people who can see, can tell that the gray squares are unavailable.

User feedback has been good, and it's easy to see a few days at a time. I would have liked to show more days, but ran into an issue with small screen sizes and "minimum clickable area".

Thank you again for all your help.

ugly buttons

Yes, I'm aware that the "earlier" and "later" buttons are ugly. I'm working on them, but wanted to post the update while I was thinking about it.

Terry

  • 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 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 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 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 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 at 12:27
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

  • Then adjust it, this achieves everything you have asked for. – DarrylGodden Jul 31 at 7:33
  • 1
    @TerryCarmen Added an alternative for smaller screens that still provides the overview I believe is almost essential. – TripeHound Jul 31 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 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

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.

  • 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 at 13:49

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.