Would it be better to show a calendar picker by default instead of an input field with pop-up date picker?

Question

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

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.

Answer 1

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

For the ipad

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.

Answer 2

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.