Jump to content

Designing iPhone Apps: The Rule of Thumb

+ 1
  joshclark's Photo
Posted Jul 23 2010 11:48 AM

Thumbs are marvelous. It's our thumbs, along with our affection for celebrity gossip, that separate us from the beasts, but they do have limited range and flexibility. While a thumb can manage to sweep the entire screen, only about a third of the screen is in truly effortless territory—at the side of the screen opposite the thumb. For a comfortable ergonomic experience, you should place primary tap targets in this thumb-thumping hot zone. (We'll focus for now on right-handed users, but hang in there, lefties, we'll get to you in a sec.)

Figure 3-3. The comfort zone for the right thumb falls on the opposite side of the screen, at the left edge and bottom of the screen. (The top right and bottom right corners are the toughest thumb zones for right-handed users.)

Attached Image

That's an important reason why toolbars and tab bars always go at the bottom edge of the iPhone screen—the opposite of what we're accustomed to for traditional screen interfaces. Desktop software conventions put menus at the top of the screen or window, and websites typically position primary navigation at the top of pages. Our limited thumbspan, however, flips that convention on its head. Navigation and primary tap targets sink to the bottom on the iPhone. This tap zone gives you hints about how to organize the visual hierarchy of tap targets. Frequently used buttons and navigation tabs should occupy the bottom left of the screen, while lesser used buttons and those that make changes to data can be tucked safely away at top right. The Edit button for changing, deleting, or reordering list items, for example, is conventionally placed at top right, putting it in easy view but also in an isolated and relatively difficult spot to tap, making accidental changes less likely.

Figure 3-4. The standard iPhone toolbar (left) and tab bar (right) always go at the bottom edge of the iPhone screen in convenient thumb-tapping range. To-do list app Things (left) puts the Edit button at top right safely out of accidental tap range. At right, YouTube's left-edge video thumbnails are chunky tap targets in the hot zone of right-handed users.

Attached Image

Let your thumb point the way in laying out your screens according to the most common use cases for your app. Twitterrific, an app for Twitter users, organizes its buttons according to this thumb-thinking hierarchy. The two left toolbar icons respectively refresh and post tweets, reflecting the two most common Twitter-related activities, reading and posting. When you want to do something with an individual tweet, tapping the toolbar's asterisk icon summons a set of buttons whose thumb convenience likewise reflect their importance—commonly tapped buttons at left, less common at right. "We think a lot about where things get placed based upon ergonomics," explains Craig Hockenberry, Twitterrific's lead developer. "The Delete button is off to the right, the hardest location to tap for right-handed users, and we put other options where your thumb has to work less in order to get to more commonly used actions."

Figure 3-5. Twitterrific orders its toolbar icons so that the most frequently tapped buttons appear in the right thumb's hot zone, highlighted here in red.

Attached Image

Happily, this organization happens to coincide with the way we read—our eyes naturally scan onscreen menus from left to right, just like the written word. So, for right-handed use at least, physical and visual considerations align. But what about lefties? The hot zone for the left thumb is, naturally, the mirror image of that of the right, which means left-to-right organization makes for awkward tapping for southpaws. When you optimize for right-handed people—about 85 to 90 percent of users—you're actively inconveniencing left-handed folks (as well as righties who switch to the left hand while they scribble a note).

Some conscientious apps, including Twitterrific, go so far as to include a setting for lefties to flip the layout, putting common controls back in the thumb's hot zone. For very tap-intensive apps, this may be a worthwhile strategy. Consider a calculator, for example, which is all about constant tapping. Like Twitterrific, the scientific calculator app PCalc includes an option to flip the keypad layout to accommodate lefties. There are downsides to this approach, though. Ordering the most important tap targets from right to left reverses the way we visually process information, asking lefties to burn a little extra brain power to take in your interface. (This effort is repaid with improved ergonomics for frequent taps once they grok the layout, of course.) Perhaps more important, a left-handed option adds an additional preference to your app's settings should be pared to a minimum. Finally, there's the addition of a modest amount of code to do the visual switcheroo on your app's controls. Whether it's worth the extra work to ease the thumbstrain of 10 percent of your users depends, as always, on the app. A complex, button-heavy, tap-intensive interface might suggest more mercy for lefties than apps that require less manual manipulation.

Figure 3-6. Twitterrific offers a setting for left-handed controls, flipping the normal button layout (left) to a mirror layout (right) better suited to lefties.

Attached Image

In interface design as in politics, sometimes it's better just to meet in the middle. Many standard iPhone controls, including buttons and list items, span the entire width of the screen, an equal-opportunity layout for both left and right thumbs. When space allows, full-width controls are the way to go—an important reason, for example, that wide buttons are cooked into the layout of action sheets, the iPhone's standard multiple-choice button views. Big chunky buttons not only give clear guidance to users, they also provide can't-miss tap targets no matter what hand you're using.

Figure 3-7. Full-width buttons, like the ones in the standard action sheet (left) or the WordCrasher and Epicurious apps, make for easy tap targets no matter what hand you're using.

Attached Image

Size always matters in interface design. Big text, small text, giant buttons, or tiny ones—they all provide visual cues to what's important on the screen, gently guiding the eye to the next appropriate action. On touchscreen devices, though, fixing the right size for each tappable element is even more important, since every button and control has to be fitted to the finger. Make the buttons too small and you create an exercise in tap-and-miss frustration. The more important or frequent the action, the larger the associated target should be. Big buttons win.


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

1 Subscribe

0 Replies