The date picker UI widget is common. You see it all the time in calendar applications such as airline booking sites. It makes sense. It's a mini-calendar, and the user simply clicks on the day they want.
But time pickers are still in the dark ages. they are usually a drop down menu where you have to scroll down to the time you want. Or worse, 3 spin boxes: one for the hour, one for the minutes, and one for meridian.
My solution is a time picker widget that uses the metaphor of a clock face. Sure, you can type into the text box at the top to simply enter the time you want. Or you can click on the hours, minutes, and meridian on the clock face.
So if you're working on an application that requires users to choose a time of day, think about using this. And let me know in the comments if you do. Thanks!
Update: I wanted to address some of the feedback I received on this. First, yes the parsing of the text box should work for those who want to type. However I still think there is value to having a visual time picker. It nicely parallels the date picker widget, gives them equal visual weight (and therefore equal perceived importance), and—probably most important—it allows the user to keep using the mouse if they were already doing so to pick the date.
And yes, the worst case is 3 clicks to get to the right time, but more likely it will be 2 or 1. For a date picker, it's the same. Next and previous months require an additional click, and further dates even more clicks. You could put two clocks side by side for AM and PM to avoid one click, but I'm not sure that's worth it. Then again, I've always thought that having a Mac OSX dock style date picker with all 12 months shows side by side in a fish eye view would be nice.
But time pickers are still in the dark ages. they are usually a drop down menu where you have to scroll down to the time you want. Or worse, 3 spin boxes: one for the hour, one for the minutes, and one for meridian.
My solution is a time picker widget that uses the metaphor of a clock face. Sure, you can type into the text box at the top to simply enter the time you want. Or you can click on the hours, minutes, and meridian on the clock face.
So if you're working on an application that requires users to choose a time of day, think about using this. And let me know in the comments if you do. Thanks!
Update: I wanted to address some of the feedback I received on this. First, yes the parsing of the text box should work for those who want to type. However I still think there is value to having a visual time picker. It nicely parallels the date picker widget, gives them equal visual weight (and therefore equal perceived importance), and—probably most important—it allows the user to keep using the mouse if they were already doing so to pick the date.
And yes, the worst case is 3 clicks to get to the right time, but more likely it will be 2 or 1. For a date picker, it's the same. Next and previous months require an additional click, and further dates even more clicks. You could put two clocks side by side for AM and PM to avoid one click, but I'm not sure that's worth it. Then again, I've always thought that having a Mac OSX dock style date picker with all 12 months shows side by side in a fish eye view would be nice.
Love it!!
It belongs at StealThisIdea.com. And in many other apps.
(I wish the iPhone date picker would use the usual calendar month widget and not the silly slot machine spinners.)
- Philip
You're right that the time picker widgets are awful. But I'm not sure this is any better.
The calendar picker widget is better than a text box because it gives me extra information: the day of the week for the dates. I don't readily know the number for next Friday, but it's easy to pick from a calendar.
A time widget has to be better than a text box. I don't think this one is. I can type "2:35pm" faster and more precisely than I can pick them from any of the time picker widgets. A text box might help by auto appending a good guess at the rest of the string... but that's about the only improvement I can think of.
Unless a keyboard or keypad isn't available for some reason (touch UI?), please just make sure the text box works.