0

I would like our users to type in a time field for a grid column filter. The time field will be formatted in a hours and minutes format like HH:MM or HHH:MM.

My question is how should we allow users to type in this format. This is similar to this question: Time (duration) entry in webapp - pros/cons of various designs with options 1-3 being considered.

I have been considering the following options:

  1. Users type and as they go and the numbers are placed in the HH:MM format. So as a user types "1 2 3 4" they see 00:01, 00:12, 01:23, and 12:34.
  2. Users type first on the hours side of the colon, and then must use the right arrow to manually shift to the right side of the colon.

Another question I am considering is if we do have the HHH:MM field and the user types more than 5 numbers, should we accept the first 5 numbers or the last 5 numbers?

Improve this question
2
  • what's the upper bound of hours added? Do you have a typical range?
    – Mike M
    Nov 9, 2017 at 0:40
  • We have two types of fields: One that is bounded by 24 hours and 60 minutes, and the other bounded by 168 hours and 60 minutes. I personally get annoyed when certain numbers are blocked when I type, so I was thinking to let them type any number they want in the field and then give them the validation message instead of block the values altogether.
    – Kory
    Nov 9, 2017 at 0:41

1 Answer 1

Reset to default
1

If you are doing hours in more than 2 digit format, without helper text they might be confused.

Perhaps you can have visible helper text and start w/ a numerical input (or placeholder) of 0; then users type over. Where it might get tricky is the need to start with 0 to indicate smaller durations, such a 9:50, which then becomes 009:50.

If you have a human friendly output that updates, you have 2 ways to assess the data.

Since you also have 2 types of bounded values, I put two versions:

  • Visible max duration label
  • Infotip w/ hover for duration

The visible label will be explicit and visible to users at all times.

mockup

download bmml source – Wireframes created with Balsamiq Mockups

Improve this answer
4
  • We do plan to have helper text that shows HH:MM before typing, and then formats as they type. I like this idea of human friendly output that updates as well. Since it is less typical for users to have three digits in the hours field, we were thinking to only use HH:MM in the helper text. Also what is your take on how to handle the case where they keep typing after your 132:50 entry box? Stop taking input? Or take the most recent input?
    – Kory
    Nov 9, 2017 at 1:01
  • 1
    good question! I don't have any research on that. My first thought would be to stop taking input, as you've reached the bounds, but I'd like to see what others think of this.
    – Mike M
    Nov 9, 2017 at 1:07
  • My rationale for keeping the HHH is that it signifies what they can do, and that way if they enter type from the left it's a signal to how the input will be parsed. If you start w/ 000:00, they fill in from there.
    – Mike M
    Nov 9, 2017 at 1:09
  • That makes sense. As for the taking the last 5 characters or the first 5 characters, my gut feeling is that the last characters method works better then the users fill all of the possible digits, like a zip code for example. But in either case we are trying to account for when the user makes a mistake, and the last 5 digits may allow them to fix their mistake without using their mouse or backspace key when the first 5 character method requires a backspace or mouse click.
    – Kory
    Nov 9, 2017 at 2:46

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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