Time Picker

Usage

• Time Picker allows users to select a specific time value.
• The most common use case is scheduling an appointment.
• Time Picker is displayed in dialogs.

Behavior

Time pickers provide two methods of entry:

1. Touch input through the dial (Time Picker)
2. Text input via keyboard (Time Input)

Time Picker

Users can select the hour or minute field from the text input and adjust the clock dial below to simultaneously change the corresponding time field above.

Time Input Picker

A user types in a specific value in the hour and minute fields.

The clock dial interface adapts to a device’s orientation. In landscape mode the stacked input and selection options are positioned side-by-side.

Visual Style

Time Picker is customized to express brand identity by adjusting typography, shape, and colors.

Content Strategy

Time Picker comprises a few standard pieces of content:

Label

Used above the field that opens Time Picker, labels should be carried through to the dialog header for consistency. Labels will wrap in the dialog if necessary, but as with all labels, brevity is better whenever possible.

• Aetna: Use Title Case for labels (exception for sentences, e.g. “Pick up medication at”)
• CVS: Use Sentence case for labels

Placeholder

“Enter time” will always appear as placeholder in the field before the user opens the dialog.

CTAs

“Cancel” and “OK” will always appear as the dialog’s actions.

Accessibility

We decided to start with the Native Time Picker. While it has a few quarks it gets a lot of awesome features and configuration from the Operating System that would be very difficult to replicate in our own implementation. In the end we were able to remove all the weaknesses from the Native Implementation through some clever hacks.

Characteristics

• Should force the user to select a Valid Time.
• The control that launches the Time Picker should contain both the current time and the clock icon.
• When utilizing the Time Picker it should be associated with a TextView using the LabelFor attribute.
  • TextView
    • Text: Meeting Time
    • LabelFor: TIME_PICKER_ID
  • TimePicker Button
    • ID: TIME_PICKER_ID

Keyboard/Focus Expectations

• After selecting a Time focus should return back to the control that launched the Picker.

Screen Reader Expectations

• Various Screen Reader and TTS Engine combinations may or may not expand the short hand times.
• Upon opening the Picker the Label of the time that is being picked should be announced.
• When swiping through times focus should start at 12 as list item 1 and continue around the clock.