Interactive UI design just got easier thanks to these 5 tips on swipe, touch and finger gestures for apps with great UX
June 29, 2007, was a game-changer. From the moment Apple launched the first fully touchscreen phone onto the mobile market, handheld devices have been dominated by touchscreen interaction. Since the explosion of that first iPhone model onto the market, touchscreens have cemented their popularity: the vast majority of mobile phones bought and sold are touchscreen, and every PC manufacturer has added at least one touchscreen model to their product line. In 2013, according to DisplayBank, sales of touchscreen laptops increased by 51.8% in one quarter alone.
The implications for user interface design are obvious. You’re less likely to be designing for the good old point and click maneuver of desktop days, and more likely to be designing mobile and web apps that respond to touch and to movement. In a word, you’re designing with gestures.
Image: Creative Commons
Why gestures are the future of mobile UI design
Gestures, those little movements of finger and thumb that allow user to interact with an app, characterize our interactions with mobile devices. Our non-digital lives are full of manual gestures; transferring gesture command and communication onto our mobile devices makes for a user experience immeasureably more intuitive that point-click mouse control. When interacting with a web or mobile app through gestures a greater feeling of actual interaction exists between user and device. And the higher the perception of interaction and intuition with your interface, the better the user experience.
But gestures are not just intuitive; they also have e certain universal quality when it comes to mobile use. As Dan Mauney, then Director of Human Factors & Research at HumanCentric, discovered in his research into which gestures people use worldwide (check out the slides from his presentation findings here), the gestures we use have strong similarities. After surveying 40 people in 9 countries tasked with carrying out every-day mobile actions through gestures, Mauney’s take-away was that, while small differences exist, there are deep commonalities between the gestures people use to perform certain actions, regardless of their culture or touchscreen device experience: for example, the majority of people will try to delete an item by simply dragging it off screen. That kind of intuitive interaction is powerful stuff when it comes to UX.
And if that weren’t enough, building gestures into the heart of your design allows you to create more minimal interfaces. More gesture controls equal less button-bsaed commands, and less buttons means more room for you to create aesthetically pleasing apps with powerful user flows and strong information architecture.
So what are you waiting for? Follow these 5 tips and design gesture-driven mobile apps that add value to the user experience.
Design clever shortcuts with Fluid Touch gestures
Using fluid touch gestures – commands that allow the user to perform several actions sequentially without changing gesture – can help to reduce taps and simplify the user experience. We like Ralph Thomas‘s take on improving Google Inbox app as a way to understand the potential of fluid gestures: trying to circumvvent the pattern of tapping and reacting, tapping of reacting, Ralph designed a “more reactive Floating Action Button that understands a larger touch vocabulary”. In his example, users can select contacts with one fluid gesture, rather than tapping. Check out the video demo below to get an idea of how fluid touch gestures work.
If you use On Tap gestures, make it easy
On Tap, one of the most-frequently carried out gestures, is to touchscreen devices what point and click is to desktops. But with some crucial differences. While point and click is, in essence, an unnatural maneuver that we’ve grown accustomed to, On Tap is much more intuitive: in real life, you see something you want, you grab it; in interfaces, you see something you want, you press it with your finger, then release. This is how we perform some of the most basic activities in an app, like opening a mail or a contact. But, as Jowita Ziobro points out in Medium, thanks to the bluntness of the human digit it’s much harder to be accurate when jabbing away with your digit rather than pointing and clicking with a mouse. So this means we have to design smart for On Taps: target tap areas should be big, bold and easy to aim for: think chunky calls-to-action rather than fiddly links. Applying the ‘fat finger rule’ used by many designers, means that On Tap targets have to be at least 44 points in both width and height. This goes up to 70 points on devices with bigger screens such as phablets.
GIF: Clear app
Animate to give users feedback
Gestures, usable as they are, would be nothing without animation. Mobile apps make use of animation to give feedback to users, and to convey information about functioning. This reactivity boosts positive user experience. As Chris Bank has it in UX Mag, “when animations visually mimic the real-life reactivity to our gestures, we become that much more immersed in the experience.” You can animate notifications, collapse or expand elements, use parallax scrolling and lots more to create a dynamic interface that will delight users.
Advances in CSS animation mean you cto use animation in your apps without having to worry about plug-ins, or even explore using GIFs in your mobile app designs. We like these 36 inspirational examples of mobile app animation from Digital Synopsis.
Prototype to test your interactive UI gestures
Prototyping can play a key role in designing intuitive gestures at several points in your mobile app development process. Prototyping tools like Justinmind come with a pre-built library of gestures and animated interactions that allow you to road-test the best gesture for each action, so you can link up events, actions and animations to define the dynamics of your app. Multi-device testing means you can test your prototype on all touchscreen devices, so you can run user-testing in real-life conditions and iron out any confusion your users might have related to gestures and how to use them.
Plus, you’ve probably noticed that trying to explain a gesture-driven app to stakeholders is a tough sell when all you’ve got in your hands is a static wireframe. With an interactive prototype you can show clients exactly how your gesture-driven app will function while presenting them with your idea, cutting down on re-designs and saving you time.
How to incorporate hidden gestures into the UI
Gestures may be awesome, but they do have a downside: they’re basically invisible, so unless users have prior knowledge that a gesture exists, they won’t try. For example, how do iPhone users know that by swiping an item, they’ll be able to see a list of actions available to carry out on that item? And how to Google Maps users know that by shaking their device they can send feedback?
Some gsture-driven apps get round this by doing a ‘walkthrough’ open first opening the app. But Max Rudberg sees this as kind of inelegant; his solution of designing in subtle UI hints to guide your users towards gestures is much cleaner. Using the example of improvements to Apple’s camera unlock, Max shows good use of subtle visual clues: tapping the camera icon gives a quick flash of the camera UI behind the lock screen, which lets users know that they have to use a Slide Up gesture to access the camera. Much better than before the update, when users just had to know they should Double Tap to access the camera.
Luke Wroblewski has some stellar hints on how to build visual cues into your interface to direct users towards gestures. In the video below he goes through several UI solutions – content teasers, dialog boxes and pop-up animations – you can use to help guide users through a gesture-driven interface.
Interactive UIs with gestures – the take-away
The bottom-line is that there’s no one-size-fits-all solution to how to use gestures in a mobile or web app. The key is prototyping, testing, iterating and testing again. Breaking the rules could get you to some really interesting places in your app design, and certainly take you a lot further than the good old point-and-click days of the desktop mouse.