The right drums for timing

Recently, I wrote about how I see the alarm clock of my dreams for Android. Thanks to everyone who offered their help with its embodiment.

To be honest, I did not expect that so many cool guys would respond and initially did not cope with the organization. It’s my fault that a little mess is going on. But this week we will deal with organizational issues and the work will boil. Thanks again to everyone.

And today I’ll talk about how to make a high-quality timing drum for this application. The same principles can be applied to any other pick-up drums.

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 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 determined by squeezing the surrounding background to the size of one pixel and looking at its color.

The digital series also deserves separate consideration, since it is tricky:



Each digit consists of three layers: highlight, shadow, and the digit itself. The layers are shifted relative to each other by a small amount - this creates the illusion of depression. Moreover, when the numbers move from the middle of the drum to its upper part, the position of the shadow and flare change smoothly to match the lighting. Also, when moving from the center of the cylinder to its edges, the transparency of the numbers changes.

Mechanics

To make the drums pleasantly twist with their fingers, they must comply with the laws of physics. Therefore, if you move the drum with your finger and release it, it should remain in place (gently springing to the nearest number). If the drum is accelerated and released, it will continue to spin by inertia, gradually slowing down due to friction in the axis.

Acceleration of deceleration must be selected experimentally. But one energetic movement of the finger should be enough for one full revolution.

In addition, I propose making “stronger springs” at a risk of a multiple of 5 minutes. So when scrolling the drum over long distances, he stopped at them. When in most cases it will be easier to guess with what force you need to push it to select the right time. If you need to set the time to the nearest minute, you can easily twist the drum with your finger to the desired value.

It is important that the point of contact between the finger and the screen and the center point of the drum move at the same speed. Otherwise there will be a very unpleasant sensation of desynchronization and the illusion of tangibility of the drum will disappear.

Active area

The drum is a fairly large interface element. Therefore, its active touch area may 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 twist it, the active area of ​​the element should expand to the entire screen of the device. That is, even when the touch point of the user's finger goes lower, higher, to the left or right of the drum area, the latter should still continue to spin. Otherwise, it will be very inconvenient to use.

Cycling

I think the drums should be looped. That is, so that, for example, after the 59th minute, the 0th goes again. So it will be easier to choose the right time and you don’t have to drive the drum from side to side, when, for example, you need to select from the position of 55 minutes, select the position of 5 minutes.

It is important that if the drum rotates by inertia, then it stops in extreme positions. This is in case the user wants to move from 35 minutes to 00 minutes with one movement (the values ​​0, 15, 30 and 45 minutes will be used more often than others).

Conclusion

In this article, we looked at how to create a convenient drum for timing. But if you are developing an interface for iOsi, then it is better to use standard drums. If you want to refine them, then 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 writing an article, I forgot to talk about one more important thing. Next to the drum you need to place a small button with a keyboard image, when clicked, you can enter numbers from it. Sometimes it’s more convenient.