nullseite.de Null und Nichtiges

A better way of entering dates in web formulars

The currently used methods for entering dates in web formulars are awkward. After discussing some of the shortcomings and limitations of the currently used methods, we will propose a better way of entering dates in web formulars.

Nowadays, we usually encounter either drop down lists or calendars or a combination of the two. Short drop down lists are easily handled. But if they get longer, reaching their bottom-most entries is getting cumbersome. A typical drop down list to enter the day of a date has 31 entries. If you, e.g., want to enter the 29th, you have to move the mouse a pretty long way down the screen to finally arrive at number 29. This takes an awful lot of time. Sometimes, you even have to use the scrollbar inside of a drop down list! (Think of a list of countries.)

Calendars seem to be a better choice but suffer from one major drawback: Each calendar has to start on a specific date. If you stay in the same month and year you can finish your task quite fast. But if you have to choose a different month or year, you usually end up with multiple clicks of some kind of forward/backward buttons. This is time-consuming and not user friendly.

Bearing Fitts’s and Hick’s Law in mind, we present an alternative approach to entering dates, or any data in general, in web formulars esp. if you are dealing with long lists of values. Our solution uses the standard drop down list formular elements as a mnemonic anchor for the user but extends their functionality in such a way, that input of data with the mouse is easier than with the default elements. There is no change in behaviour for keyboard users.

Take a look at the following mockup showing an example for a typical web formular that requests personal data. Besides input fields for the first and last name, street, ZIP etc. we have three drop down lists for the birthday (“Geburtsdatum”).

The standard behaviour of these web formular elements is clear. Without any changes a click on the day drop down list would show all days from one to 31 with only minor differences in appearance and behaviour depending on the browser used.

Our proposal for a better way of entering dates uses Javascript and Layers/CSS to alter the default behaviour of the drop down lists. Upon activating the, e.g., drop down list for the day of birth using the mouse, a semicircle showing the numbers 1 to 12 springs into existence on the right hand side of the drop down element as shown in the following picture.

This way, all the numbers from 1 to 12 can be reached with the same amount of time using the mouse, i.e., all numbers have the same distance to the drop down list’s button element (i.e. the triangle) conserving mouse movement. Either the fast forward symbol left to number 12 ist used to scroll to the following numbers 13, 14 etc. Or you can use, even more conveniently, the scroll wheel of your mouse. As soon as number 1 scrolls “out” of the semicircle a fast backward symbol is shown at the top of the semicircle. Usability regarding scrolling heavily depends on the scroll speed. This is still subject to testing. A full 360° circle showing all numbers from 1 to 31 would be perfect, but either the circle is getting to big or the numbers are getting too small for the Art Directors to be happy. ;)

No voodoo how the month…

…and year will look like.

We are still optimizing the user experience. First tests indicate a notable improvement in the time used to enter dates in web formulars using the described semicircle-approach. As soon as the tests and optimizations have been finalized, we will show examples so you can try it out for yourself.