Visualize many appointments for a week view

Question

I'm trying to display "the week" for appointment scheduling. The problem is that my current implementation is way too busy (but it does put everything on the table). Also, the page easily gets taller with more appointments.

I was thinking of having each "time block" (e.g 8:00A) show the number of appointments. Then when that cell is hovered over, it could should the actual appointments with their respective times. Would this take away from being able to see "the week at a glance"?

This is my current layout:

Any other ideas for approaching this are appreciated :) .

Answer 1

I don't think hover is the way to go. It will definitely hamper the 'week at a glance' aspect.

What you could do however is, keep the whole table as it is and provide a 'collapse' button next to each 'hour' on clicking which, all the rows of that hour get compressed to just the 'appointment count' like you mentioned. That way you retain the 'week at a glance' but also allow the user to reduce the vertical scroll when needed.

Also I don't know if it's workable in your app but how about collapsing (by default) all 'hours' into just the 'count' for all 'hours' before the current time? could be useful if the app is being used in real time.

Answer 2

You could split it into an hourly or 10 minute view. Then if you look at the hourly view it just shows the count.

Also to simplify the display you can show fainter lines for the 10 minute intervals, then you don't need the :00, :10 and :20