Secret Panels and Hidden Doors
Here's the thing: leaving stuff out inevitably drives some people nuts. Power users will, in particular, pine for all the tools and flexibility that mainstream users don't miss. For many, the basic Weather and Stocks apps just don't cut it. If your app addresses an audience with more advanced needs, then you'll almost certainly have to add more features, tools, and content than your app's mainstream counterpart. That doesn't give you a pass to create mind-numbingly crowded interfaces. The same rules apply, and the pocket knife still has to fit in the pocket. If your app really does have to include those extra features and controls, you've still got to prevent the extra interface chrome from elbowing aside the main content.
This is a challenge that the many iPhone Twitter apps wrestle with. On the surface, Twitter couldn't be simpler: post terse updates and read those posted by others. Yet an enormously complex infrastructure of tools, social customs, and third-party services has emerged around this basic concept. Your tweets can link to photos or videos, point to your physical location, mention other Twitter users, "retweet" someone else's post, embed #hashtag metadata, and more. The dilemma for Twitter apps is how to make a dead-simple interface for firing off a quick tweet while also surfacing the many power features that make Twitter megausers tingle. The brute-force approach is to pile a bunch of icons and controls into the tweet-posting screen. Trouble is, when you add a keyboard to the mix, all that extra chrome quickly squeezes out the most important thing: the text you're typing. It's a sign of trouble when controls leave little room for the content.
The Twitter app (formerly known as Tweetie) solves this problem by hiding all those add-on controls behind the keyboard. The button that displays the remaining character count for your tweet doubles as a toggle switch that slides the keyboard out of the way to reveal all the options you can apply to your tweet—a secret control panel for power users. When you're done, the keyboard slides back into view, and you're back to typing, no extra chrome in sight.
Figure 3-27. In the Twitter app, tapping the character-count button (left) slides away the keyboard to reveal a control panel (right), a compact means to put advanced features within reach without crowding the screen.
Other apps use similar tricks to move interface elements out of the way. Ebook apps Stanza, Kindle, and Eucalyptus all hide their main controls completely to allow book text to fill the screen when you're reading. Ditto for the Photos app when flipping through full-screen pictures. Hiding primary controls like this admittedly brings a risk of disorienting people, leaving them uncertain about how to escape the current view. In all of these examples, though, tapping the screen summons the controls again, a tactic that even panicked users will try soon enough. It's a legit approach, but one that should be used sparingly and only by apps that get a big benefit from an unsullied full-screen view.
Advertisements also count as interface chrome, and unlike primary controls, most users wouldn't mind seeing them slide away for good. Ads present a business and usability dilemma: they take up valuable real estate and present content to which many users are actively hostile, yet many free apps rely on them to fund the whole operation. The sliding panel approach provides a useful compromise. In the USA Today app, for example, a 50-pixel ad banner slides up from the bottom of the screen when you first arrive at an article screen. It holds its place for a few seconds before sliding out of view—a reasonable compromise for both advertiser and reader.
Figure 3-28. Kindle banishes its controls to turn over the full screen (left) to your book. Tapping the screen brings the controls back (right).
The point here is that for all of this chapter's talk about designing your app to feel like a real-world device, it's okay to bend the rules to take advantage of your app's virtual environment. Virtual keyboards and sliding panels let your app do things no physical gadget could do by swapping out the interface for a new set of tools or content. These "cheats" let you layer secondary tools and content into your app without crowding the main screen. Turns out it's not all that different from the Swiss Army knife after all, a handy gadget that can constantly become something new. While pesky considerations like size and weight prevent the Swiss Army knife from offering too many tools, the iPhone's virtual interface gives you a theoretically unlimited interface surface area. Just keep flipping through secret panels as you need them, right?
Well, yes and no. The trouble with hidden content is, you guessed it—it's hidden. You'll continue to bump against the "out of sight, out of mind" problem. The more secret panels you spirit away, the more overhead you ask people to take on to remember how to find them. You have to take care to provide visual cues to help them find their way. If you decide to use a hidden door, that means you have to put the latch in clear sight to make it easy to open. Ideally, this trigger should be well-labeled or at least in such close proximity to the content you're working with that it suggests what you'll find on the other side. The latch for your hidden door should look tapworthy and invite action.
Figure 3-29. The search bar is hidden offscreen in the Mail app until you tug the screen down to reveal it.
A more discoverable approach is to hide interface chrome in plain sight. Most apps that have a search feature position their search bars at the top of the screen, premium real estate. The built-in Mail app, among many others, reclaims this valuable space by scrolling the view so that when you first land on a screen, the search bar is tucked away just out of view. If you want to search, you tug the screen down or tap the screen-topping status bar to zip the search bar into view.
Another strategy for discoverable secondary controls is to offer toolbars that emerge temporarily from the app's main navigation. Quickoffice's iPad-style popover menu provides tools for formatting text, for example, and Twitterrific's filter bar lets you choose the type of tweets you'd like to view in your Twitter timeline. As always, the goal is to keep your interface visually uncomplicated, no matter how complex your app may be. Limit interface chrome, but hide only as much as you have to. Give all of your features and controls a hard look before you include them in your design to make sure they're really tapworthy. If they pass muster, be sure to place each element carefully in intuitive, easy-to-find locations, hidden or not.
