User interface design document: finger-friendly design

Article Description: finger-friendly design-designed for better clicks.

When playing darts, the bull's eye is the most difficult position to hit, because the bull's eye is the smallest part of the entire target area. The smaller the goal, the more difficult it is to achieve. This guideline also applies to the touch screens of mobile devices.

As we all know, for touch screen equipment users, small area of the target than the size of the target more difficult to manipulate. Therefore, in the design of mobile device interface, touch target must be sufficiently large enough to allow users to operate freely. But how big is enough? How big is the most suitable size for most users? Major mobile device developers are already aware of this problem, and the most common approach is to find answers in the user interface design documents of major vendors.

So, what does the design document say?

The minimum size for Apple's iphone Human Interface guidelines recommended touch targets is 44*44 pixels. Google's Android Design says 7-10mm is the ideal size. The minimum touch target size recommended by Microsoft's Windows Phone UI Design and Interaction Guide is 7*7mm (26*26px), and the ideal size is 9*9mm (34*34px). Nokia's development guidelines suggest that the target size should be no less than 10*10mm (28*28px).

Although each design document gives a roughly appropriate size, we can see that each design document is different. In fact, some of the dimensions they recommend are much smaller than the size of the user's finger, and it is these errors that cause problems with the user during the operation.

Small target, big problem

If the touch target is too small, the user needs to pay extra attention to the exact click. Users need to constantly adjust their fingers to click on the target and get feedback. Some people are accustomed to using the finger belly, this can cover the entire target area, but it is difficult to click on the button at the same time see the content, also do not see the feedback of the click. And some people use their fingertips, so that they can get visual feedback while clicking. If users need multiple attempts to reach the target, it will affect the smooth operation of the task, consuming unnecessary energy, and increase the user's frustration.

In addition, small touch targets can easily lead to misoperation. When small buttons are grouped together, it is easy for the user to click on the adjacent button because the target is too small, triggering other actions. Such misoperation is especially noticeable when the user uses the thumb to do the operation. Some users can see the feedback and even click on the side of the finger, which is completely avoidable.

For users, most of the time they have only one hand to operate the equipment, single hand-held equipment, probably only with the thumb of the click operation. Our design should not be more difficult to click because the user is using the thumb instead of the index finger, nor can it cause them to operate incorrectly.

Average width of index finger

According to a study by MIT, most adults have a 16-20mm index, which is roughly 45-57px, and only Apple's 44px is close in the design document.

If the touch target width can reach 45-57px, then the operation is very comfortable, and in the click of the button, the edge is visible, so that the click of feedback can be well reflected. User clicks and drag-and-drop target speed can also be greatly improved. According to the Fitzpatrick Law, the smaller the target, the longer it will reach the target. Small goals require the user to pay extra effort to accurately click on it, increase the width of the target do not worry about these problems.

The average width of the thumb

Some users like to use the index finger to operate, but with the thumb of the users are many. The big difference between the two is that the thumb is wider. The thumb width of an adult is about 25mm, which is about 72px after conversion.

For the thumb user, the 72px wide touch area can be positioned well, while also seeing the edges and corners of the target to get feedback.

A study by Microsoft research found that the number of misoperation hits for touch-screen users decreases as the click Target increases, and the user clicks on the target faster.

Although there are many benefits to increasing the size of the target, there are exceptions in some cases. As we all know, mobile device space is very limited, if blindly increase the size of the button target, mobile devices, especially the mobile phone screen will certainly not be enough. So in the design, we have to solve the screen size and click the target size between the conflict and contradictions, in the case of the screen allows as much as possible to use the full size of the button target, if not, we have a design guide recommended size available.

The application in the game

Another issue we need to consider is when users use their index fingers and when to use their thumbs. If it is in the game, users will be more inclined to use the thumb to operate, think about Psp,nds. Therefore, the control area in the game application is best suited to the width of the thumb. Similarly, the size of the touch target can be both comfortable control and the target feedback.

There is no doubt that making the touch area size in mobile applications match the size of the user's finger greatly improves the usability of the application. The user experience will be greatly compromised if the user has to pay special attention to the click Operation when using mobile apps.

This article is compiled from Wang Rui, the original address.