Touch-screen bull-eye to create friendly touch-control experience

In the darts game, the red heart is very difficult to hit, because the red heart is the smallest target on the whole dart plate. Similarly, how do we set the "target" size for a touch device?

Small buttons are more difficult to manipulate than large buttons. When designing a mobile interface, it is best to enlarge the size of the clickable target, which is more beneficial for the user to click. But how much "big" does it take to make it easier for most users? Many mobile developers are also very interested in knowing the answer to this question, and finally found the answer in the UI design specification for each platform.

(Image Credit:ogimogi)

Design guidelines for mobile platforms What did you tell us?

According to Apple's iphone HMI design specification, the smallest hit target size is 44 pixels. Microsoft's Windows Mobile user interface Design and Interaction Guide recommends the use of x 34 pixel dimensions and a minimum of 26 pixels. The Nokia Development Guide recommends that the target size should be no less than 1cm x 1cm or x 28 pixels.

Although these guidelines give us a list of the size standards for clickable targets under each platform, but the standards are not consistent and are not consistent with the actual size of the human finger, and their recommended size is smaller than the average size of the finger, which affects the accuracy of the click Target under the touch screen.

　　Small click targets can lead to big problems

Clickable target size is too small to be very bad for the user experience, because if more precise touch is needed. Users need to adjust the operation of the fingers, from the point of view of the operation, into the fingertip operation, so as to operate a smaller size target. Using a finger-pointing operation usually covers the entire operation object, making it impossible for the user to distinguish between the targets they are trying to manipulate, or to receive visual feedback during the operation, and to know whether their actions are effective or not. When users have to use their fingertips to operate, there is a new problem, this way of operation is very slow, and very difficult, poor experience.

The problem is not only that the size of the target is too small, but it can also lead to faulty touch operations. Because the size is small, so easy to crowded together, users can easily touch the nearby target, resulting in the results of the operation is not the user's desire. The fingers are too large, the target size is too small, the width of one finger can probably cover the width of two targets. If you do not press to the wrong location, you will cause the wrong action. The index finger is prone to error, but the thumb is more prone to error. Because the thumb is bigger and more clumsy. Sometimes the user will tilt the thumb, using the side of the thumb to operate, but the target size is too small, still frequent errors.

In the day-to-day operation of mobile users, the use of the thumb is very frequent. Sometimes the user can not open two hands to operate, can only use one hand to hold the phone, with the thumb and forefinger operation. In this scenario, the user's operating accuracy is limited, it is necessary to improve the target size to avoid operation errors, this is the so-called friendly touch experience.

　　Average pixel width under operation of index finger

The MIT Touch Lab did a study to analyze the sensory function of finger fingertips as a survey. The study found that the adult's index finger width is generally 1.6--2 cm. Converting to pixels is 45--57 px, which is wider than the recommended width in those instructions.

The target size of the 45--57 px is very good enough for the user to stick the whole finger on the target. In the process of operation, the user can also see the edge of the target. So the feedback and communication between the user and the control object become very clear, and the user can know whether their operation is effective or not. Because of size, positioning faster, drag is also more convenient. As mentioned in the Fitzpatrick Law, the smaller the target, the longer the operation takes. Small targets slow down the user's operating speed because they require users to focus on precise positioning. The target of finger size is different, this goal gives the user enough space operation, the fault-tolerant rate is also very high.

　　Pixel width In the case of thumb operation

There are also a lot of users tapping the target on the screen with their thumbs. The thumb is wider than the index finger, the average width is about 2.5cm, and the converted imager is the PX.

The actual use of 72 pixels is great, easier to locate, and more comfortable to operate. You can also see the edge of the action target. This means that users do not have to bother to adjust their fingers and use their fingertips to manipulate them. Also do not tilt the thumb, with the thumb side click on the target.

　　The target size of the finger is ideal, but there are special cases.

The size of the target size, set to close to the size of the finger, the benefits of which no longer repeat. But it's not for all the design scenarios. There is limited space on the mobile device. This means that if the size of each target is large, then the screen space is not enough, you need to constantly turn the page, which is very bad experience. You need to measure the screen size, and then calculate the proportions and figure out "What's the right and maximum target size on this size screen?" If you resize according to the size of the finger, the proportion of the entire interface is very bad; once again proportionally adjusted, the maximum target size effect is not false, so you can only use the recommended dimensions on the guidance specification.

For flat-panel devices, the situation is not as complicated as a mobile phone because there is more room for the tablet. No need to be afraid of no space to place the click Target, space enough, you can very leisurely by increasing the size to improve operational applicability. Mobile phone is the most troublesome, click on the target size is very difficult to handle. But it is because the mobile phone space is limited, easy to operate a fault, so it is necessary to set the real size of the target size of the finger. The challenge for designers is to find a way to make most of the targets on the screen consistent with the size of the finger. But it's also good, which forces designers to focus more on functionality and more minimalist style.

　Design Thumb Size Click object for Game Application

The question we cannot speculate is whether the user uses your index finger to manipulate more or more with your thumb. So, for this, we have to do a very careful research, and then set a reasonable target size. However, if your application is a game, most users will use the thumb. That's why in many game applications, the size of some controls is usually as big as the thumb, so that users can hold their hands more securely and operate more accurately.

Gyro13 Steam Copter Arcade has larger touchscreen targets

　　Conclusion

By adjusting the size of the target size, the actual application can effectively improve the applicability of the mobile end, while improving the user experience. Whether your app is a game or something. The target on the touch screen is for the user to click. If the user needs to think "How can I click to complete the exact operation", need to think again before the interaction method, need to adjust the operation method, use a variety of methods to complete the interaction. This means that the interactive design of this product is bad. In this article, I throw out some personal points of view, how to create a friendly touch experience in the unified era when touch is about to become a mode of operation? This is the problem we are going to face. Expect more ideas, and more normative standards.