Time slot selection

Question

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.

It doesn't really matter much interface-wise, but because it creates minor limitations: this will be integrated into a web form which, ideally, is both usable by desktops and mobile devices (it has to rely on JavaScript).

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.

Answer 1

Hmmm. If I understand your question, you want the solution to be as flexible as possible as well - to be able to select multiple consecutive days as easily as a few hours (or even minutes). In broad terms, I'm thinking:

• Zoom and pan to get the broad timeframe (e.g. zoom out to get years, pan across to select 2015, zoom in to select the first week in January (easy with mobile, slightly more cumbersome but still doable with mouse
• Select the general timeframe (e.g. the few hours required) and enter the appointment details. At this point, further refinement of the timeframe can be performed

The general principle is to let the user be as precise as they want to be - a bit like a conversation where I might say "I'll see you next Tuesday" and we then narrow it down to 2:15 at the coffee shop.

Answer 2

Interesting web application. Something you might want to look into is Adam Shaw's Full Calander jQuery plugin. I have used it for a while and it is quite extendable. So far from what my company developers have seen and used, they are pretty impressive. It has an extension for Google Calendar and it also we have also got it hooked up to Microsoft Exchange servers as a POC.

For desktop users the interface is very intuitive. Just like Microsoft Office and Google Calander interface's. For mobile users sadly click and drag support does not exist. The plugin does have a full API that allows you to build on top of the plugin. Not a one size fits all solution but definitively gives a good foundation.