Right drumming for timing

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

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

And today I will talk about how to make high-quality drum timing for this application. The same principles can be applied to any other drum picks.

Appearance

In order for a 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 on the drawing 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 compressing the surrounding background to the size of one pixel and looking at its color.

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



Each digit consists of three layers: highlight, shadow, and the figure itself. The layers are displaced relative to each other by a small amount - this creates the illusion of depression. Moreover, when the numeral moves from the middle of the drum to its upper part, the position of the shadow and the 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

In order for the drums to be pleasant to twist with their fingers, they must abide by the laws of physics. Therefore, if you move the drum with your finger and release it, it should remain in place (smoothly springing to the nearest digit). If the drum is accelerated and released - it will continue to spin by inertia, gradually slowing down due to friction in the axis.

The acceleration of deceleration must be chosen experimentally. But one vigorous movement of the finger should be enough for one full turn.

In addition, I propose to make "stronger springs" on the risks of multiples of 5 minutes. So when scrolling the drum over long distances, he stopped at them. When in most cases it will be easier to podgadat with what force you need to push it to select the right time. If you need to set the time to the minute - the drum is easy to twist your finger to the desired value.

It is important that the point of contact of the finger with the screen and the center point of the drum move with the same speed. Otherwise there will be a very unpleasant feeling of out of sync and the illusion of tangibility of the drum will disappear.

Active area

The drum is a rather large interface element. Therefore, its active touch area can match its visual size. 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 has touched the drum and started spinning it, the active area of ​​the element should expand to the full screen of the device. That is, even when the touch point of the user's finger goes lower, higher, to the left or to the right of the drum area, the latter must still continue to spin. Otherwise it will be very inconvenient to use.

Cyclicality

I think the drums need to be looped. Ie, so that, for example, after the 59th minute, the 0th was again. So it will be easier to choose the right time and not have to drive the drum from side to side, for example, when you need from the 55 minutes position, choose the position of 5 minutes.

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

Conclusion

In this article, we looked at how to create a convenient drum for timing. But if you are developing an interface for iOS, 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, the user will be very difficult to get used to them.

UPD: While writing the article, I forgot to tell you about one more important thing. Next to the drum you need to put a small button with a picture of a keyboard, by clicking on which you can enter numbers from it. Sometimes it's more convenient.