AT FIRST BLUSH, the iPhone's tiny size might seem its biggest design challenge. When you're accustomed to creating websites or desktop software for monitors at least a foot across, 3.5 inches is mighty stingy. Yet while designing with a limited supply of pixels is a demanding part of the job, leaving it at that would suggest that your role is only to create efficient screens. The challenge turns out to be more subtle than that, because the iPhone isn't just small: it's handheld and works by touch. That means you're doing something more sophisticated than organizing pixels.
You're designing a physical interface that will be explored by human hands, directly manipulated in a way that desktop software never is. Of course, there's nothing literally physical about your app. Your interface is just a virtual representation drawn by so many flickering liquid crystals. But the way it's used is physical. Unlike phones or desktop computers, the iPhone has practically no physical interface of its own—no keyboard or mouse, just the single Home button. The device is a blank slate, a palm-sized slab of glass onto which you, the app designer, impose whatever interface you might dream up. You define the physical experience of the device. Your app's buttons may be virtual, but they nevertheless require direct touch and define the device in a very physical way.
This means your project is not only a challenge of visual and graphic design but of industrial design, too. Just as surely as if you were soldering circuit boards, molding plastic, or shuffling die-cast buttons, you're designing an app to be manhandled—or at least hand-handled. There are honest-to-god ergonomic issues to account for. Considerations of size and touch combine in iPhone design to present new challenges for interaction designers.
You've already seen how manner and mind-set shape the broad environment for your app and the features you should pursue. The rest of this book deals with a much more immediate set of constraints: the form and conventions of the device itself. This chapter kicks off the process by reviewing the big picture of designing for a tiny touchscreen. You'll explore how fingers and thumbs roam the screen, discover some ergonomic guidelines for comfortable tapping, and wrap up with some good practices for tap-friendly screen layouts.
More than simply how the app looks, you have to consider how it feels. How well does your interface work when used one-handed? Are the most common tap targets within easy thumb range—and what about lefties? Are buttons chunky enough for easy tapping, or does it take surgical precision to hit them?
The tactile nature of iPhone apps is reinforced by the powerful illusion of real-world physics conjured by the iPhone operating system. The iPhone's interactive metaphors are all about tapping, sliding, and flicking—direct manipulation of onscreen objects that respond with lifelike realism. Flick a scrolling list and watch it slow as "friction" takes hold. Fling it even harder against the top or bottom of the screen and the thing actually bounces. Tug the screen down and watch it snap back into place with rubber-band realism. Everything on the iPhone responds to the familiar rules that apply to the everyday physical world: inertia, momentum, friction, elasticity, follow through. The result is an irresistible impression that you're working with real-world objects.
Don't break that spell. More than just tending to appearances—wow, it looks so real!—creating an interface that "feels" like an actual device matches expectations created by the iPhone operating system as well as the concrete reality of tapping away at the hardware itself. (Chapter 8 has more on phone physics and visual feedback, starting in Phone Physics.) Some apps even go all the way with the physical-device metaphor by mimicking the look of familiar gadgets. There are undeniable usability benefits to cribbing a real-world interface that's been used for decades or even centuries, especially when your app performs a similar role to that of the original gizmo. Few will scratch their heads to figure out how to make a call with the built-in Phone app. Its push-button interface conveys its meaning immediately (even three-year olds, for better or worse, know how to dial a phone), and the keypad layout also has the benefit of proven ergonomic success in a handheld device.
Figure 3-2. Interfaces that mimic physical devices benefit from intuitive familiarity and proven ergonomics. Here, Phone and Rowmote, respectively, crib the telephone keypad and Apple's physical remote control.
You'll find more discussion of interface metaphors in Chapter 6, but whether or not your app actually apes the look of a mechanical device, that's exactly what it is in practice. Your app's screen design is the sole interface for the iPhone, a gizmo that works by hand, and you have to address the demands of a physical device. When fingers do the walking, designers have to clear the way for them.
Organizing the layout of an iPhone interface means organizing for fingers. More precisely, it means organizing for the thumb, since that's the digit that gets the workout when you work the iPhone one-handed. The iPhone is sized perfectly for use in a single hand, allowing your thumb to sweep easily from one corner to the other with only a modest stretch. And because you can use the iPhone with one hand, most of us very often do. Whether you're hoisting a coffee, hauling a baby, or eating your lunch with that other hand, you can still keep tapping away with one thumb to answer email, make calls, or browse the web. Your design should optimize for this one-thumbed tapping.