Date pickers have become ubiquitous user interface elements in online forms. If you do not know what date pickers are, they are those interactive calendars that pop up to assist you when selecting a date. They are not useful in all situations, like when you already know the date you are going to enter. In this case you can just type the date in, as this tends to be quicker and simpler than using a date picker. However, a date picker can be very useful when you are trying to figure out the date of the Monday before Christmas, the date of next Thursday, or the date of the first Wednesday in May. This is because a date picker allows you to visualize the relationship between a date, January 4th, 2009, and a weekday, Sunday. Yet, the common date picker does have its fair share of drawbacks.
What the Date Picker Lacks
Figure 1. A common date picker user interface.
The common date picker is lacking in speed and simplicity when compared to typing a date into a text field. Typing a date into a text field is a relatively quick and easy process, usually ten keystrokes is enough to enter a date formatted as mm/dd/yyyy. What makes this task even quicker is that you only need eleven keys to enter any date (0-9 and /); using the number pad makes this even easier. On the other hand, selecting a date using a date picker can be a slower and more complex process. If you are selecting a date six months from the month initially displayed in the date picker, then you have to change the month six times before you are shown the appropriate month. The same or a worse problem arises when navigating through years. If the date picker allows navigation by year and month it is only slightly more problematic than only changing the month. On the other hand if the date picker only allows navigation by month, changing the year takes eleven more clicks. It also does not help that most date pickers use a cryptic system of symbols to represent moving forward and back one month or one year. These symbols are the single and double angle quotation marks – or something similar – pointed either right or left. The single angle quotes navigate through the months while the double angle quotes navigate through the years. This is not the most intuitive way to represent month and year navigation. All of these problems contribute to the relative slowness and complexity of common date pickers.
Speed and simplicity are important when filling out forms because users do not usually visit websites for this purpose. Users visit websites to obtain some kind of valuable information. Forms are just there for users to specify the type of information they need. In other words, forms are means to and end and should not hinder or irritate a user on their path to that end. The simple reason for this is that making users happy keeps them coming back to the site. So it should be our goal to make entering dates into a form as easy (quick and simple) as possible.
A Proposed Solution
Figure 2. A date picker with separate month and year displays.
The goal of the proposed solution is to simplify the date picker and make it quicker to use. We start by separating the month and year in order to reduce the complexity introduced by the symbols shown in Figure 1. It becomes easier to connect the meaning of the symbols because they are now grouped with their corresponding item, month and year. We can also use the same symbols to represent navigating forward and backward by month or year. This reduces the number of symbols for which users have to interpret the meaning.
Figure 3. A date picker with expanded month and year interfaces.
The next step is to expand the months so that any month is selectable with one click, as opposed to 1-11 clicks. This also allows us to remove the navigation symbols as they are no longer necessary. Reducing clicks increases speed and removing the navigation symbols reduces complexity because the user no longer needs to decipher the meaning of the symbols or their connection to any item. It is possible to expand the months because the number of months is finite and relatively small. Twelve months can easily fit into two rows when they are abbreviated.
Applying this same solution to the year navigation is more difficult because the range of input for years is application-specific. Displaying 60 years in the manner the months have been displayed in Figure 3 is impractical. It would make the date picker too big and would required more effort by the user to find the appropriate year. In this situation a drop down list would be a better method for selecting a year – better than displaying all sixty years and better then navigating one year at a time. As you can see, I have used an example where the range of input is restricted to five years. In this case it is practical to display all the years because they fit in one row. This has two obvious advantages over a dropdown list. First, it requires fewer clicks and mouse movements to select the appropriate year. Second, the valid range of years is immediately visible; whereas in a dropdown you must expand the list before you are shown that range. While this technique works for small ranges of years, at a certain number a decision has to be made between displaying all of the selectable years and using a dropdown list – or a similar UI element. That decision is application-specific and ultimately left up to the UI designer. I cannot suggest where that line should be drawn, because I don’t know myself. That is a question that may have to be – or has already been – answered by research.
The Date Picker Working Sample
You can take a look at a working example of my date picker. The example code authored by me is public domain, so use it for anything without any restrictions. You can easily identify the code I have authored; as it has my name, email, and URL along with a statement declaring it public domain. If you use the code in your own work, I would appreciate my name and URL be included.
Get the DatePicker.js File. The DatePicker class depends on jQuery.
Get the datepicker.css file and datepicker.ie.css file.
