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.

Which of these is a better approach for placement of the date picker button:

Having the button outside the right bounds of the other textboxes:

outside

Or having the picker inside:

inside

I'm also thinking of moving the mm/dd/yyyy and phone hint to use the input placeholder attribute, but am not sure about support for older browsers (IE8/IE7).

share|improve this question

2 Answers 2

up vote 4 down vote accepted

Ultimately I think this one comes down to personal preference and design considerations. There are arguments for both. With the first the input boxes line up, with with the second the examples line up. In this situation the solution has to be to present both designs to the customer and see which they prefer. If you are the customer then...

However, can you set it up so that the date picker is inside the date text box?

picker inside box

However, this might be ruled out by your UI design tools.

share|improve this answer
    
I really like this suggestion. I'm using jQuery UI, so we'll see what I can conjure up for the CSS, thanks! –  TheCloudlessSky Aug 27 '11 at 23:40

Does your date selector automatically trigger when the user focuses on the text field? If so then, I would go with having the 'calendar' icon inside the text field as well like @ChrisF has suggested.

Some users may perceive the calendar icon to be a link to trigger the date selector, so if it is outside they have to move their mouse to click it. Unnecessary action.

Also why do you need to mention 'mm/dd/yyyy' when there is a date selector to select the date in the correct format? can be done away with imho unless you are looking at cases where javascript is disabled.

So basically, if you can't have the calendar icon inside the input field because of UI limitations, then go with your option#1 and remove 'mm/dd/yyyy'

As for 'placeholder', you can refer http://www.cssnewbie.com/cross-browser-support-for-html5-placeholder-text-in-forms/ for info on browser support and work around.

share|improve this answer

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.