2

I been asked to provide a mockup for a week view for a calendar that displays room bookings

enter image description here

Red means there are no rooms (at peak time) available to book; orange means there are some rooms free; green means they are all free.

The rooms displayed can be changed depending on what location and filters you select.

When a user clicks on a square they are returned to a calendar day view for that room.

summary: At this point in the booking process the user is still trying to locate a date to book the room and is using the filters to find available rooms.

It is likely when this goes live most rooms will fall orange so the traffic lighting might be totally redundant.

Question: should I traffic light the calendar view only when it's likely to be most relevant ie the day view? Is it not relevant to the booking process at this stage?

  • It might be useful instead of using full/free/some, to use [full] and [# of slots left]. Maybe even add some filtering options that allow searching specific times like "Free from 3PM-6PM," which would change the [# of slots left] essentially to [# of slots left from 3PM- 6PM] – Justin Jun 26 '14 at 18:08
4

Question: should I traffic light the calendar view only when it's likely to be most relevant ie the day view? Is it not relevant to the booking process at this stage?

My thought is no. You should not, but probably if someone requested a monday, you may like to highlight monday to make user find requested day instantly.

  1. User's goal is to book a room, so his attention should be on available options. This means you have to replace red with light gray.

  2. As a user, I actually don't care (Or should I care?) how busy room is. All I want to know when it is available. When room have only evening slots, for me its still available.

BTW, how many slots rooms have? 1 slot = 1 hour? If there are only 4-5 slots, you can try splitting squares vertically:

mockup

download bmml source – Wireframes created with Balsamiq Mockups

There are many options of box layout, you can choose whatever is more relevant.

mockup

download bmml source

  • Agreed on not available being grey, if something is not available you do not want attention drawn to it. – Fiona - myaccessible.website Jun 26 '14 at 13:02
  • I agree grey booking state is good. like icons down left. Not sure what to display in boxes underneath each day though... – colmcq Jun 26 '14 at 13:04
  • @colmcq, each box is a day, each row inside a bos is a timeslot. You at least there must be a time. Thats why I asked about slots number. – ADOConnection Jun 26 '14 at 16:32
  • 2
    @colmcq, I've added new mock, please have a look. – ADOConnection Jun 26 '14 at 16:45

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.