Explore types of gestures and motion

In the previous video, you were just introduced to gestures and motion. In this reading, let’s go a little deeper and learn more about types of gestures and motion!

Gestures

Gestures are any method of interaction that a user has with information on their device using touch. In other words, gestures describe how you interact with a screen using your finger or a stylus. Common gestures include:

• Swipe. A swipe is a brief movement with a fingertip or stylus across the screen, horizontally or vertically. For example, users often swipe from the right side of a phone screen to the left, in order to move between screens of an app. Swipes are also commonly used to interact with a carousel of content.
• Tap. A tap is a brief touch of the screen by a fingertip or stylus. Taps can be customized from the use of one fingertip to four fingertips. Tapping with a single finger is often used to select an item on the screen. Tapping with two fingers can be used as a shortcut to make the context menu (also known as the right-click menu) appear.
• Drag. A drag is a tap-and-hold on the screen, continuing to press down while moving a fingertip or stylus across the screen. For example, users can drag an item on a screen to move it in and out of view. Drag is often used for the main notification menu on mobile phones.
• Pinch. A pinch is the movement of two fingers closing into each other or moving away from one another. A pinch allows users to scale items on a screen, like zooming in or out on a website, map, or photo.

To learn about gestures, check out this guide with animations of gestures from Google’s Material Design.

Gestures and operating systems

Have you ever borrowed a friend’s phone and found it difficult to use? The simple task of taking a photo can be complicated when you don’t know which gesture opens a phone’s menu! As mobile phones have evolved, operating systems have become more characteristic to manufacturers.

This is because there is a difference in the design philosophy for gestures between Apple’s iOS and Google’s Android. More specifically, iOS is based on the Human Interface Guidelines, or HIG for short, while Android is based on Material Design. HIG and Material Design provide designers and developers with guidelines for the gestures used for their particular operating system. As designers, it’s our job to understand these guidelines, so we can create designs that are easy to use and that meet user’s expectations.

For example, think about how you undo text on your mobile phone. To undo text on an Apple iOS device, swipe three fingers from the right side of the screen to the left. To undo text on an Android device, tap and hold the text to select it, then press the delete key. These are important differences to consider as you create designs!

As you move forward in the course and in the real world, be sure to test your designs on various devices in order to understand how gestures work for users across operating systems.

Motion

Motion is a way to animate static design elements to focus the user’s attention and tell stories. Motion can make apps and websites more engaging and easier to use, like drawing attention to the focal point of a website or seeing a menu disappear as you drag it closed.

In the image above, check out an example of motion you might be familiar with if you have a smart phone. If you use an Apple iOS device, you can press-and-hold on an app icon, which causes all the apps on the home screen to enter “jiggle mode,” where the app icons shake and a minus symbol appears in the left-hand corner of each. This motion lets users know that they are able to edit the apps.

If you use an Android device, this motion is much more subtle. By pressing and holding an app icon on the home screen, a menu of options appears for that app only. The app icon bounces slightly up and down as a reminder of which app’s settings are being edited. These are examples of how motion can help users interact with and understand the product they’re using!

To learn more about using motion in your designs, check out The Role of Animation and Motion in UX by Nielsen Norman Group or this detailed Motion Manifesto on Medium.

Sources: Google UX Design Professional Certificate

Coursera | Create High-Fidelity Designs and Prototypes in Figma