Geeking Out on Date Pickers
I am obsessed with forms, especially mobile forms. Not quite as much as
who wrote a book on the topic as early as 2008 and often talks about it. But way more than most product designers are.Date pickers have been particularly neglected or mishandled for decades. And the worst offenders are birth date pickers.
The most common design patterns for birth date picker are…
- Three dropdowns (aka the “UI of last resort”) one each for date, month, and year. It ensures accuracy of input but it’s just too many taps to enter a date.
- A calendar picker is usually ok when you want to book a flight but it’s so bad for picking a date from decades ago (in my case) that they are single handedly responsible for this rant. My blood ran cold when I had to once select my date of birth using the Material Design Date Picker.
- The third and the least annoying is the humble text box. It works (mostly) but needs a lot of validations and custom code to minimize data entry and date formatting errors. It is commonly customized by breaking down the input into three separate ones, each auto jumping to the next as one gets filled. Kudos to typeform.com for doing this really well.
The text box approach becomes a bit tedious for the mobile. So here’s an idea that might disrupt the date picker industry.
How about adapting the iPhone Passcode pattern for the purpose of date entry. I do few things faster than typing my passcode in my iPhone. Here’s how it might look like:
If I remember correctly I might have been asked to enter my date of birth on a similar phone number entry screen while on a telco’s IVR. It’s quite effortless to tap those big circles six times and be done.
Came across another fantastic post on the topic by fellow date picker geek
.
