I'm on a quest to find the most user friendly way to offer a time slot selection to make an appointment in a company's calendar/agenda.
Of course it could present a date-picker (month view) and for each selected date it could load the available time slots, but that would prevent to have a visual overview of multiple days.
Goals I think are important (some obvious):
- As little clicking as possible to reach the result.
- Keep an overview (multiple days visible at the same time).
- The component should be as compact as possible. Meaning that large amounts of buttons would make integration into a form look cluttered.
- Selecting multiple adjacent slots should be possible (even spanned across days, and thus, weeks).
What I have so far is this mock-up:
But this solution is far from ideal because of these limitations:
- I'm pretty sure this would look nice on mobile (given that you can scroll with touch), but on the desktop it would require (imho ugly) left-right buttons to scroll horizontally through the weeks. They would also fall outside of the design, which would make it less compact.
- When there are a large amount of available options on one day (very common), it would require vertical scrolling within the component. Together with the previous remark, that would create scrolling in both directions which just seems too much to me.
- It can create the initial impression that slots on the same horizontal line start at the same time, which they don't. Adding space between slots, relative to the time in-between, would create even more scrolling.
So I am far from sure that the mockup is in the right direction. Any help would be very much appreciated. Whether it is based on the mockup or a completely different approach.