How to Develop for Gesture-Driven User Interfaces

Only a few years ago, “responsive” was the buzzword when it came to web development – every site needed to be viewable on multiple screen sizes to make way for an increase in mobile usage.

Today, it’s becoming increasingly difficult to find a site that’s not responsive to some degree, and new developers learn how to create flexible interfaces from the get-go.

So the buzzword of the moment has become “gestures” – developing websites to be used with touchscreen technology. Screens have exploded in the last three years. In 2016, shipment of touchscreen gadgets was around 2.8 billion, up from 1.8 billion in 2013.

But before you think, “Well, I’m not a mobile UI developer, so what does it matter?” consider that touch screen technology isn’t limited to mobile. While more than 64% of Americans use touchscreen mobile devices, nearly 39% of touchscreens users have computer monitors with gesture-driven technology, and 42% use tablets to browse your site.

Even home appliances like refrigerators and washing machines can be equipped with touchscreens.

This means that web development is no longer about making sure all your words and images fit onto varying screen sizes, but rather about whether or not your site can be triggered by the swipe of a finger instead of the click of a mouse.

Modern web developers will need to be able to build gestures into their websites, no matter the device it’s being viewed on.

So how do you build a website with gestures in mind?

[ Content upgrade with ID = 308 not found ]

invision_compr

Use Gestures for Functionality

The main reason that gesture controls work well is that they feel natural and intuitive to users, like interacting with a real life object.

For example, when you pick out a shirt to wear from your closet you don’t select a button to see whether or not the shirt is dirty, you just grab it.

With gesture technology, if you were browsing for a new shirt to buy on a retail website, you wouldn’t have to click a button to get a better look at the shirt’s details; you would “grab” the screen (or pinch, in this case) to get a closer view.

The goal is to design your gestures around natural human interaction – pinches, swipes, taps, and pulls. So anywhere there’s a button on your site or an action that someone would have to “click” on a normal screen, consider it an opportunity to use gestures.

Even including something like Pull-To-Refresh can be an easy way to include gestures in your site without disrupting the design.

Just remember to use visual cues to indicate where there’s additional gesture-driven action on your site, especially for PC users. Without visual cues, users could get confused about how to interact.

Include Proper Sizing of Gesture Targets

Most people will use their fingers or thumbs in place of a mouse, but unfortunately fingers and thumbs aren’t quite as accurate, and can select too much (or too little) depending on the size and spacing of your site.

For mobile users, a thumb can manage to sweep the entire screen of an oversized phone, but only about a third of the screen is in truly “effortless” for them to use. They may need to zoom in to select a smaller button at the top of the screen, for instance.

mobile-app-gesture-touch-gesture-reference-guide

With PCs or tablets there’s some leeway, as screen sizes will also be larger, but there are different spots on a tablet that are still more user-friendly for gestures (like the upper corners instead of the bottom corners).  Not to mention when you’re tapping or swiping in a hurry, you can still run into trouble.

That’s why Apple, Google, and Microsoft all provide guidelines for the proper sizing of tap targets.

Think Action + Animation

When designing for gestures, there are two essential questions you need to ask:

  • What action is triggered when the user performs a gesture?
  • How will I visualize that action as it’s happening?

You will first need to decide which action will be triggered when a user performs a certain action. Will a double tap open or close a page? Will they need two fingers scroll up and down or can they use one finger and a swipe?

lukew-coretouchgestures

Source: Luke W – Touch Gesture Reference Guide

Once you’ve decided what action will be created by what gesture, you’ll need to decide how you want to let users know that the gesture has succeeded. Users won’t be able to fully see, understand and feel what will happen when they touch, hold, drag and swipe items before it happens.

If there’s an immediate response (if you drag to scroll and it scrolls, you know you’re successful), there’s not an issue. But if there’s a delayed response (you tap, but the new image or page hasn’t loaded yet), consider including an additional animation (like a change in color or size) to alert users that their gesture worked.

Use Prototyping Tools to Test and Debug

Of course, gesture-driven interfaces have the same amount of bugs as any interface, so it’s important that you’re testing your site in order to pinpoint where and when users might get stuck before you launch.

Certain prototyping tools, including Pop and Invision, can help you develop wireframes and debug any problem areas as needed.

Framer JS is another prototyping tool that can help you build more interactivity on your site, and also allows you to test on a number of different devices.

Other tools you might want to consider:

Your goal should be to test on as many touchscreen devices as possible to make sure that you’re not running into issues with gestures on any particular device.

[ Content upgrade with ID = 308 not found ]

Final Thoughts

Gestures are the wave of the future for both mobile and PC web development, so it’s important for new developers to keep up-to-date on the latest gesture-driven technology trends.

If you’re designing a site for touchscreen, remember that gestures should be natural and intuitive; it should makes sense for someone to tap a button or swipe a photo. You also want to make sure that your gesture targets are large enough to accommodate the “clumsiness” of thumbs and fingers.

If necessary, include any animations or visual cues to alert users to areas of your site where they can use gestures, and be sure to test out your site on touchscreen devices and using prototyping tools before you launch.

Leave a Reply