Touch

Indicate tappable area on mobile

Indicate tappable area on mobile
  1. What is the minimum tappable area for an interactive control recommended?
  2. What is the typical touch size of the thumb?
  3. What are touch targets?
  4. How big should buttons be on mobile?

What is the minimum tappable area for an interactive control recommended?

Consider making touch targets at least 48x48dp, separated by 8dp of space or more, to ensure balanced information density and usability. A touch target of 48x48dp results in a physical size of about 9mm, regardless of screen size. The recommended target size for touchscreen objects is 7-10mm.

What is the typical touch size of the thumb?

A past study from the MIT Touch Lab found that the average person's fingertips are 1.6– 2cm (0.6–0.8 in) wide. The impact area of the typical thumb is even larger — an average of 2.5cm (1 inch) wide!

What are touch targets?

Touch targets are the parts of the screen that respond to user input. They extend beyond the visual bounds of an element. For example, a button may appear to be 48 x 36 px, but the padding surrounding it comprises the full 48 x 48 px touch target.

How big should buttons be on mobile?

Studies by the MIT Touch Lab suggest that 10mm × 10mm is the best minimum size for buttons on mobile due to the average size of fingertips.

Is the 8pt grid a meaningful tool?
Why do we use 8px grid?How to create stronger layouts with the 8pt grid system?Does iOS use 8pt grid?What is 8 point system? Why do we use 8px grid?...
How can I better organize this table data, where rows are repeated since metrics have both a 'lights on' and 'lights off' value
Which two ways can be used to reduce the number of rows in a data set?Which visualization should you use to display the total profit value in a sales...
Design for input of time-series data
What is time series input model?Which is the best model for a time series data?What type of model is preferred for time series data analysis?How do y...