Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

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?

share|improve this question
    
Sounds to me like you're trying to do exactly what Wufoo do. See how they represent time in their Time sheet example. –  Chris Morgan Aug 31 '11 at 3:42
    
I had a look at how wufoo did theirs previously, however I am wondering if its better having text boxes or drop downs. –  F21 Aug 31 '11 at 3:44
5  
Whether seconds are important depends on why someone would want to enter a time value. If it is the time of an appointment I doubt that seconds matter. If it is the time it took me to run 10 km, you bet you the seconds are important. –  Marjan Venema Aug 31 '11 at 6:25
    
Note that if you ask for seconds users are almost certainly going to approximate, round to extremes (0, usually) or just leave it blank. Don't be too specific unless you have reason to believe the seconds are important and your user knows how many there were. –  Ben Brocka Aug 31 '11 at 14:13

3 Answers 3

up vote 6 down vote accepted

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.

enter image description here

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.

share|improve this answer
    
Both IE 10 and Firefox 18 still do not support that element, but they fortunately still fallback to a regular text field input. –  Sahas Katta Feb 7 '13 at 3:09

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

selecting a time on wp8

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.

share|improve this answer

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

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.