What is the best method for date of birth selector?
I want to know what is the most usable and problem free solution, so user wont be confused at all.
For an advanced user text input is the best, if the user knows the date format, it is very fast. For a not so advanced user I suggest using a datepicker. Since usually you also have advanced and non-advanced users I suggest a combination of text input and datepicker.
I would take a DatePicker. It's the only component that allows expert users to enter it manually and guides novices to enter a date very easy.
The calendar should not pop up if you enter via pressing tab, but clicking on a button. So no expert user is annoyed of it.
Put both and make each update the other. If the user chooses the date from the datepicker, it is easy to fix a minor misclick in the text field or visualize the choise you typed into text field in the datepicker.
I would prefer a datepicker (and a input box with documented format as a fall-back) for an international site.
Date formats vary and are sometimes hard to read if you are now used to them. Too bad many people aren't comfortable with ISO 8601. :-(
I would also recommend the combination of DatePicker and fields
See this demo, where the date picker does reflect the date entered in the fields by the user.
It is based however on a DatePicker using Prototype and Scriptaculous though. I mention it for illustration purpose.
I normally use both -- a datepicker that populates a textfield in the correct format. Advanced users can edit the textfield directly, mouse-happy users can pick using the datepicker.
If you're worried about space, I usually have just the textfield with a little calendar icon next to it. If you click on the calendar icon it brings up the datepicker as a popup.
Also I find it good practice to pre-populate the textfield with text that indicates the correct format (i.e.: "DD/MM/YYYY"). When the user focuses the textfield that text disappears so they can enter their own.
(Assuming you're using ASP.Net...)
I would recommend a TextBox combined with
Thus:
<ajax:TextBoxWatermarkExtender ID="txtBirthDate_TextBoxWatermarkExtender" runat="server"
TargetControlID="txtBirthDate" WatermarkCssClass="watermark" WatermarkText="DD/MM/YYYY" />
<ajax:CalendarExtender ID="txtBirthDate_CalendarExtender" runat="server" TargetControlID="txtBirthDate"
FirstDayOfWeek="Monday" Format="dd/MM/yyyy" />
<asp:RequiredFieldValidator ID="txtBirthDate_RequiredFieldValidator" runat="server"
ErrorMessage="Please select a date" ControlToValidate="txtBirthDate" CssClass="validator"
Display="Dynamic" EnableClientScript="true" ValidationGroup="YourValGroup"></asp:RequiredFieldValidator>
<asp:RegularExpressionValidator ID="txtBirthDate_RegularExpressionValidator" runat="server"
ErrorMessage="The date must be entered in the format DD/MM/YYYY" ControlToValidate="txtBirthDate"
CssClass="validator" Display="Dynamic" EnableClientScript="true" ValidationGroup="YourValGroup"
ValidationExpression="(0[1-9]|[12][0-9]|3[01])[- /.](0[1-9]|1[012])[- /.](19|20)\d\d"></asp:RegularExpressionValidator>
This might look a bit overloaded in your aspx file, but it makes for a nice simple user experience, that degrades gracefully (still works) if JavaScript is disabled.
You'd probably want to add a RangeValidator to prevent the user from selecting dates in the future as well.
I would suggest using a drop down menu for each field, making sure to label each as day, month and year. A date picker might also help, but if the user doesn't have JavaScript enabled, it won't work.
Why don't you test all three and pick the one that the performs the best? This seems like a good candidate for Google Website Optimizer to test.
It may be that the type of users you have, or the type of site you are running may dictate that your solution should be different than the "norm".
I had tried datePicker with my user but it turn out to be a bad UI to them. What I end up base on their request is to have 3 textbox where they can quickly type [ day ] [ month ] [ year ] :(
As perhaps one of the older people here, and born late in the month, I find drop-down menus for birthdates to be frustrating. I typically have to scroll down on two drop-down menus, and that's awkward. I'd much rather type it in.
If you can have a control designed so that it can either accept drop-down menus or be typed into, and make it clear both work, that would be excellent.
Who don't you use the jQuery UI DatePicker?
It's configurable to suit pretty much any needs. The only downside is if you're including it with jQuery UI it has a somewhat large footprint..
Some of the file sizes appear to have changed, so they are updated below. Keep in mind these numbers will only be correct for the time they were last updated. Things may have changed since then.
But that's not too bad...
As mentioned in the Jakob Nielsen article, drop down lists should be avoided for data that is well known to the user:
Menus of data well known to users, such as the month and year of their birth. Such information is often hardwired into users' fingers, and having to select such options from a menu breaks the standard paradigm for entering information and can even create more work for users.
The ideal solution is likely something like follows:
As other users have mentioned, one of the downsides of most datepickers is the difficulty in going back many years to select the year-of-birth, especially for older users. And the problem with a drop-down/select is that it often requires a lot of scrolling and/or scanning to find the right year. But the Any+Time(TM) Date Picker AJAX Calendar Widget provides an excellent alternative: to select a year in the past, simply press the "<" button, then a new dialog appears for the user to click the digits of their birth year. So, for example, to enter "1967", the user simply clicks <, 1, 9, 6, 7, X (dismiss)... this is so much faster than a typical datepicker, a drop-down/select, or even writing out the year by hand!
Here's a review of options and opinions on each...along with a poll that shows what others think.... http://liveux.wordpress.com/2010/04/09/how-to-enter-a-birth-date%E2%80%A6let-me-count-the-ways/
Birthdates are different from other dates because people are often used to typing their specific birthdate.
A text box with an example is clear, quick and easy to enter:
_______
|_______| (example: 31/3/1970)
This should support flexible formatting such as 1/1/1970 or 20/07/70.
If you have to support different cultures with different date conventions (e.g. US and UK) then this could be error-prone for people who don't heed the example. To avoid this you could use a
select list for month, and text boxes for date and year.
_________ __ ____
|March |V| |__| |____|
This removes ambiguity between day and month ordering, but is a little clunkier to use.