Mobile Design with Gestures

One of the biggest challenges I face as a mobile designer is how to integrate gestures—particularly multi-touch gestures—into the apps that I design. Even remembering to include and design for them can be difficult, because coming from a web design background websites are just point and click and point and click and all the clicks are the same.

But with touch interfaces, we’re not limited to a single interaction type like the click. Touch interfaces enable more interactions than clicks or taps. There’s a whole array of gestures that are available, including swipe, flick, drag and pinch to zoom.

Taps are great. And boring.

Of course you don’t have to include any kind of gestures in your apps. But where’s the fun in that? I see a lot of designers leave these tools on the table and skip designing with gestures when we ought to be taking advantage of every chance we have to push things forward.

Responding to different types of touch is sexy

Adding in some gestures makes your app more responsive, because it simply does more stuff. It shows users that your app is literally feeling what they’re doing and responding to different touches. I love Instagram, I think the interface is really functional and well designed, but the fact that I can’t pinch to zoom or tap to zoom on photos drives me nuts.

Users expect gestures to work in certain contexts, like photos. We just take that kind of functionality for granted. And when an app doesn’t support it, it’s really frustrating.

Multi-touch gestures are like keyboard shortcuts for expert users

First and foremost, all of the critical functionality in your app should be accessible by taps. I shouldn’t have to pinch to zoom in order to see my bank balance. But gestures can provide shortcuts and accelerate actions for your expert users, and that’s going to make them love your app more.

Visual affordances are difficult to create for gestures

Just like keyboard shortcuts, gestures are often invisible. The biggest challenge to making gestures work for your app is creating good affordances that let users know what they can do with your interface. As designers, we haven’t developed a consistent visual shorthand yet that says “pull this down” or “slide this over.” For items like menus that run off the screen, I like using animations as a way to show that there’s more available, like sliding a menu into place with an animation that shows some of the hidden options. But there are plenty of visual ways to call attention to interactive elements, you just have to be creative and keep iterating.

Avoid ugly coaching marks that treat users like idiots

The main thing is to try and avoid really heavy-handed coaching and instruction.

Please don't do this

I see stuff like this and it’s like a huge neon sign that says OUR UI IS A FAILURE. And a lot of times, it’s not even the UI that’s the problem, it’s that somebody up the executive chain can’t believe that users are smart enough to use an interface without being instructed like 3rd graders. But if your interface really can’t be reasonably understood without a bunch of crap like this, it’s time to start over. You’re off the path.

Fun, appealing interfaces encourage exploration

Instead of heavy-handed coaching screens, make your interface simple and appealing in a way that invites exploration. Make users want to touch things, and reward them with feedback when they do. If possible, use animation to help scaffold one gesture or interaction to teach users what they can do with your app.

Quick wins build user confidence. If you let people know that your app is responsive to touch, they’ll want to explore further and see what else they can do.

Adapted from my ConvergeSE presentation Getting Started with Gestures