I recently wrote about how I see my dream alarm clock for Android. Thank you to everyone who has offered their help with its implementation.
To be honest, I did not expect so many great guys to respond and initially failed to cope with the organization. It's my fault that there's a bit of a mess going on right now. But this week we will deal with organizational issues and the work will boil over. Thanks again to everyone.
And today I will tell you how to make a quality time drum for this application. The same principles can be applied to any other drum-selections.
Appearance
In order for the drum to look good, it must be multi-layered and interact with the world around it. Here is its approximate structure:
The more to the right of the picture the layer, the higher it is located.
The hue of the color reflex should depend on the color of the surrounding background. Roughly speaking, it can be defined by compressing the surrounding background to the size of one pixel and looking at its color.
The digital series also deserves a separate consideration, as it is cunning:
Each digit consists of three layers: a reflection, a shadow, and the digit itself. Layers are shifted by a small value relative to each other - it creates an illusion of impurity. And at movement of figures from the middle of a drum to its top part position of a shade and a flare smoothly vary to correspond to illumination. Also, as you move from the center of the cylinder to its edges, the transparency of the numbers changes.
Mechanics
In order for drums to be pleasant to twist their fingers, they have to follow the laws of physics. Therefore, if the drum is moved with your finger and released, it should remain in place (smoothly springing to the nearest digit). If you disperse and release the drum - it will continue to spin on the inertia, gradually slowing down due to friction in the axis.
The deceleration acceleration should be selected experimentally. But one energetic movement of the finger should suffice on one full turn.
In addition, I suggest to make "stronger springs" on risks multiple of 5 minutes. To make sure that when the drum is scrolled over long distances, it stops at them. In most cases, it will be easier to guess with what force it needs to be pushed to choose the right time. If you need to set the time to the exact minute - the drum is easy to twist your finger to the desired value.
It is important that the point of contact between your finger and the screen and the center point of the drum move at the same speed. Otherwise, there will be a very unpleasant feeling of desynchronization and the illusion of touching the drum will disappear.
Active area
The drum is a fairly large element of the interface. Therefore, its active touch area can correspond to its visual dimensions. But you can expand it a little up and down - it will be even easier to get into the drum with your finger:
After the finger touched the drum and began to rotate it, the active area of the element should expand to the entire screen of the device. I.e. even when the point of contact of a finger of the user will leave below, above, to the left or to the right area of a drum, the last should continue to rotate anyway. Otherwise, it will be very inconvenient to use it.
Cyclicality
I think the drums should be looped. That is, after 59 minutes, for example, the drums should go back to the 0th minute. It will be easier to choose the right time and you will not have to drive the drum from side to side, when, for example, you need to choose the position of 55 minutes, the position of 5 minutes.
It is important that if the drum is spinning inertia, it stops in the end positions. This is in case the user wants to move from 35 minutes to 00 minutes in one movement (the values of 0, 15, 30 and 45 minutes will be used more often than others).
Conclusion
In this article, we have seen how to create a handy drum for time selection. But if you are developing an interface for an i-axis, it is better to use standard drums. If you want to modify them, at least copy the mechanics so that your drums repeat it. Otherwise, it will be very difficult for the user to get used to them.
UPD: While I was writing this article, I forgot to tell you one more important thing. Next to the drum, you need to put a small button with the image of the keyboard, by clicking on which you can enter numbers from it. Sometimes it is more convenient.
