Like a switch, a segmented control also asks you to choose among a prefab set of options, except that a segmented control can offer several options instead of a switch's measly two. While switches work the light-switch metaphor, segmented controls work more like a car radio, the kind you would've found in dashboards in the 1970s. Back then, when you weren't listening to your eight-track tapes, you pushed the radio's heavy mechanical buttons to hop through your favorite stations, each button tuned to a different frequency. Only one button could be pushed in at a time; pressing one popped out the rest. A segmented control works the same way, a band of unified controls where only one button can be selected at a time. Interface geeks call this style of control, you guessed it, radio buttons. (The tab bar is likewise a set of radio buttons.) On the Web, you know radio buttons as the round checkbox alternatives that let you choose just one option among several. The shape might differ, but the concept is the same.
Like the original old-school radio buttons, you typically use segmented controls to tune into different content, each button corresponding to a different way to sort, filter, or display a screen. In the Facebook app, for example, you tap a segmented control to flip between wall posts, profile info, and photos. In the Local Concerts app, a segmented control filters upcoming concerts to show all shows, popular bands, or artists that you follow. Segmented controls, in other words, are useful for secondary navigation, changing how content is displayed in a single screen or category of an app.
Figure 5-39. A segmented control appears in the navigation bar of the Local Concerts app to choose which shows to display. Here, the All and My Artists buttons show different results in the main view.
When you limit segmented controls to just two buttons, they become handy for two alternative uses, too. First, in a screen of preferences, a two-button control is good for offering a choice between two settings: miles or kilometers, Fahrenheit or Celsius, Conan or Leno, and so on. Second, in a navigation bar, a two-segment control is a natural for next and previous buttons, a gimmick used in the Mail app and lots of news apps to move from message to message or article to article. For that navigation use, the buttons typically sport icons instead of text labels. If you decide to go this graphical route for one or more buttons of a segmented control, be sure to do it for all of them. All of the options should have equal significance in a segmented control, and that means giving them the same visual weight, too, with consistent graphic or text treatment.
Figure 5-40. The settings screen of the Umbrella app (left) uses a segmented control to let you choose temperature units. The New York Times app (right) uses a segmented control in its top navigation bar to offer next and previous buttons.
The standard segmented control comes in two sizes—one to squeeze inside toolbars and navigation bars, and the other for elsewhere in your interface. The toolbar version is 30-pixels tall, while the other is 44-pixels tall, the same height as toolbars, navigation bars, and search bars, presenting a tap-friendly target. Although you can technically add as many buttons as you like to a segmented control, the practical limit is five in order to give the buttons enough breathing room to make them easy to scan and tap. The buttons space out in equal width across the span of the segmented control; be sure that the graphic or text label for each button is small enough to fit.