So we have data that is to be searched based on date, time and preferred duration. Think of it like a meeting scheduling system with a search functionality of finding a meeting room at one of the many locations.

Now a calendar view seems to be the most appropriate for displaying the search results but a calendar is one-dimensional i.e. calender per room.

What's the best way to show multiple slots on calendar? Just say 'X slots' available for that duration and have the user click to see more? There would be quite a few overlaps and it'd be a mess at times. Any ideas? Is there a better way to visualize the search results?

(Is the calendar view even apt for this situation or should one just back to a list view?)

  • A calendar view can be quite flexible. What time period do you plan to show (month, week or day)? Also if you use a calendar app on your computer, you could play around with the different possibilities of presenting the information to the user.
    – quentinxs
    Commented Feb 28, 2012 at 5:07

1 Answer 1


The list view may work well if users have very specific and inflexible dates, times, and durations. Then you may want to provide a Search/Query dialog for those parameters and list the results in a list view. This makes it easy for users to see an exhaustive list of the possibilities even if they span wide ranges of dates. It works best if all results that fit the entered criteria are pretty much equally satisfactory regarding date/time. Users can then explore and select an option based primarily on non-critical non-time criteria (e.g., Does the room include a projector? Which one is nearest my office?).

Graphic depictions such as calendar views, are probably best if your users have flexible or vague criteria (e.g., an hour or two sometime the week of the 21st, preferably in the morning) or are interested in the relations among the “rooms” (e.g., to accommodate an all-day meeting on the 3rd, use Room 201 in the morning and 314 in the afternoon). These allow users to explore the options on time-based criteria. Among the graphic options:

  • If the times and/or durations are inflexible, but the dates are flexible, a calendar view may be okay, where you show days of the week on the X-axis and weeks of the month on the Y-axis. The identity of the options are listed in each day’s cell. The user can then choose best date. It works best if other non-time criteria are not particularly important or can be inferred by the option identity (e.g., users know that Room 201 is the “big conference room”), so users don’t have to drilldown too much for details.

  • An appointment book view, with date on the X-axis and time of each day on the Y-axis may only work if there are few options (five or less alternative “rooms”). Available times within each day can then be highlighted (or non-available times blocked off). Then the “appointment books” for each option may be shown side by side or the user can “page” among the options.

  • If there many options, then consider a Gantt chart, showing available times as stacked horizontal bars over the X-axis of date and time. For a 1000-pixel-high window, more than 30 labeled options may be visible at once. Users can zoom in on a particular day or week to see in detail what is available at what time for how long. Non-time criteria for each options may be shown in fields in an adjacent pane, like a list view

  • Perhaps for an intermediate number of options, you could try a hybrid Gantt/appointment, with each day having Gantt bars for each option. You could try an appointment book layout, which may be familiar to your user, but I think a substantial numbers of options would fit better with time on the X-axis and date on the Y-axis.

Any of these graphic options can be combined with a Query/Filter feature as required for your users to help narrow their searches. This can prevent too many irrelevant options from cluttering the graphics.

  • +1. That's a good list of options and a great exemplification!
    – PhD
    Commented Feb 28, 2012 at 18:55
  • Could you please clarify the hybrid gantt/appointment structure a bit? I'm unable to visualize it - do you mean show both 'in the same view' or 'zoom in' to show the appointment view? Could you scribble a design if not too much effort - a picture of it on paper would be fine too...just to understand the visualization
    – PhD
    Commented Feb 28, 2012 at 19:03

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.