Designing for gestures

With mobile becoming the platform of choice for more users these days, gestures are becoming more relevant than ever. Those little actions that enable interaction with a mobile device, gestures are given little thought by users because they’re focusing more on the results of their gestures on the screen.

You should understand two distinct aspects to understand the concept of gestures: touch mechanics and touch activities; they relate to the initiating gesture and its ensuing outcomes. Gestures are also intimately tied to the all-important user experience on a mobile device. Screw up the user interface and how users use gestures, and you’re screwing up their user experience. Thus, gestures have huge significance when it comes to your tablet and mobile device users.

Here’s all you need to know to have a working understanding of gestures on mobile…

Defining gestures

Gestures are the very basis of how you interact with your mobile devices. Look at them as two-parters: the touch mechanics and the ensuing touch activities.

Touch mechanics are what a user’s fingers do on his screen. For example, if you tap (one of the most basic gestures) on a menu item, you’ve performed a touch mechanic.

Touch activities are the results of the preceding touch mechanics. For example, if you typically double-tap on a section of written content, the mobile screen will zoom in on said content.

Touch activities can result from combinations of different touch mechanics as well. For example, before you find a section of written content that interests you enough to want to zoom in on it (second touch mechanic), you’d have to first scroll down the screen by performing a swipe (first touch mechanic).

Types of Touch Mechanics and Touch Activities

There are a lot of touch mechanics in spite of the fact that many users are probably only familiar (at least consciously) with tapping and swiping.

Tapping

The most popular and basic one is tapping, which is when you touch the screen to perform an action like opening up your email app. Tapping is characterized by a simple press of one finger and then a lift.

Double-tapping

Then, there’s double-tapping, where users immediately repeat the action of tapping back-to-back. This is usually linked to making things appear bigger on a screen.

Swiping

Now, we get to swiping, which many people are familiar with. Swiping is typified by pressing your finger down, moving an on-screen element, and then lifting your finger again. The perfect example of this is your iPhone’s lock screen, which necessitates swiping to get to the screen where you have to enter your code to access the homepage or screen.

Dragging

However, there’s also dragging, which involves the same touch mechanics, but at a different speed. If you want to drag app icons to different parts of your home screen, you are dragging instead of swiping.

Flinging

Loosely connected to both swiping and dragging is flinging. Again, the touch mechanics are the same as a swipe, but the speed’s different. With flinging, you’re moving your finger very fast, as when you fling up on the screen to get rid of someone’s profile image that you clicked on in your Twitter app.

Long Pressing

Long pressing is when your finger touches down on a screen element, holds for a moment, and then lifts off the screen. A resulting touch activity could be opening up the copy box to copy a section of written content.

Long Pressing & Dragging

This is when you press with your finger, hold, move and then lift your finger again. If you’ve ever reordered the arrangement of app icons on your mobile screen, then you’ve done this gesture combination many times!

Double-tapping & Dragging

This one’s a bit more intricate: You press your finger on the screen, lift, press again, move, and then lift your finger for the last time. This touch mechanic can occur when you zoom in on content in one area of the screen and then zoom out again in another area.

Pinch-Open

Another touch mechanic that’s good for zooming in on your mobile screen, pinch-open requires you to press with two fingers simultaneously, then move your fingers away from each other, and finally lift both fingers.

Pinch-Closed

The opposite touch mechanic and touch activity, pinch-closed involves pressing with two fingers simultaneously, then moving your fingers closer to each other, and finally lifting both fingers. The resulting touch activity is usually zooming out.

Tapping (two fingers)

Here, you press with two fingers simultaneously before lifting both fingers off the screen. This is usually another way to zoom out on content.

Swiping, Dragging or Flinging (two fingers)

This requires you to use two fingers as you tap, move and then lift your fingers. It’s good for choosing multiple elements on-screen or tilting or panning.

Long Pressing & Dragging (two fingers)

With this gesture, you press with two fingers, hold, move and then lift your fingers. This touch mechanic is good for when you’re working with an interface requiring you to rearrange list items or reorder cards in a collection.

Double-tapping (two fingers)

This is where you use two fingers to tap, lift, tap and then lift both fingers again. It’s generally used for zooming out on your screen.

Rotation

Sometimes, you’ll encounter moving content or animation on your mobile devices, which is where rotation is useful. This is where you’ll press down with two fingers around a central object, then orbit your fingers around it, and, when done, finally lift both fingers.

Using Google Maps when out and about requires you to constantly rotate around significant screen elements to get a better sense of your orientation.

The importance of gestures

The whole concept of the user interface on mobile is built on gestures. That’s why they’re also central to the user experience. With such limited screen space to work with, designers and developers have to continually ensure that they’re using such minimal actions in the most efficient and intelligent ways possible.

If they do, users can easily do what they want to do on their mobile devices and apps in a heartbeat, which is the epitome of a great user experience. As soon as a gesture fails to be intuitive—as in users wouldn’t naturally be compelled to perform that action to interact with their mobile devices to achieve a certain goal—then it fails to be a good or advisable gesture. As a result, the design of the interface will take a hit.

By remembering these basics of gestures, designers will be able to create mobile interfaces and experiences that people will love.

Featured image uses gesture icons image via Shutterstock.

Marc Schenker

Marc’s a copywriter who covers design news for Web Designer Depot. Find out more about him at thegloriouscompanyltd.com.