User interface for recording time or duration

Question

What a good web interface for collecting time from the user. Suppose we want to record the length of time in minutes. But I would like to introduce it so that the user can enter hours and / or minutes.

Just use 2 text fields for hrs \ min? Or a single text field and let them enter "1hr 31min" or "91 min"?

Or is there something better?

Answer 1

Thanks for the feedback.

What I finally finished was that I have one text box that shows the length of time in the format "xxhrs yymin"

The user can edit it, and when the focus is removed from the text field, he recounts the duration and reformatts the text in canonical form.

The parser for interpreting the entered text is quite liberal.

This is a set of regular expressions to match any number followed by "h" or "m" or "d" to represent hours, minutes, and days. If he does not find the "unit" with the number in front of him, it is assumed that you have typed a pure number in the form of minutes and interpret it as such.

So, if the user enters:

"1.5h", it will reformat to "1hr 30min" after exiting the text box.

“90 minutes” will also be reformatted as “1 hour 30 minutes”

The parser looks only at the first character following the number, which means that you can enter “1 day, 7 hours and 19 minutes” and it will recognize it correctly.

Of course, he would also recognize “2 holes and 19 mice” as “2 hours and 19 minutes.”

I think I can live with it.

Answer 2

If you have two text boxes with the words “hours and minutes”, you need to deal with the case when the user enters them in both of them.

3 into h and 35 into m => pretty clear. 3 hours 35 mins nothing into h and 95 into m => 1 hour 35 mins (probably update the display to show that) 

but what about

 2 into h and then 95 into m => does that mean 3 h 35 or 1 hour 35 

I have used too many annoying user interfaces where changing a field clogs other entries to be sure that I can develop a disappointing set of behaviors.

Therefore, I would go for one box into which we can enter 3h or 1h 35m or 95m and have a separate read-only interpretation view.

It seems that there is an opportunity for a good widget to allow recording controlled by the mouse, just as a calendar widget allows you to enter a date. A small watch with dragged hands?

Answer 3

Just let them enter numbers only in a predefined time format.

Place 2 text boxes for hour and minute without hour or minute.

You must also determine if it is a 24-hour system or 12 hours.

Answer 4

Well, individual hours and minutes fields are the safest, but slower to use than a single field. You can set the clock to 0 if you do not expect a lot of duration for 1 hour.

It may depend on your population, but I expect users to be able to process hours and minutes in the same text box if you provide an invitation, for example, "Time duration (hour: min):"

With this prompt, accept any initial continuous string of numbers as hours and any subsequent continuous string of numbers in minutes, so that all of the following input are considered equivalent.

• 2:30

• 2:30

• 2:30:05

• 2.30 (or maybe not: great for keyboard input, but you can make an exception for the decimal point to allow the user to enter fractional hours, for example 2.75 for 2 hours 45 minutes.)

• 2 30

• 2 hours 30 minutes

• 2 hours, 30 minutes

• 2jaQp 30 !!!!

I see no reason to require minutes to be less than 60. The user should also be able to express the time as:

• : 150

When the focus leaves the field, automatically adjust everything that the user enters in the specified (hrs: min) format in order to respond to the interpretation you made.

If everything you need for your purpose is an approximation of time (or your users still rate it), consider the option buttons or a drop-down list with duration ranges (for example, from 0 to 5 minutes, from 5 to 15 minutes, from 15 minutes to 1 hour, more than an hour). Or, if certain duration boundaries exist and the intervals are functionally linear, you can use the marked slider.

Regardless of the input or control format you use, it must be compatible with the source of information. Where do users get this duration? What units, format, intervals and degree of accuracy are used there? How do users think and talk about time among themselves?

Answer 5

I think that there should be no correction on the client side for minutes more than 60, as someone suggested. This will only confuse and create unnecessary problems.

The user entered the data so that he understood what he had typed, and there was no need to correct it.

I would leave these fields filled in by the user. On the server side, I would simply calculate the resulting minutes as:

 $total_minutes = 60 * $_POST['hours'] + $_POST['minutes']; 

Answer 6

I just thought about it and realized that one familiar user interface for this kind of thing is a microwave. For iPhone-like applications, the keyboard may be better than the frequently viewed scroller.

In my case, I think I'm going to go with a text box for "number" and selectbox for "unit" (years, months, weeks, days, hours).

Sliders (jqueryui, html5) can also be an option, depending on which range you're talking about.