UX to choose month/day/time for reservation form

Question

I am constructing a reservation/booking form for my site. I am struggling with how to present the fields to the user that makes the most sense.

In order for the user to reserve a session they need to choose:

1. month
2. day (each reservation is a week in duration so each day is only the Monday of the given month)
3. time

Each session has 'x' spots. For example, I can have 3 clients at one time per session. Once any give session is full, obviously I want to remove that option for future users to choose.

I have also considered making the user enter a contact name, email & number of spots requested before the user gets to choose the actual session time.

Maybe that's a better approach? That way I'm only showing available sessions for the criteria from the get-go? My reasoning here is that, if you need 3 spots, and I know this before you attempt to find a spot - I can show you only the sessions that have 3 spots available.

Then it's almost like I could display a list of div's - the user just clicks/taps the div that has the month, day, and time. Almost like ordering from a touch-screen or something.

This is where I just talk myself in circles.

This approach is appealing. Since I am only choosing the Monday of each month, my day list is only going to be 4 long. The dots could signify the # of sessions left...

Answer 1

When I think "booking", I think calendar. Almost every transportation service (buses, metro, planes) does that, it's very fast and intuitive.

In order to display dates with "special events", some calendars put an emphasis on the date, either by coloring them, changing the background or with bold text. You can also indicate the status of a date's events by changing its color.

You can checkout Google Flights that has a calendar with filter options that displays information directly in the calendar to make it faster to find an interesting flight.

The french website Capitaine Train (available in english, but requires a free sign-up) also has a calendar with options below (departure time of trains).

---

Anyways, I've made this mock-up that should be pretty self-explanatory: Direct link to full-size image (1236x700, 66KB)

With a design like this, it is easy to:

• navigate the calendar
• change the number of spots we want to find sessions we really want
• identify dates with sessions
• view (non-)available sessions and more details about them
• register to a session

It also potentially greatly reduces the number of clicks the user has to input in order to go through the process of finding a session.

Feel free to share your thoughts !