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 marcschenker​copywriter​.com.

Read Next

3 Essential Design Trends, June 2023

This month we are focusing on three trends within a bigger website design trend – different navigation menu styles and …

15 Best New Fonts, May 2023

The choices you make when selecting a typeface have more impact on your design than almost any other decision, so it’s …

10+ Best Tools & Resources for Web Designers and Agencies (2023 updated)

Having the ability to envision a tastefully designed website (i.e., the role creativity plays) is important. But being …

20 Best New Websites, May 2023

This month, there are tons of great new agency websites to get excited about. 3D animated prisms are a popular theme, a…

How to Find the Right White Label Website Builder for Your Agency

Web design agencies face a lot of obstacles in closing the deal with new clients. One of the most common ones is the ar…

Exciting New Tools For Designers, May 2023

There are hundreds of new tools for designers and developers released each month. We sift through them all to bring you…

3 Essential Design Trends, May 2023

All three of the website design trends here mimic something bigger going on in the tech space, from a desire to have mo…

10 Best AI Tools for Web Designers (2023)

It’s time to stop worrying if AI is going to take your job and instead start using AI to expand the services you can of…

10 Best Marketing Agency Websites (Examples, Inspo, and Templates!)

Marketers are skilled in developing strategies, producing visual assets, writing text with high impact, and optimizing …

15 Best New Fonts, April 2023

Fonts are a designer’s best friend. They add personality to our designs and enable fine typography to elevate the quali…

20 Best New Websites, April 2023

In April’s edition, there’s a whole heap of large-scale, and even full-screen, video. Drone footage is back with a veng…

Exciting New Tools For Designers, April 2023

The AI revolution is having a huge impact on the types of products that are hitting the market, with almost every app b…