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
10+ Best Resources & Tools for Web Designers (2024 update)
Is searching for the best web design tools to suit your needs akin to having a recurring bad dream? Does each…
By WDD Staff
3 Essential Design Trends, April 2024
Ready to jump into some amazing new design ideas for Spring? Our roundup has everything from UX to color trends…
How to Plan Your First Successful Website
Planning a new website can be exciting and — if you’re anything like me — a little daunting. Whether you’re an…
By Simon Sterne
15 Best New Fonts, March 2024
Welcome to March’s edition of our roundup of the best new fonts for designers. This month’s compilation includes…
By Ben Moss
LimeWire Developer APIs Herald a New Era of AI Integration
Generative AI is a fascinating technology. Far from the design killer some people feared, it is an empowering and…
By WDD Staff
20 Best New Websites, March 2024
Welcome to our pick of sites for March. This month’s collection tends towards the simple and clean, which goes to show…
Exciting New Tools for Designers, March 2024
The fast-paced world of design never stops turning, and staying ahead of the curve is essential for creatives. As…
Web Tech Trends to Watch in 2024 and Beyond
It hardly seems possible given the radical transformations we’ve seen over the last few decades, but the web design…
By Louise North
6 Best AI Productivity Apps in 2024
There’s no escaping it: if you want to be successful, you need to be productive. The more you work, the more you…
By Simon Sterne
3 Essential Design Trends, February 2024
From atypical typefaces to neutral colors to unusual user patterns, there are plenty of new website design trends to…
Surviving the Leap from College to Real-World Design
So, you’ve finished college and are ready to showcase your design skills to the world. This is a pivotal moment that…
By Simon Sterne
20 Mind-Bending Illusions That Will Make You Question Reality
Mind-bending videos. Divisive Images. Eye-straining visuals. This list of optical illusions has it all. Join us as we…
By Max Walton