Tab bars, navigation bars, and toolbars: that's a hoppin' bar scene, and one you should populate with a cast of one-of-a-kind characters. The icons and controls that fill your app's crucial control panels have to be visually distinct, easily identifiable and, wherever possible, consistent with those of other apps. Don't be obscure. Designing your iPhone app will provide lots of opportunities for cute and clever design, but the form of your toolbar icons isn't one of them. Icons should be direct, efficient, and familiar, leaving little room for doubt about their meaning. It's a tough thing to do in just 20 or 30 pixels. Good icon design is hard.
That's all the more reason to rely on the iPhone's collection of standard signage. Apple bundles a sleek set of icon buttons into the iPhone OS for a broad set of common tasks. Before trudging off to design your own buttons, check Apple's icon pantry to see if you've already got what you need. Using a standard button saves you effort, sure, but it saves your users some head scratching, too. When people encounter an icon they've seen over and over again in other apps, they understand its meaning immediately—no thinking required. That's exactly what you want for your app's primary controls.
The catch in this bargain is that you have to use the standard buttons the right way. Each has a very specific intended use, reinforced by their consistent appearance in other apps. The standard icon set isn't a place to take creative license. Even if an icon's shape suggests an alternative meaning, don't go there. Just because the Reply button is a left-pointing arrow, for example, doesn't mean you can use it as a back button. Don't get distracted by what standard icons look like: pay attention only to what they mean.
Apple gives you two separate sets of icons—one for tab bars and another for navigation bars and toolbars. Don't be confused by this double duty for navigation bars and toolbars; as you've seen, the toolbar is the main home for button controls, but the navigation bar can hold buttons, too, particularly in its left and right regions. It just happens that both bars accommodate the same style of icons. Any icon that you can use in a toolbar, in other words, you can also use in a navigation bar. Just don't try the same wardrobe swap with the tab bar. The tab bar is larger than the other bars in both role and dimension, and that means the tab bar gets dressed in its own icon set.
Table 5-1. Standard Tab Bar Icons
Bookmarks. Show a list of the app's bookmarks. | |
Contacts. Show the users contact list. | |
Downloads. Show a list of downloads. | |
Favorites. Show a list of user-determined favorites. | |
Featured. Show content specially selected by the app. | |
History. Show a rundown of user actions. | |
More. Show additional tab bar items (see Tab Bar: What's on the Menu?). | |
Most Recent. Show the latest content. | |
Most Viewed. Show the content most popular among all users. | |
Recents. Show items accessed recently by the user. | |
Search. Enter a search mode. | |
Top Rated. Show the highest-rated items, based on the user's own ratings. |
Although you can use the same icon set in either navigation bars or toolbars, buttons get a subtle makeover depending on where you use them. Buttons in navigation bars always have a shaded 3-D effect, and this bordered style is added automatically to any control you add to the navigation bar. Toolbars can likewise use bordered buttons, but it's more common for them to go in the buff in the borderless style, flat icons resting flat on the toolbar. Whatever style you choose to use for the toolbar, be consistent: don't mix bordered and borderless controls in the same toolbar. (Hint: If your toolbar includes only icons, without any text-based buttons or other controls, go with the flat borderless style.)
Table 5-2. Standard Icons for Toolbars and Navigation Bars
Action. Show an action sheet (page 169) with a menu of options. | |
Bookmarks. Show a list of the app's bookmarks. | |
Camera. Show an action sheet (page 169) to choose a photo. | |
Compose. Show a new-message view in editing mode. | |
Reply. Send response to item. | |
Add. Create a new item. | |
Delete. Delete current item. | |
Organize. Move an item to a folder or other destination. | |
Search. Show a search field. | |
Refresh. Refresh contents of current screen. | |
Stop. Cancel the current process or task. | |
Play. Start media playback or slideshow. | |
Rewind. Move backwards through media playback or slideshow. | |
Pause. Pause media playback or slideshow. | |
Fast Forward. Fast-forward through media playback or slideshow. |
Figure 5-11. Navigation bars (left) always display bordered buttons with a rectangular outline. Toolbars (right) can use either bordered or unbordered buttons. Here, the buttons of the top right toolbar are unbordered, and the ones at bottom right are bordered.
As you might expect, Apple's standard icons are a sturdy and reliable lot, but one of them is a little squirrelly—the Action toolbar icon. This odd little guy shows an arrow slinging out of a tray, which may or may not be an outbox (or an inbox? or a litter box?). The icon seems to suggest sending or forwarding content, appropriate for actions related to sharing perhaps, but not to all-purpose "action." Use this icon for actions related to sharing content—that's how users understand it—but seek out alternatives when you want to offer a set of more general or varied actions. (The designers of Twitterrific did exactly that, creating their own custom Action icon to present several varied options for working with a tweet; see the case study in First Person: Craig Hockenberry, Gedeon Maheux, and Twitterrific.)
When the standard icon sets don't cover an action you need to represent, you can always design your own icon, a topic you'll explore in the next chapter (page 194). An alternative, however, is to use a text-based control. Rectangle buttons (page 172) and segmented controls (page 174) make frequent appearances in toolbars and offer the bland but important usability advantage of descriptive labeling. When you tap List, Day, or Month in Calendar's toolbar, the app shows you a list, day, or month view. No ambiguity there, and hey, it pays to be direct. You'll dig into these and other controls later in this chapter.
A handful of those text-based controls gets special treatment in toolbars and navigation bars. The Edit, Done, Save, and Cancel buttons don't look especially remarkable—just run-of-the-mill rectangular buttons—but they play such a frequent and important role that they're cooked into the iPhone OS to ensure that they have the same appearance and verbiage across all apps. Use the Edit and Done buttons as the flip sides of a single button in a navigation bar or toolbar. When you tap Edit to switch to edit mode, the button should morph into a highlighted Done button, which you then tap when you're ready to save and return to the regular view—and the button morphs back into the Edit button. This Edit/Done two-step should take place on the same screen, making just small changes to the display to indicate the switch back and forth from edit mode. When you edit a list, for example, delete and drag controls typically materialize without flipping you to a new view. This is good practice, keeping you visually anchored as you switch modes so that it's obvious you're still working with the same collection of content. By contrast, the Save and Cancel buttons are typically used when editing content in a separate view—updating contact details in the built-in Contacts app, for example. In that case, tapping Save or Cancel should return you to the previous screen.
