Touchscreen gestures are a vital part of every mobile app. Here are 5 that you need to use in your interactive prototype
Mobile gestures may soon be a thing of the past as technological advancements in facial gestures accelerate. It won’t be long before a simple smile or quick wink will allow us to perform an action on our mobile devices.
However, before we turn our back on our trusty digits and start sticking our tongue out to switch apps, let’s not forget that mobile phone gestures still play an important role within UX and interactive UI.
Touchscreen gestures help us interact with our device and the apps on it. Much like turning the page of a book is a gesture in the non-digital world, a swipe on your mobile device replicates such a movement so that the gestures are as intuitive and natural as possible.
Gestures break down into touch mechanics and touch activities.
Touch mechanics are what a user’s fingers do on the screen. A double touch is an example of a touch mechanic.
A touch activity is what results from the touch mechanic. So, a double touch can result in a zoom in.
Gestures make for an intuitive user experience. Since gestures are instinctive, it means they’re easy to use, eliminate errors and require less co-ordination from the user. Not only that but they’re fast and flexible.
There are many different gestures (here is a comprehensive list) that you can use in your mobile app design but the most used and popular are:
When prototyping your app or website with Justinmind, using gestures adds dynamism and realism to your interactive wireframe. What does this mean? It means a powerful gesture-driven mobile UI design from the get-go creating authenticity and a seamless user experience.
To define an event controlled by a gesture, just select the ‘Add event’ option in the Events tab and select the kind of gesture you want to capture. Then define what you want to do when that gesture happens. The video below illustrates how to do that:
Now we’ve covered what gestures are and how to prototype one in Justinmind, let’s take a closer look at the 5 most common gestures out there.
A tap is achieved by lightly striking the screen of your device with your finger. It is used to select a control or to click a link.
A tap, for example, will select something. A link’s color change or the opening of a new tab in the browser shows that the tap worked.
Since gestures aim to be intuitive, they are often coupled with animation. It’s important to use animation in conjunction with gestures so the user has visual feedback for their actions. As Rachel Hinman once pointed out: “the addition of movement to a mobile experience can provide clarity, information about context and, frankly, a dash of joy and fun.”
A simple drag, swipe or flick can result in a scroll, tilt or even dismiss something. Not to be confused with a long-press drag, which picks up and moves something or selects multiple items.
An example of when to use drag is when you receive a push notification. Let’s say you receive an email notification and you want to dismiss it. Simply drag it up off the screen and voila – bye-bye notification.
Dragging to scroll is effortless and easily implemented in Justinmind. Find out how to simulate mobile gestures in your app wireframes here.
A pinch is achieved when two-fingers press on the screen followed by moving the fingers outward. To close the pinch, simply do the opposite.
A pinch is useful if you wish to zoom in or zoom out in your interactive prototype. To contextualize: using the pinch in a map makes sense to get a more detailed view of what you’re looking at.
When you want to drag and drop something on your desktop, traditionally you would click, hold and drag and move the object you want to move.
Pressing replicates this. Hold down and press and you can move something on your phone. In iOS, for example, pressing means you can reorder and organize your apps on the home screen.
A rotate occurs when two fingers rotate around each other. The rotate is used when you want to manipulate objects on screen. Commonly used to rotate a view, for example, when you wish to change the position of a photo.
Gestures are to mobile app design what pointing and clicking is to desktop computing. However, where touchscreen gestures differ is that they give us a more interactive experience that’s tactile and immediate, perfect for using in your next high-fidelity wireframe.