Monthly Archive for December, 2008

Improving the Date Picker User Interface (UI)

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

A comon date picker user interface with single arrows and double arrows for month and year navigation

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.

Continue reading 'Improving the Date Picker User Interface (UI)'