In archery, hitting bullseye is the most difficult shot to make. This is because the target area is the smallest on the board. The same concept applies to mobile interface design.

For example, users that are of an older demographic might not be able to easily tap smaller buttons in your UI. When we design buttons that take up most of the width of the screen it will allow them to successfully complete the action more often.

Small targets are difficult to tap accurately. This requires more cognitive effort for the user and can leave them feeling frustrated and dissatisfied after making mistakes. Pressing a button is a simple task and if a user is unable to successfully tap on a button they may start to feel as if it’s their fault, which leads to a negative experience.

In some cases, users will begin trying to use their fingertip for small targets, which will most often yield poor results. The reason being that most modern smartphone devices use heat-sensitive or capacitive touch screens. These screens were introduced with the launch of the first iPhone, and are specifically designed to work best with the pad of the finger. Fingernails often fail with these screens, further complicating the problem.

If we make the mistake of designing our touch targets too small, designers tend to believe that they have more screen real estate to work with. This can result in grouping many small elements together, meaning not only will there be a chance the user will miss the target, they might actually hit the wrong target. Then the user may have completed the wrong action without realising, and will need to figure this out themselves.

It’s important to think also about all the different types of users that will be using your app.

When designing your app’s interface, it’s better to make your touch targets bigger rather than smaller, so that it’s easier for users to tap. Touch targets are the areas of the screen that respond to user input. They often extend beyond the visual bounds of an element or UI. Below is a native iOS button called ‘Mailboxes’. In the second image below, you can see the actual bounds of the button extends further than just the end of the word ‘Mailboxes’.

So, even if the user misses the Text Label on the screen, they will still be able to trigger the desired action because the touch target is larger than what appears, resulting in less user error. But how large should we make these targets? It’s a question that a lot of designers and developers still query.

It’s important to think also about all the different types of users that will be using your app.

Another consideration is that most users prefer using a thumb to press buttons and scroll, whilst holding the device in the same hand. This also needs to be deliberated when setting your target size.

Let’s take a look at what the most popular mobile interface guidelines have to say:

In the Human Interface Guidelines, Apple recommends a minimum target size of 44 pixels (px) wide 44 pixels tall. At Transpire we feel that this is definitely a ‘minimum size’ and in practice this is still too small of an area to be trying to tap successfully. Personally, I like to use the physical limitation of an adult finger as a guide.

In the Android Material Design Guidelines it’s suggested that touch targets should be at least 48 x 48 dp*. A touch target of this size results in a physical size of about 9mm, regardless of screen size. The recommended target size for touchscreen elements is 7–10mm. It may be appropriate to use larger touch targets to accommodate a larger spectrum of users, such as children with developing motor skills.

Android device screens come in many different pixel densities. This is measured by the amount of dots-per-inch or dpi. The more pixels or dots that fit into a given space, will determine the level of crispness the screen will have. You can imagine as a designer or developer, it can be really difficult to manage all of these densities.

To simplify this again, device screens are grouped into buckets known as logical pixel densities.

160 dpi = MDPI (Medium Density) = 1x Scale. (This is also known as the ‘baseline density’) 240 dpi = HDPI (High Density) = 1.5x 320 dpi = XHDPI (Extra-High) Density = 2x 480 dpi = XXHDPI (Extra-Extra-High Density) = 3x

For me personally, having spent a lot of time designing for iOS, I find it easier to think about the scale of the given density. For example, if you design your app’s UI at MDPI, think of it as 1x scale. So in effect 1dp is = 1px. if you’re creating vectors it’s quite easy to scale your app’s UI up to match the other densities.

An MIT Touch Lab study of Human Fingertips to Investigate the Mechanics of Tactile Sense found that the average human finger pad is 10–14mm and the average fingertip is 8–10mm.

Most users will use a device that has a capacitive touch screen, meaning they will be familiar with using their finger pad to interact. So it’s best to aim for around 54dp/px (for all touch devices) as a minimum to limit the amount of user errors.

In most cases, touch targets should be separated by 8dp/16px of space or more to ensure balanced information density and usability.

Ok ok, so size matters. But how do I know my touch targets are large enough? There are some simple ways to find this out to be sure your design is inclusive and accessible by all who have fingers.

In my opinion, the best way to tell if your touch targets are large enough and effective is to conduct usability tests with actual users. Meeting guidelines is a great first step but getting actual user feedback is even better.

Below is a real life example of a user testing facilitator probing a user post completing a task:

Interviewer — “I noticed, you had some trouble submitting your email address on this screen, can you tell me how that felt?”

User — “Oh yeah, I’m not very good at technology.”

Interviewer — “What do you think was causing you to struggle at that point?”

User — “The buttons were hard to tap, and I just kept stuffing it up.”

When all is said and done you can follow all the guidelines and still get it wrong, so for us it really comes down to whether your users can actually use your product efficiently and effectively. It’s the one thing you can do to be absolutely sure that your touch targets are working as intended.If you take nothing away from this post, remember that running usability tests with users of your key demographic and beyond will do wonders for your product and your understanding of it’s users needs and should be a top priority when considering your interface design.

Words by @zacdicko / Powered by Super