website design - Room Bookings: What approach is best/intuitive/user friendly?

I currently have a side project going where I am learning AngularJS, the side project I am working on is a web based room bookings application.

So imagine you are an employee of a company, and you want to book an hour at one of the many meeting rooms available at the company building.

When it comes to the UI of room booking systems, I have seen some shocking stuff, stuff that will make the people on Dribbble pull their hair out, but no matter how bad the styling, I've always seen two approaches taken.

Approach 1:

Room Schedule view as a Calendar where the user can see what meetings are booked on what days by looking at the calendar, he/she can then add a meeting by clicking on the calendar itself in the spot he/she wants the meeting and book a meeting there and then. Similar to this (only decent one I can find)

Approach 2:

To book a room you basically have a form with input fields specifying the date, time and location that you would like to book the meeting room.

Which approach do you think is best? more intuitive and user friendly? Do you have better examples?

My Vision:

When I was thinking about this, I was asking myself, "wouldn't it be nice to have a CAD drawing of the building, where users can click the actual room, see a schedule and then make a booking?" .. but I'm not sure than can be achieved in HTML5/CSS3/JavaScript. I do not want to use Flash (I know it can be done in that).

Any feedback and help would be greatly appreciated.

Thank You.

Answer

I speculate that you have two main types of user in this situation:

• People who have a particular time/date in mind and want to find a free room (any room) on that date ("I need to arrange an urgent meeting for Tomorrow morning and I don't care where");


• People who require a particular room and want to find a date when that room is free ("I want to book the large meeting room for a workshop sometime in the next two weeks").

With these two scenarios in mind, the calendar view has a few of strengths:

• When a particular time/date is important, the user can quickly navigate to that date and see the availability of all rooms side-by-side;



• When a particular room is important, the user can see the availability of that particular room over a period of time.


• Calendars are a great way of presenting upcoming dates, particularly in the near future when the day is known but not necessarily the actual date. That's what they are designed for and people know how to use them.

The alternative approach suggested in the question whereby users would refer to a diagram of the building to first select a room and then check the schedule of that room is perhaps more visually engaging but sounds less efficient. Users motivated by date are forced to click in and out of each of the rooms to compare the schedules. That said, having a diagram of the building alongside the calendar view would be a useful addition.