Typical Appearance

Date and time component appearances are widely varied across all different platforms. It is typical to see visual representations of date and time (calendar and clock) to be featured, however, to view specific appearances of date and time components see the platfrom-specific instances section below.

Typical Behavior

Date and Time objects provide the user with the ability to store references to particular instances in time. They can be broken down into parts and manipulated accordingly (hour, minutes, seconds, month, day, year, etc.). Different timezones, different conventions of time, and particular calendars can also be applied/referenced.

Events

Users have one way of manipulating the date and time via this component, and that is through the event of a value change that initiates changes to be made to the date or time, and essentially is what allows the user to "use" this component.

There are multiple ways to initiate a value change on a date and time component. Generally, a user has the options of:

• Typing new values into the input form
• Incrementing or decrementing values using the up and down arrows located next to the input form
• Clicking on a new date on the calendar representation

Upon changing the values using either of the methods above, the system reconfigures its date or time with the changes the user has made. Generally, the component requires the user to click on a "save" button in order to formally set the date and time with the new value changes.

Note: The date and time component is made up of other components such as buttons, check boxes, and radio buttons, all of which have their own events. Therefore, the date and time component inherits those same events, as they allow the event of a value change to occur. See those components in the catalog to learn more about those events.

State Diagram

The date and time component consists of three states: a "locked" state, a "unlocked" state, and a "request" state. The "locked" state indicates the state in which changes are not allowed to be made to the component (unadjustable). The "unlocked" state indicates the state in which changes are allowed to be made to the component (adjustable). The "request" state indicates that changes have been initiated by the user, and are pending confirmation (apply changes/save changes).

Note: This is a state diagram for date and time component's in general. It is a possible that a certain platform may contain/omit an intermediate step (which can be found in the platform-specific instances), however, this is generally what each component follows.

Component in Action

To see the date and time component in action within different platforms, see the Platform-Specific Instances section below.

Variants

The date and time components on any platform can be used to create events in the calendar applications on specific calendars, in specific timezones. They can also be used to set alarms in the clock applications for specific days of the week. There are also many third-party applications as well as in-browser extensions and applications that allow offer different interfaces for displaying date and time. See the platform-specific instances section below for more information on each platform's specific variants.

Priority Metrics

In regards to usability metrics, it is important to note that the date and time component does not prioritize all five of Nielsen's five quality components (metrics) of usability. That being said, the date and time component on a machine prioritizes learnability and errors. But also addresses the memorability, efficiency, and satisfaction of its design.

• Learnability: As one of the top prioritized metrics of usability, the interface of date and time components across the majority of platforms house many useful features that cater to first-time users. One these features includes the visual representation of a calendar and clock for date and time (respectively). Date and time component also provide simple features in order to change both date and time. Most interfaces feature a input form that allows the user to either type in a specific time/date, or they may use the up and down arrows located next to the input field to increment the date/time. The visual representation of a calendar allows users to click on specific dates, as well as scroll through different months, and on some platforms, years. This familiarity provided by the visual representations coupled with the implementation of simple components such as an input field and a clickable calendar allow the ability to use the component to be easily picked up by first-time users.

• Errors: Equally as important as learnability, error prevention is prioritized when it comes to the date and time component. This is because users are heavily dependent on the date and time that are displayed on a machine. The visual representations provided on the interface also allow users to affirm the changes they make to the date or time. Users may be more familiar with seeing the date on a physical calendar or seeing the time on a physical clock, therefore visual representaions allow those users to confirm the correctness of their modifications to the date or to the time, preventing errors. Being able to resolve user errors is also a crucical part of this metric. The component may also include a feature for setting the date and time automatically depending on the machine's location and timezone. In the case that a user changes the date and time incorrectly, this feature serves as a one-click method to correcting the change.

• Memorability: Memorability may not be one of the top priority metrics, however, it still is deemed important as the date and time component isn't an item that'll be frequently visited by users, especially if the machine does include the feature of setting the date and time automatically based on location. That being said, its vital that the user is still able to use the component despite a substantial period without its use. Familiarity plays a role in reestablishing proficiency in the use of a design. The visual representations, specifically the calendar, can remind users of the interactivity when making changes to the date and time. The up and down arrows located next to the input form suggest the logic of making changes (up to increase/increment and down to decrease/decrement). Similarly to the errors metric, how a date and time is formatted and displayed can also hint to users how to modify specific parts of a date or a time.

• Efficiency: The efficiency of the date and time component is not as prioritized due to the fact that the component is not typically visited and used often.

• Satisfaction: Satisfaction is considered the least prioritized when it comes to the usability metrics because users are more concerned with being satisfied with the result of the component, rather than the functionality of it. However, this does not mean that this metric is fully dismissed, as each of the prioritization of the metrics above also fill into addressing satisfaction, as the more learnable, less error prone, and memorable a machine, the more satisfying its functionality is likely to be.

Key Characteristics

In almost every date and time component you will be able to select from a subset of timezones, the option to input a specific time, an ability to display seconds counted, a calendar view to select your current day of the calendar year, and a preference for a 24 hour clock.

Feedback

Perhaps the most important interaction design principle that a date and time component must follow is feedback. Users must never doubt whether:

1. they successfully switched their date and time from 12-hour time to 24-hour time, or vice versa
2. they are in the correct timezone or not (if they chose to have the timezone set automatically), or that the timezone correct (if they chose to set the timezone manually)
3. they succesfully changed any of the settings regarding how they view the date and time component on their specific device