Allowing users to enter information in an easy a way as possible is an important part of any web application. With many web apps depending on date or time data, considering how best to ensure usability requires consideration in the web design & development process. Before looking at what affects your choice of input method, I’ll give some examples of the options you can choose between.

Forms of Date Input

“Flat Calendars”

Many websites have relied on representations of “traditional” paper-based calendars, showing rows of days and dates which the user can click.

from Google Calendar

The screenshots above and below show two alternatives for the flat calendar approach: the first (above), displays the calendar on the screen so it is immediately visible to the user when the page loads. The second (below), is a “pop-up”, meaning they rely on user interaction (e.g. clicking on a button or link or in a text box) to make the calendar appear.

from Avis Car Rental

“Drop Down” Lists

A second option is a drop down list style date input. These are most commonly seen in forms where credit card expiry dates are asked for. The use a fixed list of dates, which minimises the chances of a user making a mistake.

from Budget Car Rental (…where I spent some time working long time ago!)

“Natural Language” Approach

The final option I am going to look at is a newer approach. It allows the user to type the date and (or) time into a text box. The application then interprets this and translates it from how the user has phrased it, into an “acceptable” (from a programming perspective) date format. An example of this is shown in the images of the (very useful) web app Remember the Milk.

which the application then interprets as:

Impressive eh?! This is particularly impressive because it promotes a more natural interaction between the system and the user. It does not force the user to rely on one representation of dates and times, instead, it adapts to how the user naturally expresses themselves. This should be the case, as highlighted by Cornelis in an article on the diversity of date input methods:

…it is hard to find any pattern or rationale why one website has chosen for model X [for date input] while the other has chosen model Y. The suspicion would rise that the date input method is often dictated by the way the backend would ‘like’ it. This is a situation which neither we, as interaction designers and consultants, nor the end user should settle for.

The (brief & slightly) More Technical View

Providing functionality like this is obviously much more complex than giving the user a drop down list to select from. There are Open Source JavaScript libraries that can provide much of the functionality for you (finding one of these stopped me from going past the paper planning stage of writing my own JavaScript Library to handle this…thankfully!!). Examples include Date.js (released under the MIT License), and Datetime Toolblocks (released under a modified GPL).

Choosing the best Date Input Option

Given the options, what should be considered when choosing how you ask your users for a date (edit: emm…not that kind of date, you know what I mean). Here are some points, which are all related, to consider:

1. Frequency of use. If the user visits the site / application infrequently, making how the input works as obvious as possible is wise. By providing a flat calendar, that is modelled on paper-based calendars, users do not need to adjust to new types of interaction. If the user visits the application frequently, they may be more responsive to learning how to use novel forms of interaction (if they are of benefit).
2. Trade off between ease of use and speed of use. With some of the date input methods, there is a trade-off between ease-of-use and speed-of-use. While the Remember the Milk model of date input is fast (I find it faster than a flat calendar because you don’t need to use a mouse), for users unfamiliar with it, it is not easy to use initially.
3. Type of user. The profile of your user will impact every aspect of your design; the date input method is no different. If your users technical awareness or skill level is not low, then as simple a means of interaction is required. If they are at a higher level, again more innovative and productive means of interaction can be used.
4. The design of you application. The overall design of the application can be of influence. Sometimes, it is not practical to include a flat calendar on the screen, instead, due to space constraints, or other design limitations, pop-ups may need to be used.
5. Cultural aspects. As date formats differ between countries, for example 10-3-08 means different things to users in Ireland and in the US. Making users aware of these differences, and ensuring that your application is aware of how to handle them is crucial in order to avoid inaccurate inputs.

The usability of any web application should be a key concern in web design & development. Reducing the amount that any user has to adapt, and making interaction requirements obvious, will improve usability. The innovation in date inputs outlined are one such way that this interaction can be improved for certain types of web applications.