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.
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.
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,