Date Picker behavior

Question

1. Should the date picker display the monthly calendar view when the User clicks into the date picker field or should one click on the calendar icon?

2. Is showing 2 months better UX than showing 3 months? (E.g. Japan Airlines shows 3 months)

3. In this Japan Airlines example there are some days that have a different background color. Should there be a hint/signifier to explain to the User what they are?

Answer 1

1. From the design shown from the screenshot, the intention is for a user to be able to select a month or date directly from the dropdown, whereas the datepicker is for a user to fill in the month and date from one selection. If the design was set out differently then you might expect it to behave in a different way. Interestingly there is no quick way to navigate between different years.
2. I think this needs to match with the rest of the design. If by default the calendar shows the current month in the middle and the months either side of it, it may help the user compare or select a date from previous or next month quickly (assuming that a user isn't likely to suddenly navigate five months away from the current month). It is also interesting that the navigation control moves the display three months at a time rather than one month at a time, but perhaps there is some behavioural reason for this. Perhaps it also has something to do with not being able to navigate between different years.
3. Yes, but I think in Asian countries this is actually how the calendars are displayed (in Taiwan Saturdays tend to be marked blue or green on the calendar, but this has changed due to policies regarding working on Saturdays). There is usually a distinction between Saturdays and Sundays, and I think public holidays are treated in a similar way to Sunday hence similar colours are used. I just happened to notice that the red blocks in April and May correspond to the holidays in the 'Golden Week' in Japan. In this case a legend might be better than a tooltip, especially if there are other hover-over interactions or behaviour.

Following some comments and discussions, I also did a little bit of digging around and found some interesting examples from different airline websites. I think I can summarize the differences based on a couple of factors:

• Type of frontend technology used: some of the widgets are based on specific development frameworks or technology, and that probably determines the default behaviour since people usually don't end up customizing the behaviour (unless there is a very good reason). We can probably assume that a two-month type of display is more prevalent and that there must be something different about Taiwan and Japan for them to use
• Importance of public holidays: I would tend to think that certain public holidays in countries where there is culture significance is important in terms of planning your travel, yet it is not often highlighted in the calendars for most websites. Perhaps this is also a strategy for people not to make all their bookings around specific time periods or dates?
• Demographics and customer profile: countries with a more diverse and mixed population, or airlines that are used by a more diverse and mixed population may not be able to provide the type of localization and customization required for the best user experience, and instead will come up with the best way to internationalize the site.
• Device or channel usage: haven't investigated this from the perspective of mobile versus desktop access, but perhaps it is not the most important factor here.

I would be keen to get more comments and feedback from other people about their experiences. It is always interesting to compare and contrast different design approaches.

Answer 2

1. Let the combobox be what it really is: a combobox. It is like an universal UI control, that has almost no rendering problems anywhere. You can't say the same about a calendar control, and if you have a small screen, it is almost impossible to get an useful and pleasant user experience from it.

2. Subjective. Depends on personal taste of the final user. For me is is indifferent, assuming enough width on the screen.

3. Yes. At least a tooltip. Or a small text below the day number; if it doesn't fit, it could be solved with footnotes. Without that info, I could interpret them as Japanese holidays, but if I am from Europe and their site is targeted to USA costumers, couldn't they be American holidays?

Side note: it is the first time I see that "this month" tag on a Calendar control.