Date of birth and Interaction Design: Shaken, not stirred

Disclosing my date of birth (or generally a date) online has become a frequent activity- everytime I register for an account, as an added security measure to reset my forgotten password, to add my card expiry date to confirm an online purchase etc.). Nevertheless, the design of this type of interaction remains a challenge. How many times have we all tried to adhere to the European ‘dd-mm-yy’ format and find ourselves lost when the available field for ‘day’ displays ‘years’?It makes me stop and think and it is an extra (minor) cognitive load.

Studies have demonstrated that even a split-second delay in thinking on the user’s part will weaken their perception and interest in a website and ultimately lower the website’s conversion rate.  As part of my design work, I have wondered many times about the best practices and usability traits of different methods of ‘date of birth’ input.

So I put my researcher hat on and decided to do a little experiment. I wanted to explore how websites design this feature, find out about the different methods out there, use them and  -…So, what is the best type of websites to use in order to do so? Alcoholic drinks websites- purely because it is a legal requirement to be above the age of 16 to view them. (The ‘shaken not stirred’ pun is making sense now?).

I have checked 15 different alcoholic drinks’ websites (including their mobile versions) to see how they have been designing the ‘date of birth interaction’. As expected, different methods were implemented and are summarised and discussed below.

Text entry box (es)

This method involves a single box for entering the birth date, where the user is required to type it in, as shown on the Grand Marnier website.

A nice example of single text entry box comes from Grey Goose, where even though there is only one box that moves automatically to the next element of the date of birth, so avoids the potential confusion over the correct symbol between date of birth elements(I always find myself wondering whether I am allowed to put a dash between day and month or does it need to be a slash ?).

An example of multiple text entry boxes comes from Heineken – it shows the correct format for date of birth, with using multiple data entry boxes and using only 2 digits for the year (Do you really need your users’ full year of birth, i.e all 4 digits?)

Although this method is widely used, there are a couple of issues with it, in regards to the format of the entry.Even though example shows that the correct format is mm/dd/yy, I find that I can usually ‘get away’ with just putting ‘1’ instead of ’01’ (my birthday is on the first of the month). Overall though, I like the simplicity of this method

 Dropdown menu

Another option that is widely used is the dropdown box. The user is required to click on the box and scroll down to the correct day, select it and repeat for the correct month and year. This means that if a user’s birthday is on the 31^st of December, they will be required to do a lot of scrolling down.

The first example from this method comes from Carling, where they have implemented a ‘standard’ dropdown menu

Another example from Smirnoff is slightly different –they use month number for the format of month entry. I am not quite sure if there are any benefits in this – I personally got a little confused when I used it, as I am so used to selecting the name of the month.

Event though this method seems easier (as the user will not have to type in the exact date of birth), it poses some problems- especially in a mobile context) as the number of years in the final drop down could is very long (for example: 1920-2014). Drop down menus do actually require a lot of effort, first you have to click on the menu to open it, then you have to manoeuver through a (potentially) long list of small targets and once you find the value you want, you need to position your cursos on the right target and select it. There are also a lot of implementations of dropdown menus that require the user to keep the cursor on the menu while navigating the list (otherwise the menu closes). Dropdown menus present an interactive challenge even for the most dexterous users out there. (How many times have you actually tried to select a certain year, missed and had to start again?)

Calendar

This option provides a pop UI control that allows the user to scan through a real looking calendar to select a specific date. Admittedly, calendars are cool looking, but their use is optimal use is only when the target date is close to the actual date- which makes them inappropriate for date of birth. Calendars also have a number of accessibility problems if they are not implemented to be keyboard accessible. As expected, none of the websites I checked implemented the calendar method for date of birth input.

Date Picker

An alternative version of the calendar method, the picker, visualises all the potential dates, allowing the user to select the correct one. An  example of a picker can be found on the Stella Artois website.

Another interpretation of this can be found on the Amstel website. What is interesting in this implementation is that the designers found a way to avoid visual clutter by displaying only selected dates. If you want to choose’14’ as your birthday, you simply need to point your cursor somewhere inbetween 13 and 15.

I personally like this version of the date picker, but it took me a while to initially understand it (and once I did, I spent a little longer playing whit it). It is creative and innovative but not sure it is very usable.

Hybrid

Combinations of the methods above can also lead to new input methods. Although, none of the websites I checked for this experiment implemented any hybrid methods, the UK site GOV.UK published some initial test findings about how users on mobile devices use a DOB field they were testing against and initial reports suggested that having two dropdowns (one for day and one for month) followed by a text field for year was well received by users, although not exclusively

What happens when we go mobile?

When I checked the mobile versions of the same 15 websites, I found that the majority of them that implemented a text entry method (57%) . What I found interesting is that the websites that use the date picker for their web versions, switched to dropdown menus for mobile- even though their usability issues are well documented.

As expected, some (not all!) of the websites  implemented a number keypad for their text entry, as shown in the example below on the Pernod-Ricard website.

I personally believe that single field (with guidance) paired with the number keypad is the fastest way to input birth dates (on a mobile phone). The amount of time a user will have to scroll through or tap through things can be reduced if we just give them full control to enter it manually- as they will spend the taps tapping the exact numbers.

Looking into the future we can see how phones are already allowing for voice input for any text field in an application. Users will just  have to activate audio input mode and speak out. Will voice input make  typing any characters into the mobile device become a thing of the past? Will this mean the end of fiddly registrationg forms? Only time will tell…

Notes:

Details of websites I have checked for this experiment: Smirnoff, Grey Goose, Martini, Amstel, Fosters, Heineken, Absolut, Jose Cuervo, Grand Mernier, Tia Maria, Jim Beam, Carling, Guinness, Pernod Ricard, Stella Artois