Before you get other ideas, this is about our exploration on improvising the date picker UI on a mobile app. We wanted to try out a pattern that we’ve not come across before. It needed to be simple yet intuitive and needed to match our specific requirement of “increased input speed”.

Here’s the backstory. One of our clients was faced with a challenge of completing registration forms for the incoming new visitors at a clinic. Though cumbersome the task is unavoidable. In the form, of the various inputs required, one input field particularly was proving to be really inconvenient to use. This was the date picker field for the birthdate.

Because of the standard UI patterns available on the mobile device being used for input, it would take more time to input data than the other fields. This what we set out to improvise.

Typical date pickers today, fit one of the following UI patterns or derivatives of it.

The current and common – desktop date picker.

A single click in the input field opens up a calendar unit with the current month set as default. Works great for anything current. But to get to, say 5 April 1980, it would require considerable number of clicks. And patience.

Stock OS date pickers – Mobile UI patterns

This again works well for setting a date around the current time period but then requires some dexterity and effort. Quite a task to pick the date of birth of people who are say older than 20-30 years. The additional challenge involved – for a birthdate selector, what would be the initial value that you start from? This is important because, based on the default value, the user needs to traverse from that point to the actual date. If the age range was 1 to 100+, would that mean setting 15 June 1965 as the default date, considering it’s the median for that range would be efficient? Could the system learn based on past usage and come up with the new range and median? Too many questions for a simplistic input.

The old fashioned but trusty date picker

This is the simplest input available for the date picker. Especially when the default values are best avoided. This is a no-nonsense pattern and is probably the sturdiest of the lot. You can input the entire date in the format that works for you (DD/MM/YYYY or MM/DD/YYYY). But it somehow under-utilizes the swiftness of mobile UI patterns. Could we also make this visually more appealing?

The hard working (from) and (to) date picker

Most travel sites use this pattern (or a variation of this). It is an effective and useful pattern because in most cases the duration of stay can be captured in a single window without needing to traverse. Obviously this is not the apt UI pattern for our use which could go back decades.

Not a date picker but an interesting TIME picker.

Just requiring three taps to input time (rounded off at 5 minute intervals), this pattern works well for an application like an alarm. Tap once to set the hour, once more for minute (multiples of 5) and once for AM/PM which is selected by default.

Now this is a linear process without looking like one. At the same time it is very intuitive and effective. Unless one would want to wake up at 12:03AM instead of 12:05AM for example. That customization is possible but another action – that of a slide and drag is required. Nevertheless a good deviation from the usual UI input patterns we’ve come across. This we felt was a good direction towards the date picker we were trying to create.

Our date picker pattern

We decided to look at a different UI pattern to make the date entry easy to use. We did manage to come up with one. Simple and mobile friendly and could be completed in six taps flat. Four easy steps as promised. Enter Age and select Year, Month and Day.

Yes! We begin with an input field. Might strike you as odd especially since we’ve been recommending a tap and go UI pattern. This idea of having the input field as the first screen is to narrow down selection options and present intelligent choices in the later screens.

Step 1: The age entry on the mobile screen would need 3 taps to complete. Of course, three digit inputs can also be made. Those are reserved for the rare and special centenarian visitors.

Step 2: Once user enters their approximate age, they are presented with a finite range of choices, one of which is their actual year of birth. We’ve shown nine choices, it can of course be reduced up to three. Even if the age enter is approximate, it still would not lead to incorrect input as the next screen captures the exact year.

The initial entry of approximate age allows all the subsequent screens to have a finite number (read handful) of choices that fit the smallest of mobile screens. It also makes the remainder of the three screens predictable and simple to use.

Step 3, 4: Once the year is selected, it is followed by a month selector (a finite number of choices – 12) which is followed by the day selector (a finite number of choices – max 31).

Unlike all the other date picking patterns, the values presented in these screens are finite and there is a definite sense of narrowing down to the date. Importantly, all these selections can be made without any sliding, scrolling, viewing lists etc.

Overall, we worked towards creating an interface that looked familiar and at the same time improved ease and speed of input. Do let us know if this worked (or didn’t work) for you.

Written by Jose Joseph