Jump to content

How to Make Use of the Tab Bar in Your iPhone App

+ 2
  joshclark's Photo
Posted Aug 09 2010 01:56 PM

The tab bar is a dock of buttons anchored at screen bottom, giving your audience a menu of options to choose from. The result is a tidily categorized app, with its primary features explicitly listed and labeled. Unlike the undifferentiated pile of cards in flat-page apps, the tab bar's categories divvy an app into neat silos. Tap a tab—one of the tab-bar buttons—to jump directly to the associated screen, and the tab lights up to reflect where you are in the app.


Attached Image


Urbanspoon uses a tab bar to offer five different ways to approach a restaurant search. The screens for the Shake, Browse, and Scope tabs are shown here from left to right.

Attached Image


You can display anything you like behind each tab, but it's most helpful to plan tab-bar organization around the different types of activities or information your app offers. The screens associated with each tab can (and often should) have their own independent interface style, each one tailored to fit the specific content or tools at hand. The built-in Clock app, for example, features four very different ways to work with time, each behind a dedicated tab: World Clock, Alarm, Stopwatch, and Timer. These screen designs vary widely; all of them are tuned to the specific needs of the current activity. The effect is that each of the features behind the tabs behaves almost like an independent app, a useful way to think about planning tab-bar categories.

Rather than focusing on tools and functions, as Clock does, tab bars can also be used to offer different perspectives on the app's information. Restaurant finder Urbanspoon, for example, organizes its tab bar around five different ways to browse and discover local tables. Each of these five tabs will eventually lead you to the same type of content—where to go for dinner tonight—but in very different ways. "Shake" spins the app's slot machine to find a nearby place at random; "Browse" lets you burrow through restaurants by various criteria; "Scope" visualizes nearby eateries; and so on. Likewise, news apps frequently use tab bars to offer options for filtering articles according to various characteristics (latest, popular, saved, topics, search, and the like).

As these examples illustrate, tab-bar navigation is ideal for letting the user choose among modes of operation tailored to specific features, information, or even states of mind ("I can't think of a restaurant, pick one for me"). A tab bar summarizes what your app does; it's a series of miniature advertisements for how the app can help. Tab bars make for efficient navigation, since they take people directly to specific screens to perform specific actions, but they require careful planning by the designer. The tab bar should offer a set of options that match up neatly to specific and common missions your audience has in mind when they launch your app.

At its simplest, tab-bar navigation can lead to a collection of simple single-screen displays, like the Phases screens you saw in the last section. More commonly, though, tabs lead to screens that in turn lead to additional screens, which means there's an additional layer of subnavigation nested within each tab. Urbanspoon's Browse tab, for example, uses a scrolling list to drill down into a directory of restaurant listings—that's tree-structure navigation within a tab. The stock navigation models aren't mutually exclusive, in other words, and you can mix and match, even in the same screen to provide subnavigation. You'll explore these mashup possibilities further.

The standard code Apple provides to create tab bars comes with certain rules. The tab bar always appears at the bottom of the screen, 49 pixels high. Each button includes a text label and an icon. Design your own icon, or use one of the several stock versions that come with the operating system. The buttons vary in width depending on the number of buttons you include, expanding or compressing to fit the available space. Just don't expect to squeeze lots of buttons in there; tab bars have a five-button limit. If you try to add six or more, the tab bar automatically sprouts a More tab in the fifth position, leaving room only for your first four tabs and bumping any additional tabs to a separate screen. Tap the More button to see the remaining buttons. This overflow screen of extras automatically comes with an Edit button, and tapping it lets you customize the first four icons shown in the tab bar. Drag an icon down to your preferred slot in the tab bar, and poof, it settles into its new home, replacing the previous icon.

The More screen lists the tabs that don't fit on the tab bar. Here, the New York Times app offers section-specific content from its More screen (left). Tapping a section name in that screen takes you to a list of articles from that section. Customize the tab-bar icons by tapping the Edit button (circled), which reveals an icon view (right) that lets you drag your favorite sections to the tab bar.

Attached Image


Avoid the More button. When you sweep key navigation elements behind the More button's curtain, you add more than just an extra tap. You ask users to remember what options are back there, a brain burden that might seem trivial but will inevitably cause those hidden features to go overlooked and underappreciated. One of the tab bar's big advantages is that it puts your app's key features front and center—easily scanned, clearly labeled, and just a tap away from any screen. The More button undercuts that at-a-glance utility, burning one of the precious five tab slots in the process. The ability to customize the tab bar from the More screen is, in theory, a nifty trick to minimize the five-tab limitation by letting users choose their favorite tabs from the overflow. Unfortunately, testing reveals that most users don't know about that standard feature, rarely trying the Edit button on the More screen.

Stick to the five-tab limit. Not only do you dodge the More button, but the constraint encourages you to sharpen the definition of your app and the key features it offers. Five primary navigation elements make for a manageable structure for your audience to remember and understand. Keep it easy and don't make them think too hard about what your app does. Be frugal with the number of top-level features and screens you offer. If you find that you need more than five navigation categories, then the tree-structure navigation model may be better for your app since it adapts more gracefully to a larger number of categories.

Tab Bar

ProsCons
  • One-tap access to all of the app's main features

  • Clearly labeled menu advertises primary features, shows current location
  • Only five tabs can be displayed at once

  • Absorbs significant screen space on all (or most) screens of the app


The tab bar is a commitment. Its 49-pixel height takes up over 10 percent of the screen and typically appears on every screen of your app—a chunky piece of interface chrome. You're not absolutely obliged to put the tab bar on every screen of your app, though. It's appropriate to remove the tab bar on screens that need full-screen treatment—ebooks, photo slideshows, or document readers, for example—or that require additional controls that would otherwise crowd out the content, like the media controls in the iPod app's Now Playing screen. But the tab bar's sturdy reliability is one of its virtues, allowing fast leaps across the app's various features, and it's best to keep the tab bar planted on most if not all screens of your app.

The built-in iPod app drops the tab bar (left) from the Now Playing screen (right) to make room for the playback controls.

Attached Image


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


0 Replies