Oh just pick a time

admin — Sat, 24 Oct 2009 15:00:50 +0000

So it’s a difficult problem when you’re designing a form that has a lot of time inputs (the one I’m thinking of has up to 4 including a time range). There is the usual, one time box, and an AM/PM dropdown, but that requires typing then clicking, and feels too tedious, especially the 3rd time.

Then there is the huge dropdown of times, which isn’t too bad for just hours, with which you end up with 24 options, but when you add quarter hours you get 100 items in a huge scrolling dropdown (scrolling dropdowns in themselves can be dubious to some users).

So I did some looking around and found the following options the first of which isn’t the fastest to use, and doesn’t require the least clicks, but was the most consistent with other elements on the page, and also seemed to have the most development behind it, and I ended up using in my current project.

http://pttimeselect.sourceforge.net/example/ (I think this is the cleanest, and works the best next to the date picker, because it looks the same. though it’s not the fastest or most efficient, but I think it’s the most developed.)
http://milesich.com/tpdemo/ (ok but a little overwhelming possibly to some people because of the + the done button that needs to be pressed)
http://labs.perifer.se/timedatepicker/ (this is probably the simplest option, but like I said, 100 might be a pain for some users)
http://haineault.com/media/jquery/ui-timepickr/page/ (while my wife used it fine on the first try, it wasn’t scientific because I didn’t give her a specific time to set.)
http://www.jnathanson.com/index.cfm?page=jquery/clockpick/ClockPick (OK but a little less intuitive than timepickr)
http://www.radoslavdimov.com/jquery-plugins/jquery-plugin-timepicker/ (kinda ok, like a time only version of the second option, but sideways, I’m not sure how well AM/PM works because there isn’t an example)
http://keith-wood.name/timeEntry.html (neat but totally hard to use until you realize its keyboard-arrow-key driven, oops I gave it away)

I think my dream selector would actually be more like this most excellent timer widget for OS X that I use almost every day called Minutes. You’d just grab it and spin around until you have the time you want, then let go to set. Anyway when I have a project with a better budget then I’ll maybe make that version…

No related posts.

Related posts brought to you by Yet Another Related Posts Plugin.

Blowing Through Lines » interaction design

Oh just pick a time