The flat pages navigation method is especially suited to utility apps, which provide tidy spoonfuls of simple, focused content in screens presented like cards. The main info appears on the card's "front," and it flips over to show basic settings on the "back." As you saw in the last chapter (page 77), utility apps often feature bold, splashy graphics designed to pass the glance test, an easy read at arm's length. At their simplest, utility apps consist of just a single card, like a Dashboard widget in Mac OS X, and are even sometimes just a one-sided card without any settings offered on the back. There's not much guesswork involved in figuring out how to get around a one-screener like that—no navigation required— and if that's your app, congrats, your navigation work is complete. Move along, nothing more to see here.
Figure 4-4. Single-screen utility apps demonstrate the flat-pages model at its simplest—no navigation beyond a settings screen. Global SOS (left) informs travelers of the emergency phone numbers for the current country, and the built-in Compass app (right) gives you your bearing. In both apps, tapping the "i" icon flips the card to show setting info. (See Sliders Stay on Track for more details about managing settings.)
As you add additional screens to a flat-page app, however, it becomes a deck of cards, and you swipe left or right to flip through the screens. So why "flat pages"? Information architecture nerds call this style of organization a flat list, because there's no hierarchy of information, no organizational scheme at all. The screens aren't grouped into categories, but are instead presented in one big pile that you page through one after another—a "flat" collection of pages.
This method is best suited for browsing and discovery, ambling through many variations of the same screen. For example, the built-in Weather app uses flat pages to show a forecast for a different city on each screen; the layout is the same for each page, but the forecast for each is city-specific. ESPN ScoreCenter similarly uses flat pages to show sports scores for specific teams or leagues on each screen; different colors provide visual cues, but the fundamental role of each screen remains the same. Both of these apps allow you to configure the screens and content to show in the app—cities in Weather, or leagues and teams in ESPN ScoreCenter—and you tap a settings button to flip the screen and choose the pages to include. Not only do flat-page apps work like a deck of cards, but they often let you choose and shuffle those cards, too, adding or removing from the deck as you like. In this scenario, where the number and content of screens is always changing, the flat-pages method is a better choice than the tab-bar navigation model, which you'll explore in the next section. There, the navigation options are offered as a fixed set of categories in a set order. If your app features a changeable number of screens, particularly variations on the same relatively simple display, the flat-pages navigation model is a better solution.
Figure 4-5. Screens in ESPN ScoreCenter show a roundup of sports scores, with each "page" targeted to a different team or league. Tap the gear icon to see the app's settings.
To help people keep their bearings while browsing through the stack of screens, include the standard page control, the collection of dots at the bottom of flat-page apps. The dots represent the number of pages in the collection, with the highlighted dot showing your current position in the deck. The presence of a page control gives your audience a visual hint that this is just one of several screens, and it's also interactive. Tap on the left or right half of the control to sashay to the previous or next screen—an alternative to swiping. You might expect that tapping a specific dot would let you jump directly to the corresponding page, but alas no, the page control lets you step through only one page at a time. (Even if you could jump to a specific page, tapping just the right dot would take mighty fine finger precision; don't forget the 44-pixel rule from page 62.)
Figure 4-6. The presence of a page control signals that you're browsing a collection of flat pages, with the highlighted dot showing your current place in the stack. Usability testing reveals that many folks, even relatively experienced iPhone hands, think that the individual dots are themselves tappable controls, but they're not. Under the hood, the page control consists of just two tap areas, shown here at bottom. Tap the left half to go to the previous screen, tap the right to go to the next.
This adds up to a thumb-throbbing downside to the flat-pages model: you can't jump directly from the first screen to the last. You have to swipe or tap through each and every page—quite a workout with a big stack of screens—and a good reason to keep the page collection relatively small in this type of app. Screen dimensions encourage moderation, too. A page control can display only about 20 dots before those dots start spilling offscreen, clipped from view. The Weather app manages this problem by limiting its collection of forecasts to only 20 cities; try to add more and the app gently suggests that you remove another city first. Twenty screens already make for a lot of swiping, though; do the world's thumbs a favor and use flat pages for primary navigation only in apps with about ten pages or less. (It's no accident that the iPhone's main display of app icons—the springboard—is limited to 11 screens, even if your phone contains many more apps.)
The inability to jump to a specific screen means flat pages aren't ideal for apps whose screens offer very different functions or perspectives on the app's content. For example, Phases is a gorgeous little app for tracking the phase of the moon, with each of its four screens offering a different angle on lunar activity. Phases uses flat-page navigation, but because it has a fixed set of screens aimed at providing very different information, the app's navigation would be eased by using a tab bar instead. Rather than asking you to wax and wane through all the screens to get at specific aspects of the moon's phases, a tab bar would let you jump directly to the screen of interest. This saves on more than extra swipes; it also saves brain cells. When a tab bar advertises each screen with a labeled button, you don't have to remember the content and order of the cards in the deck. In Phases, the variety of subject matter and the small, fixed number of screens suggests that tab-bar navigation would make for easier navigation.
Figure 4-7. Phases uses flat pages to display different aspects of the lunar cycle. A tab bar would provide a more natural navigation model for this type and amount of content.
As usual in app design, however, there are competing considerations. Shoehorning a tab bar into Phases would put a tight squeeze on the displayed info. A tab bar soaks up nearly 50 pixels of screen height, while a page control takes only a sliver, with dots that are just 6 pixels tall. The app's designers no doubt decided that asking users to flip back and forth through a modest number of screens was better than sacrificing some combination of content, readability, or the app's tidy no-scroll display. Using flat pages here is a compromise—a tab bar makes the most sense for navigating this content collection—but it's only a modest compromise given the small number of screens involved. The designers decided it was better to sacrifice on that point than to risk sacrificing real estate (and the principle of scroll skepticism) on the individual screens.
Striving for a no-scroll layout is always a good idea (page 77), but it's especially important in collections of flat pages. Because the page control anchors the bottom of the screen, it abruptly and awkwardly lops off scrolling content. Compare the clean finish of the screens in Phases, for example, to the clipped screens in ESPN ScoreCenter. The deck-of-cards metaphor in flat-page apps is most successful when each page looks like a card, complete and self-contained. Even more important, adding vertical scrolling to a flat-page screen introduces an ergonomic challenge, too: you're navigating in two directions—horizontally and vertically. It's all too easy to swipe a few degrees askew and land on the next page when you mean to scroll, or vice versa. People are most successful at navigating the touchscreen when moving in just one dimension; adding a second requires more precision and thus, more effort, from your audience. Avoid it when you can.
Table 4-1. Flat Pages
Pros | Cons |
|---|---|
|
|