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 '19 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 '19 at 7:42

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.

| improve this answer | |
  • Thanks Dan. Appreciate your feedback. And I agree with most of it. – Amit Jain Oct 22 '15 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.

| improve this answer | |
  • 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 '15 at 17:53
  • On this I agree with you, right! – Fattie Oct 22 '15 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.

| improve this answer | |
  • 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 '15 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 '15 at 19:44

Your Answer

