Jump to content

What is the optimal size of an iPhone touch target?

+ 1
  adfm's Photo
Posted Jun 30 2010 07:30 AM

Designing an interface usually involves matching up to a grid. For a finger friendly interface to be effective you'll want the active interface elements to be no larger than a finger tip. But who's finger are we talking about, and how big is big enough? This excerpt from Josh Clark's Tapworthy will introduce you to that magic number.
But just how big is big enough when it comes to iPhone tap targets? Well, what's the size of a fingertip? Apple pegs it precisely at 44 pixels and this measure appears reliably throughout the standard iPhone controls. In portrait orientation, 44 pixels is the height of buttons in the Calculator app, of the keys of the iPhone's virtual keyboard, of items in a standard list display, of the screen-topping navigation bar, and the list goes on. (With the iPhone's 163 ppi screen resolution, 44 pixels is about 7mm, or just a hair over ¼ inch.)

Attached Image

The 44-pixel block is, in many ways, the basic unit of measurement for the iPhone interface, establishing the visual rhythm of many iPhone apps. That metric is significant as the recommended minimum size to make a tap target (like a button or list item) easily and reliably tappable. Put another way, it's the spread of a fingertip pressed to the screen. By building its standard controls in proportion to that measure, Apple created a device that's not only built for the hand, but of the hand—measured out in finger-sized units. (In fact, it's wise to craft your overall design to a 44-pixel rhythm, a topic you'll explore in the section called “Design to a 44-Pixel Rhythm”.)

Ideally, any button or other tap target should be at least 44 × 44 pixels. That doesn't necessarily mean that what you see—the outline of the button itself—has to spread over that entire area. Buttons inside the standard navigation bar, for example, are only 29 pixels high, but their tap area extends to the full 44-pixel height of the navigation bar. Even if you tap just above or below the button, it still catches the tap as long as you're still inside the navigation bar. Likewise, taps immediately to the left or right are treated as taps on the button itself. Even though the button is visually smaller, its tappable footprint honors the 44-pixel minimum, making the button effectively larger than its outline suggests.

Attached Image
Attached Image

Buttons in screen-topping navigation bars (left) have tap areas much larger than their visual footprint. The active tap areas are outlined in red here and span the entire height of the navigation bar, reaching horizontally to the title text. Similarly, icons in screen-bottom tab bars (right) have tap areas that extend several pixels above the tab bar's visible outline.

Apple helps you get this right by providing a whole stable of standard controls that stick to this standard height (you'll explore these built-in views and controls in the next two chapters). When you use Apple's prefab navigation bar, toolbar, or keyboard in your app, its controls automatically use these finger-friendly dimensions. It's only when you start working with custom button sizes and other home-brew controls that you'll need to start counting pixels to make sure you hit the 44-pixel threshold.

As in most things, compromise is sometimes necessary. Even the iPhone's standard controls fudge the 44-pixel rule from time to time. In the keyboard, for example, keys are 44 pixels tall but only 30 pixels wide—similarly, in landscape view, the buttons are 44 pixels wide but 38 pixels high. Apple doesn't have much choice here; it's crucial to include the full QWERTY keyboard in this view, but all the keys just won't fit as 44 × 44 buttons. Something's gotta give. When limited space puts the squeeze on tap targets, here's the rule I've found works best: as long as a tap target is at least 44 pixels high or wide, you can squeeze the other dimension as small as 30 pixels if you really must (these are the same dimensions as a keyboard key). That means, the practical minimum size for any tap target is 44 × 30.

Tapworthy

Learn more about this topic from Tapworthy.

So you've got an idea for an iPhone app -- along with everyone else on the planet. Set your app apart with elegant design, efficient usability, and a healthy dollop of personality. Tapworthy takes you from concept to polished interface design with plain-spoken principles and a rich collection of visual examples for designing exceptional interfaces for the iPhone and iPod Touch.

See what you'll learn


Tags:
1 Subscribe


1 Reply

0
  ropesmy's Photo
Posted Feb 15 2014 01:03 AM

good

http://www.prweb.com...web11452569.htm