On a travel site which is for Desktop, iPhone, iPad too, would it be better for UX and Accessibility to show the calendar itself on page by default

Like this

enter image description here

Or the most popular way, a input box with calendar link which opens a calendar on pop-up.

I was just thinking that it would be good for a user to see calendar itself with current date. It will save one step of clicking on icon and opening in popup.

And I think a Pop-can be also be problematic on Touch screen devices and to screen reader users.

enter image description here


With desktops, The question you need to answer here is the effective use of real estate or screen space. Though most computers have pretty high resolutions now,providing a full sized calender does take up a lot of space and might not be effective in terms of best use of the available screen space. However if your calender is a critical part of your design and and should prominently stand out, I would recommend going for it.

However coming to the iphone and ipad, you need need to consider two aspects.

  • Screen space which is limited on the ipad and iphone and a full sized calender might not be the best option unless your app is only to select a single date and submit it.
  • It goes against standard conventions on the iphone and ipad which might confuse users as they are more accustomed to the standard calender layouts given below

enter image description here

For the ipad

enter image description here

Here are some recommendations on the potential best practices to utilize when defining a date picker.

Date Filters: Successful Calendar Design Patterns

The above article also highlights a key accessibility issue which would arise if you dont use free form text to enter a date in the calender and instead just use the date picker

Make sure your Web form is accessible and lets people simply tab through the form fields and type the dates they want. I once had a client who proudly showed me his date picker user interface for enterprise search, which disabled manual date entry and instead displayed the date picker “to avoid errors.” It is critical that you always allow keyboard date entry, particularly in the enterprise environment, because people are often much faster and more accurate when typing in dates than when reaching for a mouse and clicking to select dates.

  • At your first point about screen space one more question arised in my mind which i will ask later. But for example please check this website. it has huge white space on homepage and can have calendar embedded on page instead input box.would it be better to add whole calendar here cleartrip.com Jul 29 '12 at 6:42
  • 1
    You could but also read what I said about accessibility in my quoted text in the above answer, you also need to allow the feature of allowing users to enter text free form or tab to it and just embedding the whole calender would not allow it
    – Mervin
    Jul 29 '12 at 6:46
  • 5
    There is also the point that if the user wants to enter a date some months in advance (for example in booking next year's holiday) it's far easier to type it than to flip through a number of months to get there. (But it might be useful to type it and then click to get the calendar popup showing that date, to check that the date chosen is actually a Saturday, and use the calendar to change it if necessary) Jul 29 '12 at 9:07

Alright, first things first. You say, "...for a travel site that is for Desktop, iPhone, and iPad too...", to which I would say, you cannot (should not) have the same site for desktop, phone, and tablets. When it comes to choosing a date, this becomes all the more complicated because your desktop calendar may just fill up 80% of the phone screen, so you'd never want it to be there all the time.

Even for a desktop, the idea of having the date picker accessible by clicking on the calendar icon or focusing in the input field is to show the huge calendar only when required, thereby saving precious real estate. The tablets have a smaller screen size and hence the same principle applies.

So, showing the calendar by default in order to save one mouse click is definitely not a good idea.

If you desperately want to save clicks and real estate, try using a slider widget, or dropdowns, as some sites use. The slider/dropdown can be always visible consuming less area than the calendar. These could also be used across all the three kind of devices we are talking about, so helps both your objectives.

  • Thanks for the answer. But the same calendar works fine on Mobile too. I have seen on this site cleartrip.com if i open this on my iphone and try to add dates it's just works fine. Jul 29 '12 at 18:16
  • It does work fine, no doubt. I had not checked it on mobile when I quoted the 80% figure. Now when I checked Cleartrip on iPhone, I realize I was wrong: it is 90%. So my point was with respect to your question, you cannot just open the calendar by default and place it alongside, because the mobile phone screen cannot spare 90% space for it. (And the first sentence of my answer mentions using the same 'site' and not the same calendar for all three platforms.)
    – ashes
    Jul 29 '12 at 18:20
  • OK. Cleartrips calendar works fine on mobile too but I feel I would like iphone default calendar like this i.stack.imgur.com/6bIJd.png and even in desktop we cannot fill the date manually and got to next form field by pressing tab as @mervinj said. My research on accessible calendar interaction is still on :) BTW thanks for answering and discussing the question Jul 29 '12 at 18:31

My answer would be in the form of a question as to what context would you want a calendar to be utilized by the end-user? There is no one answer if you cannot provide the context of what you are displaying. It's not a standard state of open if your wanting to exhibit normal iOS design patterns to users.

If you are hosting a charter group that is used to seeing event calendars, then by all means use a calendar and let them click away, but fill the dates with events and not just dates.

In the end it is about your target audience. In UX there is no one solid answer there will only be assumptions and presumptions without knowing what context you are presenting UI Elements to what audience and in what context. If your saying you want a calendar to fill an entire iPhone app and that's all its doing? Who is that benefiting?

And your assumption of popup modals and divs being problematic? No. Not really. They are standard design patterns. And there are hundreds of codebases for popup calendars all around that devs use without any such issues you fear. So why do something non-standard?

Former Senior IA/UX consultant to the biggest travel website in the world is hoping you rethink that calendar being open on one iPhone screen and doing only one thing.

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.