You need more attention with fingers in your application

May 30, 2020

The human has a lot of differences in the body, it is not different about the hands and fingers. When you are a mobile developer or web developer you need attention to the size of components, it involves considering different widths of fingers, primarily the fat finger.

Imagine three widths fingers: fine, medium, and fat:

No alt text provided for this image

Well, why this is important? Because if you want to make your product more accessible and avoid mistakes, this is important, another point is almost all devices are touchscreen.

Microsoft researchers people's ability to touch varied target sizes and concludes: smaller button, the more mistaps.

Does it exist in large applications? We will see...

1. Instagram

No alt text provided for this image

In this example, ever I need to show my comments I can go to a profile below because the components are near.

2. Linkedin app

No alt text provided for this image

More problematic, here if the user has a fat finger he can touch in 4 features because they are too near, a bad idea that can direct the user wrong.

3. Youtube

No alt text provided for this image

The end example, the navbar Youtube, again, if the user has a fat finger, he can through to error.

Then, why the ideal width?

No alt text provided for this image

In accordance with the research conducted Microsoft, 7MM is a good-enough size, but on the web, we work with pixels, so 7MM means 40px approximately

So, you need to give more attention to the hands, are they that interact with the screen and your app, and the human being is different. Depending on the app your build, wrongs aren't accepted too easy (ex. bank app), so it is important thinking each detail.