One thing I have noticed throughout my time surfing the web is that almost every site that has you register, wants to know the same basic information: my name, address, email, etc. Generally, these are simple text entry boxes with a drop down thrown in here and there. But there is one detail I see asked for over and over where the paradigm used to capture the information can vary tremendously – Date of birth.
After a quick perusal of various sites, I have captured the most common means of data entry for date of birth…Let’s discuss :)
Text entry box(es)
The use of text entry boxes generally come in 2 different flavors when capturing date of birth. The first is the single box for entering the entire date:
From a practical standpoint, this is a pretty easy way to capture someone’s birth date. Most people are used to thinking about their date of birth in this context. Where this model gets a little funky is how exactly I should format my entry. For a January baby, do I enter 1 or 01? Can I use a dash or do I have to use a slash between day/month/year? This example attempts to show me the correct format (MM/DD/YYYY) but also says I can enter a single digit month and day (4/8) – so can I also enter a 2 digit year?
The second flavor of direct text entry is the use of multiple text boxes to break up the segments of one’s date of birth:
The main impetus for using this model of data entry is to remove the whole dash vs. slash vs. period formatting concern. However, the other formatting questions I mentioned above can still hold true.
What I like about text entry boxes:
- Text entry boxes fit within the context of how most users think about their date of birth and do not require the user to jump between their keyboard and mouse to access different UI controls.
Things to think about when considering using text entry boxes:
- If the data being captured could exist in multiple formats, a best practice is to provide a flexible input field that will allow a user to enter the data in any way format they wish. A script can then be used to validate and transform the entry into the appropriate format required within the system.
- The length of your text entry boxes should match the maximum character length allowed for that field.
Drop down boxes
Another option I see is the use of drop down boxes for each segment of a birth date. Open the first box, scroll down to my month, select it, move on to the next box, open it, scroll to the day, select it, and finally over to pick the year, rinse and repeat. Man, if my birthday was December 31, 1962 I might end up having to do quite a bit more work than I was expecting just to enter a date I seldom need to think about:
What I like about drop down boxes:
- A drop down box allows a user to select exactly one choice from two or more mutually exclusive options.
- Use of a drop down box guarantees date and spelling accuracies and minimizes user-entry errors.
- Drop down boxes are better than other options for displaying long lists when screen real estate is an issue.
Things to think about when considering using a drop down box:
- Avoid drop down boxes if possible when the list is really long, especially when people are likely to be familiar with the options – like the state they live in or the year they were born.
- When using a drop down box, consider allowing the user to manually enter text, auto-filtering the matching drop down entries so the user doesn’t have to scroll through the entire list.
- Make sure your drop down box is keyboard accessible.
The Calendar widget
A nifty pop-up UI control that allows me to scan through a realistic looking calendar to select my specific date. Calendar widgets are cool. They are much more exciting than looking at another text box when entering my basic information:
Until I actually have to start using one to enter my date of birth. Let’s see, it’s now 2010 and I was born a few decades ago, so what’s a girl to do? Spend the next few minutes clicking those cursed arrows to get back to the month and year of my birth! 520 clicks worth to enter just to get to my birth month! Using keystroke level modeling, that comes out to an additional 104.2 seconds to enter my date of birth. That’s almost 2 minutes of my life I can never get back.
Most calendar widgets now include the capability to scroll through years as well as months, which would definitely save me clicks, but it doesn’t make it any more fun when I have to enter date farther in the past.
What I like about calendar widgets:
- A calendar widget provides a visual display for users who may find it easier to select a date or dates using a familiar metaphor over other interface elements such as dropdowns and/or text entry fields.
- Use of a calendar widget guarantees date and spelling accuracies and minimizes user-entry errors.
Things to think about when considering using a calendar widget:
- The use of a calendar widget is optimal when the target date is close to the actual date. Date of birth most often is not the proper place to be using a calendar widget.
- A user should not be required to use the calendar functionality; instead, they should have the option of clicking within a text entry box and entering the date.
- Make sure your calendar widget is keyboard accessible.
The use of a hybrid model for capturing date of birth is fairly new and usually involves the combination of drop down boxes and text entry fields:
This scenario allows me to use the drop down box for the shortest list of options (month) saving me from the possibility of scrolling through long lists for both my day and year of birth. It does not however completely remove the formatting issues we see with segmented text boxes as mentioned above. And this version offers me no hint so I am on my own to figure out what the valid format might be (hopefully they took my advice above and allow all valid formats).
So…Have we learned anything? There are various ways to capture date of birth, but is there a RIGHT way to do it? Personally, I advocate for the straight text entry, allowing a user to enter their information in whatever format they prefer and letting the system do the transformation into its desired format. But this actually seems to be the least utilized scenario out there. Instead folks are told to use only the system’s allowed formats or they are subjected to extra time and clicks to ensure life is made easier for those who want our data as opposed to us as the customer. Next time you’re asking for someone’s date of birth think about that. :)