I'm designing an scheduling application and I would like to know what's the most intuitive way to display the info of time-breakdown × availability from multiple parties.

Below shows my current design for the availability of instructor, venue & class on a certain day:-

enter image description here

Each hour is breakdown into 6 chunks while red & green colors indicate whether the corresponding resource is available or not.

For example, the specified Instructor was available after 8:00 am while the specified Venue was unavailable from 7:30 am to 8:30 am.

As you might already noticed the table shown is kinda confusing and not accurate since the precision is 10 minutes (i.e., 7:15 am to 8:00 am would turn the 2nd row to 6th row in the table in red). I hope I'm able split the hour further but it seems 10 mins is a good balance to prevent cluttering user's screen. (this was shown in web + mobile app)

May I know what's the alternative way to show this kinda of information?

1 Answer 1


I think your proposal is clear. Some ideas:

  • use the same width for the columns
  • put the number in the middle of the line
  • the hour could be introduced in the minutes column
  • you could add extra lines for 5 minutes, without numbers, then the block could start/end there if necessary without much confusion

enter image description here

  • Yup you're right! You nailed the fact that the time display should act as a boundary instead of a "cell unit" to indicate the time range. Appreciate your idea!
    – Zephyr
    Apr 27, 2017 at 13:39
  • 1
    @Zephyr you are welcome! You expressed it much better than I did :) using boundaries can give more precision to the start/end of the range.
    – Alvaro
    Apr 27, 2017 at 15:41

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.