Stop using 40px touch targets!
How to calculate the perfect touch target for any device.
TL;DR:
Don’t assume that 40 x 40px will be a large enough touch target for your mobile device. Instead, use my calculator to determine the smallest acceptable touch target for your user’s device. Watch and listen to this article topic here.
As human beings, we engage with the world through all five senses. And perhaps none of these senses are more important than our sense of touch. Before we first open our eyes, listen to our first sound, or take our first breath, we can perceive the world through touch. Human touch lets us experience both pain and pleasure.
We engage the digital world through touch screens and mouse clicks. Global mobile usage in particular has skyrocketed from 8% to 56% since 2011. Because most users interact with mobile screens through touch, UX teams need to design appropriately sized elements on their screens.
When I first started in UX, someone told me “just make all buttons 40px tall”. A lot of articles agreed with this rule of thumb. But what if I were looking at that button on a smartwatch instead of a desktop? What if I was designing on a canvas that was twice as large; do I make the button 80px tall?
Let’s try an experiment. Could you easily and accurately touch the 200 x 200px target? What about the 40 x 40px target? The 8 x 8px?
At some point (probably between 8px and 100px, depending on your screen size), the target becomes too small to touch. But what number of pixels should I use?
We must answer the following questions:
- What is a touch target, and what is the optimal size?
- How can we calculate the number of pixels in an optimal touch target?
- Why does this matter?
By the end of this article, you will be able to answer these questions and design the perfectly sized touch targets for any device! So let’s get started.
What is a touch target?
Per Google Material,
“A touch target is the part of the screen that responds to user input.”
I think we can improve on Google’s definition by defining a touch target with two different categories: physical and digital.
Physical Touch Targets 🌎
Physical touch targets refer to the amount of physical space that gets touched. Think about a forensics investigation with a dusted fingerprint. We could take a ruler and measure the height and width of the fingerprint in inches or centimeters. As UXers, we need to be aware of how our users are physically touching our screens — are they primarily using thumbs to scroll or index fingers to point and peck? How flat are the user’s fingers when contacting the screen? With all these different variables, what size touch target (fingerprint) should we design?
Thankfully, we can lean on existing research that give us an acceptable range of sizes for touch targets. For now, let’s follow Nielsen Norman and say
“Interactive elements must be at least 1cm x 1cm to support adequate selection time and prevent fat-finger errors.”
There we go! So we need to make sure the interactable components on a screen are at least 1cm x 1cm. But how many pixels are in 1cm x 1cm?
Digital Touch Targets 🤖
We measure digital touch targets in pixels/dps/pts. (For the sake of this article, 1px = 1dp = 1pt). A pixel is one of the minuscule dots that make up an image on a screen. The native resolution of a screen describes how many of those tiny dots light up the screen. When two devices are the same physical size, the device with more pixels will provide sharper images. (Check out Sebastian’s article for an in depth look at this topic.)
When we design, we measure our components in pixels. But how many pixels do we need to make sure we get a touch target of 1x1cm? Let’s see what tech companies have to say:
Even well-established design systems don’t share the same consensus of how many pixels we need for a touch target. Just among these examples, the pixels range from 40–90 pixels. Who should we trust?
The confusion only amplifies when we think of scaling designs for multiple device sizes. A 40 x 40 px square on a smartwatch may measure 1cm x 1cm, while the same 40 x 40 px square measures 1ft x 1ft on a football stadium display.
(Feel free to try it out yourself if you have a projector! Digitally draw a circle then project it on a wall. Grab the projector and move it closer and then further away from the wall. Even though the pixel size of the circle never changed, the physical size of the shape will contract as you move closer to the wall and expand as you move further away.)
So we need a way to correlate digital touch targets (pixels) with the physical world (inches/cm). How do we do this?
The secret formula 🤫
I have put together the secret formula to calculate the number of pixels needed to get a 1 x 1 cm touch target. And it goes like this:
Let’s break this down. 🕺🏻
- We’re using the Pythagorean theorem to determine how many pixels exist across the screen diagonal.
- Next, we measure the physical diagonal screen size with a ruler. For this example, we’re calculating using inches.
- Third, we account for any scaling factor by the manufacturer. This topic deserves a separate article. For now, know that Android and iOS treat scaling factors a little differently.
- Lastly, we multiply everything by 0.393. We do this because 1 cm is approximately 0.393 inches. (Skip this step if you measured the screen diagonal in centimeters).
Note: For those wondering about units, the equation above can be simplified to the following. Special thanks to Luciano Infanti for helping me clarify 👍🏼.
And voilà! This equation tells us precisely how many pixels exist in a 1cm x 1cm touch target.
Let’s take a look at an example 🔎
Imagine that I’m designing for a user who will primarily use a 15" Macbook Pro from 2019. If I want to create an icon that is exactly 1cm tall, how many pixels will that be?
Following the steps, I find:
- The native resolution is 3072 x 1920 px. However, I need to use the scaled-resolution (the artboard size I would be utilizing for a 1:1 design scale). The default scaled resolution looks like 1680 x 1050 px.
- The physical diagonal is 15 inches.
- The scaling factor equals “1” because we already accounted for the “scaled-resolution.”
- Multiply by 0.393 because we measured the physical diameter in inches.
After plugging these values into the equation, we find that a touch target of 1cm x 1cm is 52 pixels!
Note:
If you used a different scaled resolution, you would receive various pixels sizes that equal 1cm x 1cm. See the following table.
Does that mean we can’t trust our design systems? Not necessarily. It just means we should verify by performing calculations and taking a ruler with you when you design.
Much math. Why bother?
It’s up to us designers to take a stand and make sure we are considering accessible design. Buttons that are too small are too challenging; buttons that are too large waste valuable real estate.
In our example, we discovered that 52 pixels is our atomic unit of measure. When designing high-interaction components like buttons or navigation icons, be very careful to create anything smaller than 52 pixels on that specific device.
But, I know what you’re thinking. It’s too much math. 😭
Don’t worry. I made a tool so you don’t have to! All you need to do is plug in some variables and my calculator will do the rest. 😊
Let’s summarize
As UXers, we need to design touch targets that strike a balance between accessibility and space utilization. That means we need to stop relying on 40px as a universal touch target size.
Research the type of hardware your users will be using to interact with your designs. Find the specifications from the smallest device that your users will be utilizing. Then use the secret formula to convert 1cm to pixels. Once you have the magic “atomic unit of measure,” use that knowledge to scale your design.
Hey I’m Tony 👋🏻. I’m a product design consultant who gets nerdy about pixels and interaction design. Let’s get in touch!
