hokuten.net

Digital clocks are better than analog clocks at telling time. You know it’s true
and I won’t go into any more detail than that. Analog clocks still serve a very
practical function, though: that of time input.
Until voice command (the easiest form of time input) becomes a more prominent
part of our lives, the tactile input of time is one of the more difficult
things.

The Problem

Here are some examples of the hassle we have to put up with:

iPhone

You have to drag or flick to pick your time.
Pros: Infinite scroll if you miss it the first time. Combines input with result.
Cons: You have to go SLOW to have a level of control/accuracy. End up going
up and down really slow to get your hour/minute right.
Quick fix: More space between each item.

Android

Tap the plus/minus controls.
Pros: Fine control.
Cons: Cumbersome, would rather type.

Windows (XP, but not much has changed)

Select the field, type time or click the arrows.
Pros: Analog clock shown with digital.
Cons: Too hard to use in general.

A popular jQuery plugin

Click the hour and minute.
Pros: One click interface.
Cons: Unfamiliar interface takes a second to register. Would take up a lot of
screen space to show every minute.

Outlook (2002, but, again, much has changed)

Use the dropdown.
Pros: Obvious interface? I don’t know.
Cons: Worst case scenarion is click to open -> click-and-drag to scroll ->
click to select.

OSX (Leopard)

OSX Time, either type/click, or drag the hands.
Pros: Familiar interface. Drag the hands is intuitive!
Cons: Too hard to click anything, too small, hands are too thin to target, and they overlap.

Solution

I feel that the one true solution for time picking would be inherently effective
for both touch and mouse interfaces. This is what I propose:

• You first set the time by dragging the hour and minute hands near the time you
  want.
• Clicking/tapping the center of the analog clock toggles AM/PM.
• The hand overlap downfall (when hour and minute are on top of each other) is
  resolved by using giant, non-overlapping handles at the end of the hour and
  minute hands.
• The digital clock updates in tandem with the analog one.
• Use the digital inputs to fine tune.
• Alternatively, you can use only the digital buttons, or type the time in
  the digital fields.

With three (drag, tap, type) modes of input, you will always instinctively pick
the one that is most convenient for your purpose.

I’ve already implemented the hard part—the analog clock—in jQuery
here, and it is the only one of its kind AFAIK. The prototype is functioning in all major browsers:

See the demo at http://sandbox.hokuten.net/atimepicker

Conclusion

Maybe someone has already made this better, if so I wish it were more widely
used. I hope this inspires someone to come up with an even better time input
interface, or improve on mine.