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?

Booking Calendar UX

  • I really like this horizontal scrolling design. Can I ask where you got this original or if you have any other similar links / designs? I have to design a similar interface soon and i'm struggling to find similar references. Thanks!
    – jonboy
    Dec 17, 2019 at 12:18
  • It's been a long time- but I remember this being my effort to design a calendar booking system and all references to standard calendars I explored were more or less not fitting the mental model that I was working with. I do not recollect any references as such, as this was the result of having not found suitable references! ;)
    – Amit Jain
    Dec 23, 2019 at 7:42

3 Answers 3


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.

  • Thanks Dan. Appreciate your feedback. And I agree with most of it.
    – Amit Jain
    Oct 22, 2015 at 12:28

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

enter image description here

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.

  • Hey Joe, So somebody thinking alike. Thanks, I will explore it further. Even when I was referring the calendars like Google, OSX - I did not find it intuitive. Will explore and come back with results.
    – Amit Jain
    Oct 22, 2015 at 17:53
  • On this I agree with you, right!
    – Fattie
    Oct 22, 2015 at 19:43

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.

  • 1
    Hi Dewey, There is a cognitive reason for it. Showing booked slots, shows to users, that people are booking through this interface and instills sort of confidence in them. Also, makes it clear that this is not just a availability calendar but a booking one. Hope you see the value.
    – Amit Jain
    Oct 22, 2015 at 18:18
  • I think it's admirable to think laterally, but if you don't show the "whole day" the available slots would just be stacked up with no spacing to show where they fit in the clock.
    – Fattie
    Oct 22, 2015 at 19:44

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.