Asking users for their birthdate on a form is complicated. Birthdates have various formats depending on the country that consist of three separate data strings. It’s easy to confuse and frustrate users if the birthdate field doesn’t use simple controls and isn’t in a clear format.
The Confusing Way
Users are either used to seeing a birthdate displayed with the month first (month/day/year) or day first (day/month/year). When they see a required format that’s different than what they’re used to they have to think hard about their input.
What users commonly see in a birthdate field is “mm/dd/yyyy” or “dd/mm/yyyy.” Although it may be easy for some users to intuit that “mm” stands for month and “dd” stands for day, other users often get confused by this or they ignore it.
Users might also pause to wonder whether they need to use leading zeros (e.g. 09) for the month or day number. This makes them think about the input format and slows them down.
Another problem is that users may see the required format but instead type the date in the format they’re used to by force of habit. This user error leads to receiving incorrect user data.
The Difficult Way
Sometimes the birthdate field is spelled out with Month, Day, and Year labels. While this is less confusing for users, it can be difficult if the user has to scroll through three different select menus.
The number of options users have to scroll through is tremendous. There are 12 month options, 31 day options, and 118 year options (from 1900-2018). Scrolling through this many options is difficult and time-consuming to do.
On top of that, desktop users have to switch from keyboard to mouse when they get to these select menus. Switching causes them to exert more effort and slows them down. It’s possible to navigate them with your keyboard, but few users do so.
The Complex Way
On rare occasion, you’ll find a calendar widget being used to select a birthdate. This is complex for users because they have to click tiny arrow buttons to select the year and month. Since most birthdays aren’t near the current year, users will have to click that button a lot.
When they finally finish selecting the correct year and month, they have to scan thirty-one numbers to find the correct day. These numbers are often in small font and hard to read.
The Clear and Easy Way
Writing out the label for each birthdate string and separating them into three fields instead of one eliminates the format confusion. Users may have to press the tab key to hop to each field, but if correct user data is important to you, a clear format is essential.
Custom sized text fields are also important for clarity. When you customize each text field to the length of each birthdate string, you’re giving users a visual cue. This signifies them to type the month number not the month name. It also signifies them to type the full year instead of abbreviating it (e.g. 80 for 1980) since the year field is wider.
Text fields are easier to use than select menus and calendar widgets because desktop users don’t have to switch their hands from keyboard to mouse. Mobile users also don’t have to swipe or tap small targets.
Too Many Choices
Like the phone number field, the birthdate is a complicated field to design because there are too many formats and controls to choose from. The way most birthdate fields are designed today is confusing, difficult, and complex. Choose the clear and easy way and leave the other choices behind.