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...

  • Welcome to UX.stackexchange. What exactly is the question you would like answered?
    – Mayo
    May 7, 2015 at 15:03
  • Sorry, I kind of rambled on. My specific question is, what's the most accepted method for a user to drill down from month -> day -> time?
    – Damon
    May 7, 2015 at 15:13
  • Wait, you are actually asking for week -> time? Please edit your question to make it more clear what you are asking and you probably will get an answer.
    – Crissov
    May 16, 2015 at 19:00
  • It seems like there are two aspects to your question: the first part relates to the presentation of information, and the second part relates to the interaction of the UI elements. These are wrapped up in the user behaviour, which is going to be context sensitive so you can't make the question too generic. Perhaps try stating the question to address each of those aspects to make it easier to answer the question.
    – Michael Lai
    May 22, 2015 at 1:10

1 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: Event-booking Calendar 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 !

  • Oh my gosh. Thank you SO. MUCH. for your time to post all of this.
    – Damon
    Jun 1, 2015 at 18:55
  • No problem ;) Don't forget to close your question if you think you have a answer that's good enough for you.
    – refreshfr
    Jun 1, 2015 at 18:58
  • I was really hesitant about a "calendar" look. Now, I can see from your mockups how I am able to drill down from the month -> day that makes sense and yet isn't a text input free for all. Thank you again.
    – Damon
    Jun 2, 2015 at 3:25

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.