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.

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.

Read Next

15 Best New Fonts, July 2024

Welcome to our monthly roundup of the best fonts we’ve found online in the last four weeks. This month, there are fewer…

20 Best New Websites, July 2024

Welcome to July’s round up of websites to inspire you. This month’s collection ranges from the most stripped-back…

Top 7 WordPress Plugins for 2024: Enhance Your Site's Performance

WordPress is a hands-down favorite of website designers and developers. Renowned for its flexibility and ease of use,…

Exciting New Tools for Designers, July 2024

Welcome to this July’s collection of tools, gathered from around the web over the past month. We hope you’ll find…

3 Essential Design Trends, July 2024

Add some summer sizzle to your design projects with trendy website elements. Learn what's trending and how to use these…

15 Best New Fonts, June 2024

Welcome to our roundup of the best new fonts we’ve found online in the last month. This month, there are notably fewer…

20 Best New Websites, June 2024

Arranging content in an easily accessible way is the backbone of any user-friendly website. A good website will present…

Exciting New Tools for Designers, June 2024

In this month’s roundup of the best tools for web designers and developers, we’ll explore a range of new and noteworthy…

3 Essential Design Trends, June 2024

Summer is off to a fun start with some highly dramatic website design trends showing up in projects. Let's dive in!

15 Best New Fonts, May 2024

In this month’s edition, there are lots of historically-inspired typefaces, more of the growing trend for French…

How to Reduce The Carbon Footprint of Your Website

On average, a web page produces 4.61 grams of CO2 for every page view; for whole sites, that amounts to hundreds of KG…

20 Best New Websites, May 2024

Welcome to May’s compilation of the best sites on the web. This month we’re focused on color for younger humans,…