Over a million developers have joined DZone.

Having the Right Touch: 4 Best Practices for Touch Targets on Mobile Interfaces

When it comes to mobile interfaces, you need to consider these four practices, such as button size for sight and touch.

· Mobile Zone

One of the most essential interface tools of the modern mobile device era – and at the same time one of the least appreciated – is the human hand. With touch interfaces, users have an instant precision, dexterity, and familiarity that they’ve spent a lifetime developing. Mobile app developers are then charged with implementing their interface mechanics in a way that leverages the users’ intuition, putting the touch buttons where they should be expected to be and making them the right size. Of course, fingers are less exact than a tool such as a stylus, but for convenience and natural fluidity of use – and to meet the average users’ naturally preferred method for completing most tasks – it’s critical to be able to code your app to function as perfectly as possible when users deliver input via their fingertips.

Here’s a quick primer on tips for creating a touch interface that users will love getting their hands on.

1) Make buttons large enough to be seen, even with a finger in the way.

It’s important that the user get visual feedback that they have indeed pressed the button, in order to know that they should now expect something to happen. The button graphic should appear in a pressed state once it has been touched, and should maintain that appearance until processing is completed, so that the user knows not to keep pressing it.

2) Make buttons the correct size for users’ fingers.

Apple’s Human Interface Guidelines for the iPhone recommend touch targets that are, at minimum, 44 pixels square; Microsoft suggests at least 34x26 pixels. These suggestions may make sense for 640x480 screens, but can be microscopic at larger resolutions – the best practice is to use absolute measurements, with a minimum touch target of 8mm square, and convert these measurements appropriately to the pixels-per-inch of the device in use. Attention should also be given to the screen location of touch targets, which can be harder to tap when up against the edge of the screen (where they may end up being partially blocked if the device has a case on it).

3) Be smart about clickable areas and think about every finger.

Users may touch the screen with the tip of their pointer fingers, the pad of their thumbs, or even with their pinky fingers (i.e. lunchtime). Each finger presents a different centroid – the center-most point of the area that the user’s giant finger is meshing up against – and it’s this centroid that determines where the device believes the user is trying to touch. The best practice here is to include a button’s text and the area of its enclosing geometry in its clickable area, and to leave an invisible 3mm gap between buttons. If a button on the screen is too small to be a touch target, developers can give it a clickable area larger than the button itself, and make this area transparent and invisible to users.

When a user clicks on a target other than the one they intended, this is called “interference.” Ideally, to reduce interference, the centers of separate touch targets should be separated by 8-10mm. When few buttons are required on screen, increasing their size (and especially the size of buttons representing the most common actions) can be useful in minimizing the potential for interference. This technique should not be overused, however: experts suggest that touch targets should never exceed 15mm because targets larger than this can begin to be mistaken for background elements.

4) Don’t position trivial functions next to critical functions.

If interference does occur and a user presses the wrong button, it’s always a tad less frustrating if nothing disastrous happens. Critical functions like logging off or deleting anything should be placed safely inside a menu, or require multiple button presses to complete. There’s no better way to keep app users from hating your interface than making sure it doesn’t trick them into destroying precious data – or worse.

The chief guiding principle of these best practices is to strive for touch interfaces that do what users think they will do. By considering each touch component that goes into the app, developers are able to minimize user error and frustration while delivering functionality that makes the most of users’ natural intuition for controlling their apps with a touch.

Alison Clark is the RhoMobile Product Manager at Zebra Technologies.

[Image Credit: ndoejindoel/Shutterstock]

Topics:
mobile app development ,enterprise application development ,iphone app development ,android app development ,mobile ,user experience ,user interface ,touch support

Opinions expressed by DZone contributors are their own.

The best of DZone straight to your inbox.

SEE AN EXAMPLE
Please provide a valid email address.

Thanks for subscribing!

Awesome! Check your inbox to verify your email so you can start receiving the latest in tech news and resources.
Subscribe

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}