UX improvement for time selection

[in0ni]

thanks for this module, it should just be part of the base semantic package!

i've completely redesigned the way time is selected due to the following:

• (main issue) existing method of selection contains way too much text in a small tabular format, hard to read
• you must select hour/minute each time you want to make a change to the time
• layout can be problematic on small phones

please give it a try, and let me know what you think. if you have any questions, suggestions, or any objections to merging this with your module just let me know.

thanks!

[mdehoog]

Hey @in0ni, thanks for the PR! Any chance of a jsbin?

[in0ni]

Here you go: https://jsbin.com/fifevar/edit?html,js,output

[mdehoog]

Hey thanks! Seems a little buggy: the calendar now only shows three rows, skipping a bunch of dates later in the month. Also, clicking on the dropdown button doesn't work on the time page.

Overall, selecting a date/time takes 5 clicks, vs 3 clicks with the original. I think I'll stick with what we have now, but feel free to maintain this as an addon!

[in0ni]

Thanks for taking your time to review, though I ask that you reconsider -- the bugs can easily be fixed. At the very minimum can we add an option to choose the style of widget? This way the developer can choose which they prefer.

Note this work was done in response to user feedback from testing data entry of multiple time-only fields (business hours). These test isolate the usability of time selection. Most users complained about selecting a time, this was our top complaint regarding data entry.

The issue is not the number of clicks but the usability of the widget. That being said once a time is selected making a change to hour/minute/AMPM takes less or the same number of clicks as the original method ;)

We received comments like:

• "Time selection is very cluttered, hard to scan"
• "Takes a bit to find the time I want with so much text"
• "Selecting a time is slightly frustrating, why do I have to select both hour minute if I just want to change the minutes?"

After some discussions the main issue agreed on is way too much text in tabular format. We've asked each user who complained about the usability of this widget to test with this new UI and all feel it's an improvement.

The calendar row bug can easily be fixed, as for the button not working properly... yes this came up in the second round of testing, I just have not gotten around to fixing it -- both easy fixes.

Please keep in mind these changes are done in response to user feedback. I understand if you prefer to keep the default layout, but I ask to at least provide the option to use this method of selection -- this way users can select the method they feel is best for them :)