Designing for gestures

Default avatar.
February 16, 2016
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.


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.


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.


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.


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.


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.


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.


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.


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

Read Next

30 Most Exciting New Tools for Designers, 2023

As we near the end of 2023, we wanted to take a look back over all the tools we collected over the past year, to pick…

3 Essential Design Trends, December 2023

While we love the holidays, too much of a seasonal theme can get overwhelming. Thankfully, these design trends strike a…

10 Easy Ways to Make Money as a Web Designer

When you’re a web designer, the logical way to make money is designing websites; you can apply for a job at an agency,…

The 10 Most Hated Fonts of All Time

Remember when Comic Sans wasn’t the butt of the jokes? Long for the days when we actually enjoyed using the Impact…

15 Best New Fonts, November 2023

2023 is almost over, and the new fonts are still coming thick and fast. This month, we’ve found some awesome variable…

Old School Web Techniques Best Forgotten

When the web first entered the public consciousness back in the 90s, it was primarily text-based with minimal design…

20 Best New Websites, November 2023

As the nights draw in for the Northern hemisphere, what better way to brighten your day than by soaking up some design…

30 Amazing Chrome Extensions for Designers and Developers

Searching for a tool to make cross-platform design a breeze? Desperate for an extension that helps you figure out the…

Exciting New Tools for Designers, November 2023

We’ve got a mix of handy image helpers, useful design assets, and clever productivity tools, amongst other treats. Some…

The Dangers of Doomscrolling for Designers and How to Break Free

As a creative professional, navigating the digital realm is second nature to you. It’s normal to follow an endless…

From Image Adjustments to AI: Photoshop Through the Years

Remember when Merriam-Webster added Photoshop to the dictionary back in 2008? Want to learn how AI is changing design…

3 Essential Design Trends, November 2023

In the season of giving thanks, we often think of comfort and tradition. These are common themes with each of our three…