Date and Time Input

Example of the Date and Time Input UX pattern.

Problem

Enable users to enter dates and times with minimal thought or effort on their part, and with minimal chance for errors.

Solution

Provide mechanisms that allow the user to select dates and times or enter the data in a natural ways, as opposed to forcing users to enter text in unfamiliar formats (which is more error prone).

Context

Dates or times must be provided by a user.

Rationale

There are many different ways to represent date and time, none of them being standard. There can be no universal standard representation and data entry for date and time because the appropriateness of any given date/time representation is to a large degree a function of what is being accomplished, in addition to more obvious considerations such as geographic-cultural norms.

If users are forced to use unfamiliar formats or syntax for date and time entry, or even familiar formats that don’t relate well to what the user is trying to accomplish, errors and frustration by the user becomes more likely.

For example, to allow a user to enter a date range for a hotel stay, it may be appropriate to have the user provide the arrival date and the number of nights they wish to stay, rather than providing both the arrival and departure dates. If instead, the user is interested in exploring options within a more flexible range of dates, it may be more appropriate to have the user provide two specific dates, representing the end points of the range.

Implementation

The main goal is to allow the user to provide the date or time in a way that minimizes the amount of thinking and/or effort required.

Prefer input mechanisms that allow the user to select dates and times over mechanisms that require data entry. Calendar-based selection input should be used rather than forcing people to enter text representations for dates. Likewise for time data, prefer mechanisms that allow users to select time components rather than forcing them to enter time data.

In cases where users are required to enter date and time data textually, use data entry patterns such as Forgiving Format, or Structured Format to reduce the amount of familiarity users must have with your specific formats or syntax.

Try to make use of existing data, and the context of the task being accomplished to reduce the amount of thinking and effort required by the user. For example, if the user has already entered a date or time for the start point of a range, automatically move the end point of the range to this date/time, taking advantage of the fact that what the user still needs to enter will happen at a time later than the start point.

Help Me Get There

Infragistics has some tools that can jumpstart your efforts to implement this pattern. Broken down by technology, they are as follows.

ASP.NET

Date and Time Input pattern is implemented in the ASP.NET WebDateChooser and WebCalendar controls. Check out the samples browser to see it in action.

Silverlight

You can use the NetAdvantage for Silverlight xamWebMaskedEditor control for this.

Windows Forms

You can use the NetAdvantage for Windows Forms controls: WinDateTimeEditor and WinSchedule to implement this pattern. If you download the NetAdvantage for Win Client bundle, you can find a sample in the WinForms sample browser under WinScheduleto see it in action.

WPF

You can implement this pattern using the NetAdvantage for WPF’s XamDateTimeEditor and XamMonthCalendar Control. If you download the NetAdvantage for Win Client bundle, you can find a sample in the xamFeatureBrowser under xamDateTimeEditorto see it in action.

Examples

The primary example is from Microsoft Word. It lets you select a date and the time using Forgiving Format, or from a Drop Down ChooserDown Chooser. It allows people to enter the values in a free form text with a, moving responsibility of knowing the specific formats and syntax from the people to the system. Examples of the entered values could be: - mm/dd/yy - next Thu - 5 days It’s visually simple, permits wide variety of formats or data types and provides keyboard access. On the other hand, the expected format not evident from control's form, so it may cause brief confusion. You can hint the format as in the example above, by using Input Hints. It requires careful back-end validation.

http://quince.infragistics.com/10wk

Example of the Date and Time Input UX Pattern Example of the Date and Time Input UX Pattern

You could also allow entering the value in a text field with Structured Format. The desired format evident from control's form, but it has higher space consumption and more visual clutter. It does not permit deviation from specified format, even if user wants to do so.

http://quince.infragistics.com/119o

Example of the Date and Time Input UX Pattern Example of the Date and Time Input UX Pattern

You can embed a calendar or clock control in a form or page. It’s an obvious metaphor, and the input is constrained to allowable values, but it has high space consumption and may not provide keyboard-only access.

http://quince.infragistics.com/11g1

Example of the Date and Time Input UX Pattern Example of the Date and Time Input UX Pattern

A drop down chooser with a Date Picker or clock control combines provides low space consumption while providing an efficient way of selecting the desired value.

http://quince.infragistics.com/116l

Example of the Date and Time Input UX Pattern Example of the Date and Time Input UX Pattern

The drop down chooser can be combined with a spinner if you want to be able to easily move to the adjacent dates without clicking the drop down arrow.

http://quince.infragistics.com/117o

Example of the Date and Time Input UX Pattern Example of the Date and Time Input UX Pattern

Sources

Jennifer Tidwell, Designing Interfaces

Tags

Data Entry, Date Entry.