Yep, I'm Working on It

Tapworthy apps make savvy use of passive messaging to provide reassuring feedback. As you saw in Chapter 8, a visual response to every touch gives your audience confidence that their gestures have been registered and that work is underway. This is especially important for tasks that may take a few moments to complete. Simple, understated status indicators stave off the dreaded "Is this thing on?" syndrome, a condition characterized by symptoms of manic thumping on the touchscreen, wild-eyed puzzlement, and frustrated sighs. Things don't always happen as quickly as we'd like, and when an app is working on something, it should say so.

The spinner is the all-purpose sign for "I'm working on it." Also called an activity indicator in iPhone geekspeak, this spinning gear is the standard way to show that something's humming under the hood. Because give and take over the network is the most frequent cause of delay, there's a special place reserved for the network spinner in the status bar to indicate network activity. Behind the scenes, developers flip a simple switch in their code to turn that spinner on and off, and it just shows up automatically. It's easy to implement, and the spinner is understood even by newcomers. When your app communicates online for more than a beat, show that network spinner in the status bar.

The iPhone also provides a larger spinner to use outside the status bar, and you should lean on it for any task that will take a second or more, adding a brief text label where appropriate to say exactly what the app is up to. When your app is working on a task in direct response to a user request, it's worth including the big pinwheel even for network-related tasks that already show the (relatively subtle) network spinner. When someone asks your app to do something, leave no doubt that it's working on delivering. While toolbars and overlays are natural places for spinners to announce work is underway, spinners are also useful placeholders for content that's still loading. Drop a spinner (along with a "Loading" label) into a screen whose content hasn't arrived yet, or show a spinner in place of pictures that are still on the way.

The network spinner should appear in the status bar anytime an app goes online, as shown here in the Mail app. Mail also uses the large spinner in its toolbar when checking mail.

Figure 10-7. The network spinner should appear in the status bar anytime an app goes online, as shown here in the Mail app. Mail also uses the large spinner in its toolbar when checking mail.

Not only does a spinner say that the app's at work, but it also passively suggests when the app's work is done, too. Make the spinner disappear, and your audience immediately understands that the task is complete, no extra confirmation message required. The Reeder app neatly demonstrates this when you add one of its articles to Instapaper, the online service for saving articles to read later. The app adds an overlay with a spinner during the few moments while it talks to Instapaper. When the spinner disappears, it's clear that the action is complete. Other apps that send content to Instapaper instead display an alert box as confirmation, but that's overkill and also requires an extra tap to dismiss the alert box. Once again: use alerts only when something goes wrong, not when everything is going according to plan. Here, the passive confirmation of a disappearing spinner gets the job done in a more streamlined and effortless way. Other animations can provide similar confirmation in place of an alert. In Mail, for example, deleting a message sucks it into the trash can icon and moving a message to a folder sends an envelope flying into that folder. The animation says it all, no alert necessary.

When Reeder sends an article to Instapaper it briefly displays a spinner, which disappears when the works is done, no confirmation message required.

Figure 10-8. When Reeder sends an article to Instapaper it briefly displays a spinner, which disappears when the works is done, no confirmation message required.

The crafty use of toolbar buttons offers another understated way to say that work is underway. A modal button is a button that changes its appearance depending on the state of the app and what the user is up to. Twitterrific, for example, changes its toolbar's Refresh button to a Stop button while it's fetching new messages; the button returns to a Refresh button when the work is done. You can also use modal buttons to indicate changing options as people use the app. When you tap a tweet in Twitterrific to select it, for example, the app's speech-bubble button for posting a new tweet changes into a Reply button, and the dimmed asterisk-shaped Action icon lights up to signal that options are available for the selected message. Savvy shape-shifting in the app's controls provides another form of passive messaging to help the app quietly provide feedback and cues.

Twitterrific uses modal buttons in its toolbar to signal changes in the environment and available options. The left screenshot shows the toolbar in its standard state. The right screenshot shows the app loading new tweets (the Refresh button is now a Stop button), and there's also a tweet selected, triggering the appearance of the Reply and asterisk-shaped Action button.

Figure 10-9. Twitterrific uses modal buttons in its toolbar to signal changes in the environment and available options. The left screenshot shows the toolbar in its standard state. The right screenshot shows the app loading new tweets (the Refresh button is now a Stop button), and there's also a tweet selected, triggering the appearance of the Reply and asterisk-shaped Action button.

Spinners and modal buttons can satisfy and reassure users that something's happening, but only for a few moments. As those moments stretch into seconds or, heaven forbid, minutes, doubts spring up. You start to wonder if that gear will ever stop spinning and, if so . . . how . . . much . . . longer? When something's going to take a while, polite apps let their audience know. To do that, you have to move beyond the spinner.