Eliminating Taps with Fluid Touch Gestures

by Luke Wroblewski November 4, 2014

Getting things done in most mobile applications requires taps -lots of them. But because of discovery issues, mobile designers have tended to shy away from using other kinds of gestures in their UI. Recently, though, a demo of fluid touch gestures by Ralph Thomas got me excited about gesture-based controls on mobile again.

Ralph’s approach highlighted a compelling way to cut down on taps for common actions. To illustrate how, let’s look at a frequently used application like Apple Maps. One of the most common actions in Maps is getting driving directions. Accomplishing this in the app today is at least a three tap process: tap search, tap your destination (if it’s in the list), tap start, and you’re on your way.

getting driving directions on apple maps

To streamline this process, we could use the floating action button pattern from Android’s Material Design. With this approach, you tap on search to reveal your most likely destinations then tap again on where you want to go. While some tasks (like getting directions home or to a recent destination) are made easier, others like search now require a bit more work (two taps instead of one).

floating action button in apple maps

Using a fluid touch approach can enhance this interaction with a shortcut gesture that dramatically cuts down on the number of taps required for these basic tasks. Simply press down on the floating search button then (without taking your finger off the screen) drag up to a destination. Dragging up to Home and letting go, for instance, immediately launches directions that take you to your house. Instead of three taps, it’s just one fluid drag gesture.

drag and release gesture  in apple maps

Note that the tap method described above still works. The fluid touch addition acts as a shortcut for important or frequently used actions. Because the press and drag gesture is hidden from sight, it works best as an enhancement to a slower but more obvious tap gesture implementation. There are ways to make hidden gestures more visible but they usually don't substitute the more obvious design. Instead they enhance it with an alternate, faster path to completion.

The same fluid touch gesture can also be used to trigger Search. Just press and let go on the search button or press and drag to the left, letting go when your finger is on the search box. This simple gesture can call up a more detailed search list and the virtual keyboard (as we saw in Apple’s original UI) without requiring the two taps needed in the tap-based floating action button solution.

drag & release on otpions in apple maps

Going even further, you could imagine providing additional options with an extension of the drag gesture. First drag up to select a destination, then drag to the side to select the kind of directions you want: driving, public transit, walking, or biking. Release when your finger lands on the option you want. These additional choices are a optional extension of the gesture but if used, they remove the need for yet another tap. From four taps down to one fluid touch gesture.

Personally I’m quite excited about using these kinds of fluid gestures to streamline mobile interactions and cut down on cumbersome multi-tap requirements. For more, check out Ralph’s demo and write-up of the approach or see things in action in the video above.