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:

calendar slot picker

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.

  • What the actual context of this app? Who is choosing a time slot, and what are the factors behind their choice? Will they have discretion to change the slot booked if the company doesn't have the ideal time available? What's the costs of implying time slots are adjacent? Does the user need to know when the company is engaged, or just the times available? The answers to these questions will inform the interface. Jun 30, 2012 at 16:41
  • @JimmyBreck-McKye: thank you for your feedback. An example usage is a patient booking an appointment with a doctor. But appointments can be 2 full day selections too (e.g. nights at a hotel). Only available slots are shown. So changes are not necessary. About adjacency you might be right: priority #1 is user friendliness, but priority #2 is indeed privacy (of the company's calendar). I hope that answers your questions?
    – smhg
    Jun 30, 2012 at 17:10
  • Is this a tool that's to be used across different domains? Because I don't think you're going to get a UI that will work for such different circumstances. For instance, in some contexts, a user will need to see slots adjacent to their ideal choice, so they can see if they can fudge their requirements, whereas in others, if a user can't get the time they need, they'll just want to see other providers who can provide that time. These contexts will require different interfaces. Jun 30, 2012 at 17:17
  • @JimmyBreck-McKye I can be clear about that: the other providers are not an option. It is only the first option that is valid: if the preferred time is not available, an adjacent time or a different day will be the next best thing for the end user.
    – smhg
    Jun 30, 2012 at 17:22
  • The obvious solution would be something like: link (it is in french, but it's about the visualization of the week and free slots). That offers the functionality required, but there are immediately 3 things that bother me: 1) in many cases, there is many times more unused (grey) space compared space used for the actual available time slots 2) in a situation the company has 10min-slots and almost all slots are available on a given day, the list gets endless 3) on mobile devices, this is just not practical
    – smhg
    Jun 30, 2012 at 17:28

2 Answers 2


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.

  • It is possible that it turns out that selecting days and hours cannot be combined in one component. I don't know, but currently it sounds logical to me that it would work. In the case of a hotel reservation it is basically a timespan too (e.g. 14:00 - 11:00). Any appointment is in the end, no? And thanks for mentioning these principles, that helps.
    – smhg
    Jul 4, 2012 at 13:38

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.

  • 2
    I'm afraid that is not an answer to the question. I'm asking about a concept of presenting available time slots in a user-friendly way. Your answer is about a specific implementation and its technology.
    – smhg
    Jun 30, 2012 at 18:17

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.