Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

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

share|improve this question

2 Answers 2

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.

share|improve this answer
    
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 –  Jitendra Vyas 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 Johnsingh 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) –  Andrew Leach 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.

share|improve this answer
    
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. –  Jitendra Vyas 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 –  Jitendra Vyas Jul 29 '12 at 18:31

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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