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

Question

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 1

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.

Answer 2

Why would you do CAD for room booking? Isn't the process of finding a room and selecting the available time slot already not too cumbersome! Top that with a heavy page having a 3D rotating building which looks nothing like a booking website! Now the user has to learn how to control that 3D structure!

I don't care about the architecture of the building and the exact location of the room in the building. All I wanted was a photo of the room.

Answer 3

I would have to agree with BlueFlame, a three dimensional view of the building would make the experience worse. I don't think the point is where in the building the meeting should take place, but when it's taking place.

Which is where your first option looks like the winner. Take Google Calender for example, it's interface is something along the lines of Approach 1, no? Perhaps use that as inspiration? This could reduce the use of the keyboard a bit (time/date) too.

Answer 4

There is fundamentail difference in both approaches, which is defined by resource accessibility.

To manage Exclusive resource you should provide planning, sheduling, or queuing tools to make the task easy. So the interface becomes more complex, to make the task more efficient.

You case probably falls into this category.

Non-exclusive resources don't require management tools, as the availability is high and interface should be simple to reduce cognitive load to reach high performance.

Booking the fly tickets is the example for this category.