I'm designing some interfaces for forms that will be used on a desktop webapp and I want to make it as easy as possible for users to input the data that is required of them.

The input control that I'm struggling with is an input for duration of time. It becomes tricky because in this use-case they should be able to input a duration of anything from 15 minutes to 6 hours. So the control should span both minutes and hours. Obviously users shouldn't have to know how many minutes are in 4 or 6 hours even if it can be calculated pretty easily.

I've seen this answer by Andrew Martin but a dropdown for 2 options feels a bit redundant and clunky.

Are there any input controls that might solve this problem? I thought about a scale but then again I don't know how that would really work.


What is the best input control for setting the duration of time spanning minutes and hours?


It depends on the users. Is it a form, that a user uses very often? in this case one field with the input like "6 m" or "6 h" would be a possibility. This is very fast but has to be learned. Therefore only an option if the users are powerusers.

If this is not the case, two fields could be a solution. Let the user input the duration in either a hour and a minute field, but let the user be flexible. This means. If the user inputs 90 in the minute field the value has to be translated to 1h 30m or if the user inputs 1,5 in the hour field this would be translated to 1h 30m. If a user does not understand the functionality, he could always use both fields.

  • I was thinking the exact same thing as @BrunoH when reading the Question. Two fields just like First Name and Middle Initial. Users can populated one or both fields. IMO, this is quicker to tab through than to point/click/select a dropdown. – jhurley Jan 24 at 15:28

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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