Target size
The target size must at least be 44 by 44 CSS pixels and it shouldn’t overlap with other targets.
As per Google Design for Driving guidelines, the minimum touch target size is 76dp * 76dp.
Spacing around the targets
Make sure that the spacing between each target is enough and prevent clicking or tapping a target by mistake.
The average size of the index finger is 1.6 to 2 cm, which translates to a width of 45 - 57 pixels.
Small touch sizes are hard to use in shaking environments
Links
A link that is part of a paragraph is excluded
from the target size recommendations.
The target size for the link is the same as the
line height. No need to make it larger.
More spacing for small targets
If there are multiple actions on mobile and their size is 48px or less, then it makes sense to have more spacing between them.
Less spacing for large targets
Target size that grows with the system font size
Safe triangle target areas
Extend target size with pseudo-elements
Add padding
Increase spacing between each row
Make the labels equal to the largest one
Action buttons
Increase button size and spacing
Display each button it a new line with full width
Vertical navigation
The user might expect the full navigation element
to be clickable.
Placement of target items
In cases where there is an action item at the top
and a result at the bottom, the user’s finger on
mobile might cover the result, making it annoying
to see the change.
Thumb is covering the result. It’s hard to see
the changes while my thumb is choosing an option.
The placement of the options should be at the
bottom.
Use CSS outline to have a look at the target size
Applying a CSS outline to every link and button
on the page is a good mechanism. It helps you to
see the outer box for every interactive element
on the page.
Adds an outline to every button and link on the
page plus showing the size of each.