Html Birthdate input usability best practice

Question

Hello everybody,

I am going to implement standard functionality - birthdate input on web form for PC.

There are lots of interfaces how to implement this.

• Date picker (OMG, I can't stand picking date with it. Too many clicks required)
• 3 Dropdown lists. Day, Month, Year. (I am not very fond of it though - they are too long)
• Straightforward input: DD.MM.YYYY (My choice, but I am programmer, not a customer)
• ... some more

What kind of input do you prefer? What is the worst one for your opinion?

Answer 1

I'd use dropdown lists which contain only numeric values, i.e. no month names. This allows you to type the date instead of selecting it as it will automatically select the typed parts and it doesn't allow the user to enter incorrectly formatted dates (dd.mm.yyyy vs mm.dd.yyyy etc.). For the year it might be good to use a text field unless you require a minimum/maximum age.

Answer 2

As programmer, your best choice should be a datepicker or Dropdowns. They will enforce a specific format for the user and you'll not have to deal with wrong formats.

As a user, I personally prefer the dropdowns especially for a birthdate.

Answer 3

Interaction design is an art by itself. Being an architect/developer myself, I also prefer to use the 3 input boxes, but... We have to think of the 'target user' and 'what (s)he's used to'. In a general sense, for me that results in providing all three options in one interaction design.

A popup with calendar control and 3 input boxes (with drop down support) would yield something that offers all 3 options mentioned by you.

Again, interaction design is also focussed on the "point of view" for whom the interaction design is being made. So, depending on your target audience you might choose to leave out some of the possibilities.

Hope this helps,

Answer 4

I agree that calendar picker is not easy especially if the possible range of value is wide. We've settled on using Telerik RadDateInput. Basically it's a date pick that can also take text input. The cool thing about it is that it will almost figure out any thing you throw at it:
17 1 09
1 jun 1
1 j 1
2 2 2
Almost anything you can think of (i'd say the only cases where it would make the wrong decision is when the input is also confusing for a human). Try it on their demo site. We usually hide the calendar picker so users are not inclined to use to difficult option by habit.

Answer 5

JavaScript date pickers are a nice option if they don't prevent regular manual input, so the user can choose how to enter the date. It's also nice to be flexible in the date format, e.g., there's no need to force slashes as separator and reject anything else.

Also, be aware of locale issues. Users from the US will probably type MM/DD/YYYY :)