Thursday 12 February 2015

Time input by touch movements


Since the early beginnings of the smartphone era I have been thinking about time input by drawing the hands of a clock on the screen of a smartphone. For me this works a lot easier than entering the numbers on the on-screen keyboard. As for intuitive usage, most of us have learned to read the clock in school, so it is very familiar. The only difference is that you 'write' the clock instead of reading it. 

About a year ago I had the time and skills to create a prototype. It functioned but lacked the ‘looks’ and was not very intuitive to use. Lately I had some inspiration to  restyle the original design to make it prettier and more intuitive. I would like to proudly present the result to you:



The image above will not respond to your touch, but the next link will take you to a page where you can try this control.

http://www.detora.nl/tic_demo/tic_demo.html

The control is designed for touch devices. In a desktop browser you can click on the numbers in the analog clock to select the hours or minutes.
If you want to try the control on your phone or tablet you can have an email with a link to the demo page sent to you. Enter your email address below and press the 'Send link by mail'. Your mail client will open and you can send the mail.

Send to email address     Send link by mail
( Your email address is not stored )

Below is an explanation how to use the control:
Touch the clock image next to the time input field and the time input control will appear.
In the center is the analog clock in which the hands can be drawn. Above it you see the digital time with buttons for changing to AM or PM. Below it are buttons to Accept of Cancel. The active hand and the active part of the digital display are indicated by a red color.

Draw the hands starting (approximately) at the center of the clock. To enter 10:15 you start at the center of the clock and swipe towards the 10, then release. The hour in the digital time display above the clock will display 10 and the minutes will have turned red (=active). Then start in the center of the clock again moving toward the 3 this time. When you release you will notice that the digital clock displays 10:15. To change to PM touch the PM button.
If you are satisfied you can press OK to save the time. Cancel returns to the form without saving the time.

I would really like to hear whether you think this control useful. Or maybe you have  suggestions on improving it.

Happy developing,