Friday, September 25, 2009

Flex Component - TimeField - Feedback needed

While working on Klok, I have tried several different mechanisms for entering the start time or end time of an entry. Having looked at a bunch of examples such as the Yahoo Astra one, this one, this one and this one I started to see a pattern. Most of the examples are "stepper" based controls. What this means is that to get from one time to a different time it involves a varying number of clicks depending on the times. For example, if the control's current time was 3:35 AM and you need to change it to 12:19 PM, it requires a whole bunch of steps to get there.

What I really wanted was a way to pick the time in the fewest number of clicks and allow for just typing in the time directly if you happen to prefer that. The result is a true time "picker" control that is loosely based on the way a DateField works. There is still some work to be done on the skin but I think I am on the right path.



To use, just click the icon and pick the time. Or, just enter the time directly. The following formats are accepted:
  • 1:49 PM
  • 1P (Shortcut for entering 1:00 PM)
  • 13:49

This control is my proposed solution to be used in Klok 2.

Please give it a try and see if it works for you. (Please try to break it if possible.) Whether you like it or not, please leave some comments so I can improve upon it.

UPDATE - I made some changes based on the comments and updated the demo. Which now has the Klok 2 skin applied to it.

12 comments:

yanli said...

Prefer to adjust a clock by hour and minutes needle

yanli said...

to addon, that is consider as interactive clock rather than interactive data, you seen why does the date/time utility in Windows OS look so much better is because we find that we can set the time and see the result change in the clock.

The clockwise watch is a familiar shape we all have seen everyday, so I do find your sample is very difficult to interpret and require more eye movement to select.

Rob McKeown said...

I started down the path of a clock control with hands but that makes it very difficult to select the exact minute. Even in Windows, the clock displays the time but when you edit the time you are provided with a stepper control.

Also, the difference between setting a clock and specifying a time for the purposes of Klok is that in most cases if you are adjusting the time (in your OS for example), you are not adjusting it very far. Perhaps increasing/decreasing by one hour or a few minutes. When specifying a start/end time like we do in Klok, you are likely specifying times that may vary greatly from the current time.

Kalen Gibbons said...

At first glance it seemed a little awkward, but after playing with it I think it's the easiest possible solution. Maybe the layout just needs a little polishing. Either way, it definitely beats the stepper-based models.

Dusty Jewett said...

I feel like 00, 15, 30 and 45 should all line up on the left side... I realize it makes the list wider, but if you put 'Minutes:' above the numbered list, it should be able to fit in the same size of box.

Rob McKeown said...

Thanks Dusty... I was thinking the same thing...so that they all line up on the right. I will try for the layout.

Also, I just implemented an additional shortcut so that if you hold down SHIFT when you select the Hour it will automatically select 00 and then close the popup, ALT = 30, CTRL = 15, CTRL+ALT=45. This allows you to select the most common intervals with a single click.

I will be posting an updated demo tonight.

Unknown said...

I like it. I think a 'x' in the right hand corner to close the popup would be handy. Some of the morons ... ,um, users I work with would never figure out how to close it. Otherwise, thumbs up here. Nice work.

Rob McKeown said...

It funny you say that, I just had someone test it and they weren't sure how to close it. By the way, if you double click a number instead of single clicking, it makes the selection and then automatically closes it... I will still add an X though

Carlo 'kajyr' said...

I like it! It is pretty fast, but at the first try it left me a little confusedm since the numbers are greyed, just like standard 'disabled' controls.. I'd make them black.

Glen said...

I dug this up from my jQuery links. Check out:

http://haineault.com/media/jquery/ui-timepickr/page/

You could extend this by expanding the quarter hours into exact minutes by adding a third row of buttons under 15, 30, etc.

Requires only 1 click :)

Rob McKeown said...

Dusty - I changed it so the 00, 15, 30, and 45 line up. I agree... that is better. I also added a close button.

Carlo - The styles are all exposed through CSS so the colors can be changed easily. I just updated the demo to have the Klok2 skin

slippmann said...

Having the quarter-hour marks line up on the left is great. To make it even better, have you considered making a larger click area for those values since they are more likely to be used? You could keep the multi-row layout but just allocate the size of 2-3 cells in each row to the quarter-hour values.