2

What is the best UI approach to a single time input (ex 3:00 pm)? I am not using separate inputs for hours,mins,day part it looks terrible and feels bad. There are two issues here:

a) How to best solve a time input for the "typer" users out there that will just want to type it

b) How to best solve for those pesky "clicker" users that will want some sort of selection visualization

My research on best practices for this have come up short. Does anyone have references material for best practices on time inputs?

1

In my experience, the best solution is a simple combo box (a text box + a dropdown list). Set the placeholder value for the combo box to a default value (such as the current time or the next hour and 0 minutes) -- this allows typers to see the format that is expected.

When users actually type, perform detailed parsing to provide flexible data entry, such as interpreting all of the following as "5:00 PM":

  • 5p
  • 5P
  • 5pm
  • 5PM
  • 5:00p
  • 5:00pm
  • 5:00PM
  • 5:00 pm
  • 5 (if the next upcoming 5:00 will be PM)

You can find regular expressions online for doing this parsing.

In the dropdown list, choose a time increment (such as 15 minutes) and show all values for 24 hours using that increment. For example, 5:00 PM, 5:15 PM, 5:30 PM, 5:45 PM, 6:00 PM, and so on.

Google Calendar is a good example of the above pattern:

enter image description here

For mobile, the prevailing pattern seems to be separate lists for hour, minute, and AM/PM 🙁 :

enter image description here

enter image description here

You might want to experiment with the HTML5 input types (date, datetime-local, time, etc.) as well.

  • I don't think the HTML5 input types are worth anything as they return nothing on malformed input. So if you want to allow e.g., 5P, you're on your own. – maaartinus Dec 28 '16 at 1:27
  • Thanks, great answer. One last question here though, Do you think it is best to do detailed parsing or masking? I am partial to your detailed parsing approach as it allows users to type whatever and we fix it, but the other designer I work with likes masking as it just doesn't allow the user to type in anything other than the correct format. Thoughts? – Lisa Frank Dec 28 '16 at 16:00
  • Masking is fine, but it feels less "free" for many users. So I prefer the parsing approach, as it better supports users who have differing input preferences and doesn't force them into a system-mandated format. For example, if the prevailing use case for a given user is to input "top of the hour" (0 minutes) times, then they can quickly type a single number and an "a" or "p", and never have to worry about the minutes. – Gary Coker Dec 28 '16 at 18:51
  • If you want to see how well the adoption for the HTML5 input type of date, datetime-local, time etc. are you can use this test page: tiny.cc/fieldtest Mobile browsers seem to handle datetime-local and time well, on desktop Chrome seems to, but no luck in Firefox/IE11 (I don't have easy access to Safari/Edge to test there) – scunliffe Dec 30 '16 at 3:43
0

test pen:http://codepen.io/Ella33/full/rWXaRR/ Detail Pen: http://codepen.io/Ella33/pen/ZBgzqY

Solutions

  1. html5 "masked" input + stepper
  2. flexible data entry + select

Thanks so much for the feedback. I ended up testing 2 different solutions (on a small group) this is what I found:

Results

  • "Clickers" liked stepper much better than the select, they got confused thinking they could only select an option
  • "Typers" liked liked flexible data entry
  • side note: Solution 2 is horrid on web-mobile, Solution 1 is much better web-mobile

Conclusion

Flexible data entry + stepper
I still need to test this last option, and would have loved to test the above solutions on a larger sample, but feel confident that this is the best solution. Thoughts?

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.