enter image description here

  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?

  • 1
    Regarding number 2: If your users require a start and end time that may span a long period of time (such as 2+ months) then I would show a date picker with 3 months.
    – Mark Bubel
    Mar 11, 2015 at 15:33
  • It depends on the context. Airlines show 2 months because of fare rules for 30 days or something. If your context is quarterly, then show 3 months.
    – dnbrv
    Mar 11, 2015 at 16:54
  • @MarkBubel interesting point and I agree it will depend on what the Users require (Longer vs. Shorter ranges)
    – Guenther
    Mar 12, 2015 at 14:35

2 Answers 2

  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.

enter image description 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.

  • 2. Looked into it some more, the restriction is for one to book a flight within 330 days timeframe per their FAQ 3. Interesting point about calendar display in Asian countries. I came across link Makemytrip.com an Indian Travel website) that shows a tooltip and a signifier for holidays
    – Guenther
    Mar 12, 2015 at 14:48
  • In that specific case, I think it is not needed to navigate among different years, assuming an airline traveling person will not do trip plannings so long-term.
    – sergiol
    Mar 12, 2015 at 17:03
  • @Guenther interesting pickup there. I guess it just goes to show that there is no single way of doing something and that it is all context dependent. It might also depend on if they feel that there are enough foreign visitors on their website or not?
    – Michael Lai
    Mar 12, 2015 at 21:30
  • @MichaelLai Thanks for adding some more interesting examples. Yes, the date control is all context dependent. I could see the need for displaying holidays if I want to plan around them. E.g. If I'm booking a Flight on Lufthansa from Berlin to Mumbai, India and my goal is to avoid travel to Mumbai on some holidays (I'm saying this from my own personal experience) then it would be nice to have a checkbox or some form of switch to display/hide the destination's holidays
    – Guenther
    Mar 13, 2015 at 15:57
  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.

  • sergiol, definitely a tooltip with also a signifier as Michael Lai points out in his response below
    – Guenther
    Mar 12, 2015 at 14:38

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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