Best practices for selecting time

Question

I am building a web application that will allow users to create custom forms. There are numerous widgets that can be added to the form.

One of them is the time picker. What is the best way to present a time picker? I have the following options:

• Textboxes for hours, minutes and seconds arranged according to the time format of the user's locale.
  • AM/PM in a drop down depending on whether the region uses 24 hour time formats or not.
• Same as above but use drop downs.

Finally, is it sensible to allow the user to input seconds? Is this confusing? Do you find the seconds field to be useful for general user designed forms?

Answer 1

HTML5 has a type="time" input which in my Chrome Browser presents a spinbox field as below, but which doesn't let me enter seconds - or at least if I do and hit the up/down buttons, the seconds are removed.

However, this relies on the user having to think about the separator (a colon in this case, but periods are also valid in some locales), so if using spinboxes, I think I would prefer that hours minutes and seconds were three separate spinboxes, with the seconds defaulting to zero or not shown at all, depending on the situation. Sometimes you do see spinbox fields with 12:45:23 for example and the spinbox adjusts the h/m/s depending on where the caret is - i.e. effectively 3 spinboxes combined into one.

Then there's the consideration of a 12 or 24hr representation - and if you have a text box you might need to consider parsing/displaying 3pm (or other formats 3pm, 3PM, 3 pm, 3p.m., etc ) as opposed to 15. In this case a drop down would remove any element of doubt in the user's mind as what to enter for the hour field as compared to text boxes or editable spinboxes.

These issues can be mitigated a little by showing an example, but if you need to show an example, then my take is that the presentation is not clear enough and the example is a hack.

You could present AM/PM as another field, although looking at the Wufoo example mentioned above - they put AM or PM as an extra field at the end - away from the hour entry which is actually the most relevant connected field. In that scenario with text boxes, and with the seconds field being present as well, users might well enter 15 for the hour and then have to correct it back to 3 when they see the last am/pm field. Drop downs might alleviate that issue.

When entering numbers in a text field, users might think about whether they have to enter 6 or 06 for example, and drop downs help to prevent this too.

Obviously, if using a dropdown for the hours then dropdowns need to be used for the minutes and seconds as well, but 60 items in a dropdown is a long list...but on balance, I think it makes more sense because it removes all doubt from the user as to what they need to enter. An additional option is to separate the tens and the units for the minutes and seconds, but that is going to make the display quite cluttered.

In general I would not consider the seconds field useful but as Marjan says above - it depends entirely on context, so it needs to be optional in some way.

Answer 2

Although you did not mention anything about mobile, I think this great approach by the Windows Phone 8 is adaptable.

You select the time by clicking the hour or the minutes (or the seconds, not in this screenshot) and then scroll up or down to set that portion of the time selection. This could be implemented on desktop by having a up/down slider input like in @RogerAttrill's answer for hours, minutes, and optionally seconds also.

Answer 3

I've attached another idea, which is good for computers and tablets, but NOT mobile phones (auto-detect these and present drop-down).