Piggybacking Standard Gestures

The best way to help people discover custom gestures is to hide them in plain sight by replacing or extending a related standard gesture. The Twitter app does this in such a natural way for loading new tweets that its custom gesture completely replaces a traditional button, banishing unnecessary interface chrome. Some background: the first version of the app (then called Tweetie), tucked its reload button at the top of the list of tweets, instead of in the app's toolbars. It was a natural location, since new tweets always appear at the top of the list. "As you scrolled up, reading newer tweets, eventually you'd get to the top of the list and, bam, there's a reload button—it just slid into view exactly when you needed it," developer Loren Brichter explained in an interview with designer Joshua Kaufman. The next version of the app built on this approach by replacing the button entirely. When you scroll all the way to the top of the screen, you instead see a message that tells you to tug the screen down to load new tweets (see Piggybacking Standard Gestures). Scrolling itself becomes the gesture to fetch new messages. "It's discoverable because you already know how to scroll a list, and as you scroll up, [the interface] reveals itself," Loren said. "It's explanatory because once you start tugging down there is some great feedback, actual text that provides instructions as you interact."

In Twitter, scrolling to the top of the screen reveals a hidden message telling you to pull down to refresh the list (left). When you've pulled it down far enough to trigger the refresh, the message tells you to let go (middle). When you do, the message is replaced by a status message (right) until the new tweets arrive, and then the refresh panel slides back out of view.

Figure 8-7. In Twitter, scrolling to the top of the screen reveals a hidden message telling you to pull down to refresh the list (left). When you've pulled it down far enough to trigger the refresh, the message tells you to let go (middle). When you do, the message is replaced by a status message (right) until the new tweets arrive, and then the refresh panel slides back out of view.

This particular innovation is well on its way to becoming a de facto standard, with several apps adopting the gesture. Reeder, for example, uses the technique to move through next and previous articles in your news-feed reading list. This technique works so well because it piggybacks on the standard scroll action. You find the feature by using the app as you normally would, stumbling onto some brief onscreen instructions that complete the education.

In Shortcuts and Backup Plans, you saw a different piggyback approach with Reeder's sliding gesture to mark articles as read. The app trades on the familiar swipe-to-delete gesture, replacing it with Reeder's own action that's not quite deleting but close enough that most folks can guess and remember the gesture. In news-feed readers like this one, there's no such thing as delete. Articles are either read or unread, and read articles eventually get removed from view. Marking an article as read removes it from your to-read list—in other words, an action that's not all that different from deleting. Metaphorically, both actions "cross out" an item—the inspiration behind the swipe-to-delete gesture. Because of the similarity, the alternate use of a standard gesture is okay here.

When you're on the detail screen for an article in Reeder (left), you can tug the screen down to see the title of the previous article (middle); releasing takes you there. Similarly, tugging the screen up (right) takes you to the next article.
When you're on the detail screen for an article in Reeder (left), you can tug the screen down to see the title of the previous article (middle); releasing takes you there. Similarly, tugging the screen up (right) takes you to the next article.
When you're on the detail screen for an article in Reeder (left), you can tug the screen down to see the title of the previous article (middle); releasing takes you there. Similarly, tugging the screen up (right) takes you to the next article.

Figure 8-8. When you're on the detail screen for an article in Reeder (left), you can tug the screen down to see the title of the previous article (middle); releasing takes you there. Similarly, tugging the screen up (right) takes you to the next article.

Just don't let your piggybacking turn into outright hijacking. It's bad form to use a standard gesture for a purpose entirely different than what's generally understood. The Twitter app commits this particular sin by hijacking the swipe-to-delete gesture. Swiping left to right across a tweet reveals a set of icon buttons, a kind of in-place toolbar for actions that you can take on the tweet: send a reply, view the author's profile, and so on. It's at once a clever way to tuck advanced controls behind a hidden panel, but it's also a violation of user expectations for a familiar gesture. Because you can't delete most messages on display (only your own), the delete gesture doesn't have much meaning in a Twitter app. That means that people either don't discover it on their own or are at least initially surprised to find that it has nothing to do with deletion. Continued use of the app smoothes these bumps as people get accustomed to the alternate use, but it creates headaches for new arrivals. Avoid replacing standard gestures in ways that upturn expectations.

Swiping left to right across a tweet in the Twitter app reveals a custom toolbar instead of the standard Delete button.

Figure 8-9. Swiping left to right across a tweet in the Twitter app reveals a custom toolbar instead of the standard Delete button.

Here's an exception: it's okay, even desirable, to let individual users choose their preferences for what happens with certain gestures. Not many apps do this, but for relatively complex apps, it's an effective way to give users custom shortcuts to actions they frequently use. (The iPhone itself did this in its own way prior to iPhone OS 4.0; you could customize which screen appeared when you double-clicked the device's Home button: Home screen, search, phone favorites, camera, or iPod.) Twitterrific is one app that offers custom gestures, letting you choose what happens when you tap an avatar icon or when you double- or triple-tap a tweet.

Twitterrific's settings let you customize the action for three gestures: Tapping an avatar, double-tapping a tweet, or triple-tapping (left). For each gesture, you can choose a range of possible actions (right).
Twitterrific's settings let you customize the action for three gestures: Tapping an avatar, double-tapping a tweet, or triple-tapping (left). For each gesture, you can choose a range of possible actions (right).

Figure 8-10. Twitterrific's settings let you customize the action for three gestures: Tapping an avatar, double-tapping a tweet, or triple-tapping (left). For each gesture, you can choose a range of possible actions (right).