What's the best UI for entering date of birth? [closed]
Solution 1:
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.
Solution 2:
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 ;)
Solution 3:
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.
Solution 4:
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.
http://www.huntercourse.com/usa/texas/