Ever have to input your birth date in a web form or app?

First you have to select from a drop-down of 12 options. Then you have to select from a drop-down of 31 values. Then you have to select from a drop-down of 100 values. This is a horrible user experience. And it’s even worse on an app.

What’s worse? When they make you key manually in MM/DD/YYYY format. This of course introduces all sorts of possibilities for error. First of all, in the United States 4/12/1950 is April 12, 1950, but to the rest of the world it’s 4 December 1950. Some inputs make you add a zero before a single digit or crank out an “error.” Some make you manually enter the slashes. It’s difficult to imagine a date display system that would require more cognitive work or have a higher error rate.

Date pickers are an improvement, but they make entering a birth date even more painful. Why make me browse for a year (from a hundred options), then make me go to the month just to show me what day of the week that was decades ago. I don’t care about that and its irrelevant to the task at hand.

So when developing an Android version of an iOS app that required entry of a birth date (the iOS app went for manually keying the MM/DD/YYYY format), I decided to tackle this issue.

I wanted to avoid those long drop-down lists. That is relatively easily solved by a modal that allows the user to tap for the date and month. I put the date first so that there would be a clear demarcation between the numerical options and the alphabet-based options. Then, to prevent the pain of choosing a year from 100 options, that part is manually keyed in: four digits. Four taps for the year is easier than several scrolling options and careful scanning required in a drop-down approach.

Birth date entry modal

Birth date entry modal

That’s the solution! It can certainly benefit from iteration and some fine-tuning, but I think it’s a dramatic improvement over the usual methods of entering a birth date.