What is the best method for date of birth selector?
- 3 text inputs (month / day / year) or one mask input. User MUST use keyboard
- 3 select boxes. User can use keyboard or mouse.
- One nice datepicker.
I want to know what is the most usable and problem free solution, so user wont be confused at all.
This question is related to
forms
user-interface
usability
The answer is
Whilst this is a very old question, it is so important in getting a date of birth input correct, especially in a registration form.
I think no one has done this better than the google accounts sign up:
Select the month first from a select box and manually type in the date and year. Simple.
Easy to validate. Easy for users to get right. No scrolling back the years in a select box from 1900-the present year. No need to update a 'day' select box based on month input. Works great on web. Works great on mobile. Works for all locales eg 01/10/2014 - is that the 1st October or 10th Jan? I expect we'll be seeing this birthday picker format a lot more in future.
A datepicker is just a poor solution all round. So many clicks! In my opinion, a datepicker is only useful when knowing the day of the week is important eg booking tickets.
Update 2/6/2016: I am from UK, so I am more familiar with day/month/year formats, rather than month/day/year. However, users who will use their cursor to select the month, I believe it is much easier having the select box first, rather than going input > select box > input. The comment date is 2nd June, not 6th Feb ;)
If your goal is to make sure "the user won't be confused at all," I think this is the best option.
I wouldn't recommend a datepicker for date of birth. First you have to browse to the year (click, click, click…), then to the month (click some more), and then find and click the tiny number on a grid.
Datepickers are useful when you don't know the exact date off the top of your head, e.g. you're planning a trip for the second week of February.
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.
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.
I created three dropdowns for Date of Birth selection and number of days changes dynamically based on the year and month selection. http://jsfiddle.net/ravitejagunda/FH4VB/10/
daysInMonth = new Date(year,month,1,-1).getDate();
I have just discovered a plugin on JSFiddle. Two possible alternatives : 1 single input OR 3 inputs, but looks like a single one... (use Tab key to go to the next input)
[link]http://jsfiddle.net/davidelrizzo/c8ASE/ It seems interesting !
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.
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 ] :(
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 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.
Whether to use a datepicker or not I think depends on how long ago the dates are. If they are typically in the current month, and almost never more than a few months old, and you know that Javascript will be around, a datepicker is good. If the dates are not recent (say, a birthdate) I think this is the best option:
http://img411.imageshack.us/img411/6328/mockupg.png
Note that this is different from Patrick McElhaney's answer in that the year is a text box, not a dropdown. Selecting a number from a drop down box that is hundreds of elements long is very annoying for the user.
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".
Whilst this is a very old question, it is so important in getting a date of birth input correct, especially in a registration form.
I think no one has done this better than the google accounts sign up:
Select the month first from a select box and manually type in the date and year. Simple.
Easy to validate. Easy for users to get right. No scrolling back the years in a select box from 1900-the present year. No need to update a 'day' select box based on month input. Works great on web. Works great on mobile. Works for all locales eg 01/10/2014 - is that the 1st October or 10th Jan? I expect we'll be seeing this birthday picker format a lot more in future.
A datepicker is just a poor solution all round. So many clicks! In my opinion, a datepicker is only useful when knowing the day of the week is important eg booking tickets.
Update 2/6/2016: I am from UK, so I am more familiar with day/month/year formats, rather than month/day/year. However, users who will use their cursor to select the month, I believe it is much easier having the select box first, rather than going input > select box > input. The comment date is 2nd June, not 6th Feb ;)
I think you can try plugin birthdaypicker,
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.
You should take a look at Datejs.
Datejs is an open-source JavaScript Date Library.
Comprehensive, yet simple, stealthy and fast. Datejs has passed all trials and is ready to strike. Datejs doesn’t just parse strings, it slices them cleanly in two.
I'm troubled by the preponderance of solutioning instead of designing. The OP said, "I want to know what is the most usable and problem free solution, so user wont be confused at all." So whether it's jQuery or JavaScript or C# or FORTRAN, the design is important--and it's the UX design, not the UI design that matters here. (Another plea to avoid the incorrect and illogical construct "UX/UI").
Use text input. Use three separate boxes labeled Day, Month, and Year (or Month, Day, and Year). Let users type the dates. Mixing text and lists in the same interaction is a Bad Thing (don't use text input for year but date picker or lists for month and day, for example).
Use a single text field that uses in-field format hints, for example, [ day / month / year ] Don't require formats too rigidly. If a user type JUN in the place where you expect a month, then use June on the back end. If a user types 6 in the place where you expect a month, then use June on the back end. If a user types 06 in the place where you expect a month, then use June on the back end.
Use Occam's Razor as a guide (in effect, most of the time the data will be accurate enough). Reduce cognitive friction (don't make users think).
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 ] :(
If your goal is to make sure "the user won't be confused at all," I think this is the best option.
I wouldn't recommend a datepicker for date of birth. First you have to browse to the year (click, click, click…), then to the month (click some more), and then find and click the tiny number on a grid.
Datepickers are useful when you don't know the exact date off the top of your head, e.g. you're planning a trip for the second week of February.
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 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.
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 ] :(
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 think a date picker just make the move more complicated to enter one's birth date.
As already mentioned, a combination of drop lists for days and months with a text box for the year seems the most efficient for a user. It takes just less than 10 seconds to enter a birth date this way, which is far quicker than a date picker: thanks to the tab key (which all users should learn to use to complete a form), it's fast to go from one form element to the next one.
At least under Macintosh (I don't know about Windows), you also can use the keyboard to access date inside select boxes: thanks to the tab key, you get the focus onto the form element, then press the arrow key to drop down the list, then type for instance 1967 and you get there in the blink of an eye…
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.
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.
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.
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.
I'm troubled by the preponderance of solutioning instead of designing. The OP said, "I want to know what is the most usable and problem free solution, so user wont be confused at all." So whether it's jQuery or JavaScript or C# or FORTRAN, the design is important--and it's the UX design, not the UI design that matters here. (Another plea to avoid the incorrect and illogical construct "UX/UI").
Use text input. Use three separate boxes labeled Day, Month, and Year (or Month, Day, and Year). Let users type the dates. Mixing text and lists in the same interaction is a Bad Thing (don't use text input for year but date picker or lists for month and day, for example).
Use a single text field that uses in-field format hints, for example, [ day / month / year ] Don't require formats too rigidly. If a user type JUN in the place where you expect a month, then use June on the back end. If a user types 6 in the place where you expect a month, then use June on the back end. If a user types 06 in the place where you expect a month, then use June on the back end.
Use Occam's Razor as a guide (in effect, most of the time the data will be accurate enough). Reduce cognitive friction (don't make users think).
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 ] :(
I think you can try plugin birthdaypicker,
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.
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.
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.
I think a date picker just make the move more complicated to enter one's birth date.
As already mentioned, a combination of drop lists for days and months with a text box for the year seems the most efficient for a user. It takes just less than 10 seconds to enter a birth date this way, which is far quicker than a date picker: thanks to the tab key (which all users should learn to use to complete a form), it's fast to go from one form element to the next one.
At least under Macintosh (I don't know about Windows), you also can use the keyboard to access date inside select boxes: thanks to the tab key, you get the focus onto the form element, then press the arrow key to drop down the list, then type for instance 1967 and you get there in the blink of an eye…
If your goal is to make sure "the user won't be confused at all," I think this is the best option.
I wouldn't recommend a datepicker for date of birth. First you have to browse to the year (click, click, click…), then to the month (click some more), and then find and click the tiny number on a grid.
Datepickers are useful when you don't know the exact date off the top of your head, e.g. you're planning a trip for the second week of February.
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.
JQueryUI datetime picker is best option as it allows pro users to enter their own value in textbox or they can choose it from picker.
Setting up picker to allow easy entering of birthdays or future dates is pretty easy too:
$(‘#datepicker’).datepicker({
changeMonth: true,
changeYear: true,
yearRange: ‘-100:+50'
});
this shows something like this (cant post a photo as I'm new user: http://klalex.com/wp-content/uploads/2009/07/picture-1.png)
and yearRange shows dates from DateTime.Now.Year - 100 to DateTime.Now.Year + 50
found this on: http://klalex.com/2009/07/jquery-ui-datepicker-for-birth-date-input/
As mentioned in this 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:
- Provide 3 separate text boxes for day, month, and year (labeled appropriately)
- Sort the text boxes according to the user's culture.
- Day and Month text boxes should be sized so that a 2 digit input is assumed.
- Year text box should be sized so that a 4 digit year is assumed.
- Allow the user to enter a 2 or 4 digit year. Assume a 2 digit year is 1900, and update the textbox to reflect this onBlur (or on a following confirmation step).
- Allow the user to enter either a month number OR month name.
EDIT: Here is how we implemented our DOB picker: Masked text input field with HTML5 regex to force the numeric keyboard on iOS devices.
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..
Update
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.
- CSS theme - 23kb
- jQuery UI - 71kb minified
- DatePicker - 38kb
- Plus a couple of images (next month/previous month, which I'm pretty sure are sprited)
But that's not too bad...
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.
You should take a look at Datejs.
Datejs is an open-source JavaScript Date Library.
Comprehensive, yet simple, stealthy and fast. Datejs has passed all trials and is ready to strike. Datejs doesn’t just parse strings, it slices them cleanly in two.
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.
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. :-(
JQueryUI datetime picker is best option as it allows pro users to enter their own value in textbox or they can choose it from picker.
Setting up picker to allow easy entering of birthdays or future dates is pretty easy too:
$(‘#datepicker’).datepicker({
changeMonth: true,
changeYear: true,
yearRange: ‘-100:+50'
});
this shows something like this (cant post a photo as I'm new user: http://klalex.com/wp-content/uploads/2009/07/picture-1.png)
and yearRange shows dates from DateTime.Now.Year - 100 to DateTime.Now.Year + 50
found this on: http://klalex.com/2009/07/jquery-ui-datepicker-for-birth-date-input/
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..
Update
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.
- CSS theme - 23kb
- jQuery UI - 71kb minified
- DatePicker - 38kb
- Plus a couple of images (next month/previous month, which I'm pretty sure are sprited)
But that's not too bad...
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. :-(
you can use plugin cxcalendar. It looks like other datepicker. but you can pick year and month in select after clicking year-month title.
I have just discovered a plugin on JSFiddle. Two possible alternatives : 1 single input OR 3 inputs, but looks like a single one... (use Tab key to go to the next input)
[link]http://jsfiddle.net/davidelrizzo/c8ASE/ It seems interesting !
Whether to use a datepicker or not I think depends on how long ago the dates are. If they are typically in the current month, and almost never more than a few months old, and you know that Javascript will be around, a datepicker is good. If the dates are not recent (say, a birthdate) I think this is the best option:
http://img411.imageshack.us/img411/6328/mockupg.png
Note that this is different from Patrick McElhaney's answer in that the year is a text box, not a dropdown. Selecting a number from a drop down box that is hundreds of elements long is very annoying for the user.
As mentioned in this 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:
- Provide 3 separate text boxes for day, month, and year (labeled appropriately)
- Sort the text boxes according to the user's culture.
- Day and Month text boxes should be sized so that a 2 digit input is assumed.
- Year text box should be sized so that a 4 digit year is assumed.
- Allow the user to enter a 2 or 4 digit year. Assume a 2 digit year is 1900, and update the textbox to reflect this onBlur (or on a following confirmation step).
- Allow the user to enter either a month number OR month name.
EDIT: Here is how we implemented our DOB picker: Masked text input field with HTML5 regex to force the numeric keyboard on iOS devices.
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.
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.
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. :-(
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 created three dropdowns for Date of Birth selection and number of days changes dynamically based on the year and month selection. http://jsfiddle.net/ravitejagunda/FH4VB/10/
daysInMonth = new Date(year,month,1,-1).getDate();
Source: Stackoverflow.com