VANILLA NEEDS A PRESS AGENT. Somewhere along the way, the flavor got a bad rap. The word is trotted out to suggest bland conformity, a drab lack of imagination, color, and flavor. Seriously, what happened here? Vanilla is a subtle, complex, vivid, and bright flavor. When it comes to dessert, a scoop of vanilla ice cream goes with nearly everything. It's versatile and delicious.
The standard iPhone controls are vanilla. They're the buttons, text fields, list views, keyboards, and icons that commonly and comfortingly appear in app after app. The standard controls provide a rich and varied set of options for manipulating an app, but because they're commonplace, they're often taken for granted and are sometimes dismissed as visually dull. Don't underestimate just how delicious they can be. Commonplace means familiar, and for your audience, familiarity leads to efficiency and ease—exactly what most folks want from an app. In usability testing sessions, people are routinely most successful at completing iPhone tasks when they're able to use behaviors learned from other apps. Novices in particular benefit from interfaces that use icons and controls they've seen elsewhere. Nobody wants to spend brain power figuring out how your app works; standard controls make for intuitive apps.
In this chapter you'll roll up your sleeves with a thorough review of the toolbars, buttons, and other controls cooked into the iPhone operating system. There's lots of detail here to supplement the iPhone Human Interface Guidelines (page 99), all of it aimed at making you fluent in every user-experience aspect of the standard controls. You'll learn the do's and don'ts for all of these elements, exploring the opportunities, pitfalls, and potential usability gotchas of each one.
Some designers bridle at relying on these pre-packaged interface elements, understandably concerned that leaning on built-in controls will lead to a humdrum design, perhaps even a humdrum app. Because the standard interface elements are generic building blocks, they can make designs feel generic, too. But as you'll see in the coming pages, generic has its benefits, and following conventions doesn't have to make you conventional.
Figure 5-2. No matter what language you speak or what country you're in, the familiarity of standardized road signs give drivers clear and unambiguous instructions. Standard controls in iPhone interfaces lend similar authority to the apps shown here. From left to right: Now Playing, Bento, and the built-in Settings app.
Familiarity and consistency lend designs authority. That's why road signs around the world are standardized. Drivers hurtling down the freeway shouldn't have to do double takes to figure out what a sign means. When instant and effortless communication is critical, conventions are a designer's best friend. Buttons, icons, and toolbars are the road signs for your app, and iPhone screens that use standard controls have a no-nonsense seriousness that lends them a similar authority and don't-make-me-think understanding.
But eesh, that's a lot of blue and white, and the gray orthodoxy of so many pinstripe backgrounds is enough to nudge anyone into an interface coma. Different isn't always better, but neither is heedless homogeneity. There's room to take some license with your interface design as long as you do it thoughtfully and keep the interface intuitively second nature. Even standard controls can be dressed up to give your app its own unique visual stamp, for example, a trick Apple itself deploys in some of its own apps.
Figure 5-3. Standard interface elements don't have to be bland. Even relatively small tweaks of color and style let you give an app its own personality. The built-in Notes app (left) takes the look of a legal pad by putting colors and fonts to work in its navigation bar and text area; sketched versions of standard toolbar icons complete the sketchpad look. Reeder, a Google Reader app (middle), creates a rich look by adding a subtle gray texture to its navigation bar and toolbar and styling its list headings as torn paper. Phases (right) colors familiar iPhone controls to create an intuitive but altogether individual look.
As usual, it's a matter of degree. Don't be like those restaurants that get a bit too clever with men's and women's restroom signs, turning your bathroom break into a head-scratching riddle to figure out which door is yours. Give your app a personality suited to its function, but don't stray too far from the familiar norms of the iPhone environment. "Efficient" is a personality, too. For productivity apps in particular, your interface chrome shouldn't be too distracting; unadorned standard controls recede into the background, becoming almost invisible, to allow the content to become the main event. As designers, we naturally want to be daring and adventurous, to try something new, and it's true that iPhone fans appreciate app aesthetics. Even more, though, they appreciate getting stuff done. The true test of creativity is to find opportunities for expression within the helpful constraints of real-world use. Apply a light hand, and be careful not to allow your design whimsy to interfere with your audience's ability to actually use your app. Vanilla often trumps more exotic flavors.
It's cheaper, too. Relying on Apple's stock controls gets you lots of code for free; no need for you or your developer to build it on your own. Even when you decide to sally forth with your own custom-built interface gadgetry—a topic explored in the next chapter—understanding the standard controls and usage metaphors is the starting point for making apps that feel natural in the iPhone environment. Your own custom controls should still rhyme visually and conceptually with those provided by Apple. Let's take a look, starting with the iPhone's built-in control panels: the navigation bar, toolbar, and search bar.