I am attempting to think a responsive design for a booking calendar which allows booking of available slots. In general, calendar UI's have time of the day as a vertical arrangement and days of the week as horizontal, at the top For example, the Google Calendar. However, If I think a bit about the mental model - of checking availability of a few chosen dates - this attached User Exp made sense. I thought, it would facilitate easy scanning, since time is a factor of date, and user can scan horizontally. In mobile, this could just condense, with each day row, being swipe-able and then tap-able.Thoughts?
I don't think this works well.
There are more hour slots than there are days in the week, and the content in a typical slot tends to be wider than it is tall (since it is usually text). When you combine these facts, it means that the information fits better in the traditional arrangement of columns representing days and rows timeslots.
Your design also has a lot of unnecessary repetition due to repeating the hour in each box. This isn't inherent to the orientation--you could move this to column headers. But if you did so, it would show the wasted vertical space in the layout.
Plus, there is simply the fact that you are doing it differently than the way everyone else does it. This will make it harder to understand, and shouldn't be done without a good reason. I don't see one here.
Just for a contrary view ...
Funnily enough, it looks and feels pretty natural to me.
Interestingly, I just hadn't "noticed" that hours are "usually vertical".
For instance I'd never even clicked on the day or week panel of Mac-Calendar and sure enough as you say ...
Interestingly purely for me that (the OSX Calendar) seems rater unnatural! For me it's like "you have to fit in seven days, so they did it that way".
If I'm not mistaken OP you're suggesting a situation with a small limited number of days. Let's say as an experiment you were doing "three days" specifically.
In fact, I'd surely do "three days" in the way suggested in the OP .. three day rows, with time across.
For me it seems natural that time scrolls across, left-right.
I suggest that you not display time-slots that have been booked. This may help clean up your design.
Users don't need to see an unavailable time-slots if they can't book it any ways.