Checking the site for the convenience of clicking on the buttons with your finger

What is finger friendly?

The site page contains many active elements: links, buttons, form fields, overlapping lists, etc. To make it convenient for phone users to interact with them, it is necessary that these elements are large enough. Then it will be convenient to poke them with your finger on the screen.

The size of the finger touch area and the size of the button on the smartphone screen.

If the size is too small, the user will miss the buttons. Moreover, he will need to be distracted to aim. That is, the user’s brain will be additionally loaded with the task of correctly pointing the finger at a narrow target on the screen. The level of user focus on the study of the site is reduced. This has a negative impact on sales.  

Which elements should be finger friendly?

All the elements that are pressed with your finger.

Text input field, drop-down list, button, link - all must be of a similar size.

You also need to fix all the elements that have a pointer cursor indicating a click. These elements are not buttons in the classical sense of the word. But they should still be easy to click.

There are many other elements that are also clicked with a finger.

How important is it?

Imagine you are creating a dashboard. How convenient will it be to work with small buttons, levers and switches? By making the active interface elements convenient to press with your finger on the phone, you will get:

• The user’s work speed increases. The faster he interacts with the site, the more pages he will have time to visit.
• The user’s focus on the site content is growing. The user is not distracted by aiming and hitting the buttons. He completely immerses himself in the process of studying the site.
• The user does not miss and does not get annoyed.
• Visually, everyone is used to the big buttons. Small buttons are perceived as a mistake or flaw on the site. This negatively affects his image.

How to fix it?

Just make the size of the active elements at least 40 by 40 pixels. That is, everything that can be clicked on, you need to make a minimum of this size.

What does “Not all elements are displayed” mean?

This tool is designed for visual highlighting of problem blocks. There are also hidden elements, for example, in pop-up windows. To find out about them, use the [page-checker] tool(/tools/page-checker).