Tip: How to Increase Button Target Area

“The minimum target area for all UI objects that users might want to tap 
is 44 x 44 px” (iOS Human Interface Guidelines). Often 44 x 44 px icon looks huge.
I’ll show the easiest way to increase target area of a button.

Digital Magazine Tip: Buttons Target Area


Icon ≠ Button

Step 1. Create an icon Digital Magazine Tip: Buttons Target Area, the icon is a static element, we won’t add action for this element.

Step 2. Grab rectangle tool (Digital Magazine Tip: Buttons Target Area) and create empty frames on top of every icon. We can group the icon and the frame (N.Tsech 2014-05-01 at 10.25.22 + G).

Digital Magazine Tip: Buttons Target Area

Step 3. Select the empty frame and convert it into a button.

Digital Magazine Tip: Buttons Target Area

Use this tip only if an invisible button doesn’t overlap other interactive elements.

Follow me  https://twitter.com/n_tsech  http://www.pinterest.com/MagPlanet/boards/

Advertisements

4 thoughts on “Tip: How to Increase Button Target Area

  1. Another reason to use larger unpainted frames for buttons on top of visual buttons is that the buttons in DPS will by rasterized in SD resolution. This technique gives us as larger hit area as not pixalated visual button. To the point, best practice is to make this kind of hidden unpainted button from graphic frame because there is cross on it which makes it easier to see. Another practice is to put buttons on an especial Buttons layer, so you can determine them also with layer color highlighting.
    — Alexey Kletsel, Adobe DPS ACI

Comments are closed.