Available and unavailable dates aren’t displayed on the date picker. Leaving you to guess about availability
Recently I was playing around with Airbnb.com to check out some of their unique properties. As I tried to set some dates to get a sense of the price per night I started getting frustrated by their Book It! form. Every date I selected would result in a “Those dates are not available” error beneath the date picker. Each time, the flashing error would get me more irritated. After five or six tries, I couldn’t help but think “Why aren’t you guys showing me what dates are available in the date picker?”. The form also kept selecting a stay of 30 days from the departure date. An odd choice to me when in Canada and the US the average amount of time off is around two weeks. I was left wondering if the default was trying to book over days that were already taken.
Wanting to get a clear picture of what days were booked, I selected their booking calendar. Here booked days are marked in red, available in green. Simple and easy to understand. Using the booking calendar as a reference I navigated the date picker and tried to select an available period of time. I quickly noticed a disconnect as I tried to select the end of the week in the date picker. The booking calendar showed the sixth as the end of the week, while the date picker ended it’s week on the seventh. After a moment of confusion I realized that one calendar started it’s weeks on Sunday, while the other began the week on Monday. A subtle difference that threw me until I discovered the difference between both calendars.
Two different calendars with differing first day’s of the week. A problem if you want to leave at the end of the week and use the availability calendar as a guide of what to select on the right
The inconsistencies and lack of information in the form took a simple attempt at getting a price for a short stay into a much more complex adventure. Keeping a user interface consistent across a site can be a challenge, and small details like this are easily lost as you build a site.