The future of interaction! 5 ways to help you design easy-to-use touch gestures

We live in a world where people interact with machines frequently and it is driven by devices.

As touch screens gradually become standard for mobile devices, the widespread use of multi-touch gestures has enabled us to establish a broader way of communication with mobile phones, tablets, and even laptops. We interact with various elements on the screen by simulating real-world gestures, making many human-computer interaction methods that we never thought of or dared to think of a reality. At the same time, the application of gesture operation has lowered the threshold for communication between people and physical devices.

[[163416]]

Figure 0. Babies have almost no difficulty playing games on screen

My little kid, who is less than 2 years old, can easily unlock the iPad, turn the pages to find his favorite panda restaurant, and then skillfully choose the ingredients he likes to make a delicious virtual meal; and we are also happy to buy various large-screen mobile phones and tablets for our elders. Mobile devices and gesture interaction methods have brought us revolutionary experience and convenience. The mobile touch era has already arrived. Have you kept up with the times? It is worth every designer to reflect on.

1. What are touch gestures?

Touch gestures are a form of natural user interface (NUI).

Natural user interface (NUI) refers to a type of invisible user interface. NUI only requires people to interact with machines in the most natural way of communication (such as language and text). Intuitively speaking, devices using NUI do not require a keyboard or mouse. In particular, touch technology will make human-computer interaction more natural, intuitive, and more humane.

Your mobile phone, tablet computer and laptop have the function of recognizing multi-touch input to help you realize its extensive use. This input method helps us to interact with the screen content, and imitating the real operation gestures can reduce our cognitive barriers to operating screen objects.

In the PC era, we needed others or a tutorial to teach us how to use a mouse, move the cursor on the screen, and there was almost no mapping in the real world for these things, and then learn how to double-click to open a file, press and hold a file, and drag it into a folder.

Touch gestures bring a natural user interface. Touch-enabled mobile devices can be used naturally and intuitively by people of all ages and skill levels. Using Multi-Touch multi-touch interface technology to replace the currently used keyboard (buttons) and mouse will further reflect the future trend of humanized control interfaces.

Figure 1. Capacitive touch screen structure schematic

Think about those old-school user interfaces where you have to hover your mouse or click on an email target to get more detailed information. These no longer work on mobile devices. How do you get rid of this cliché design? The answer is to create a mobile-first experience.

2. Usage scenarios of touch gestures (mobile scenarios)

Mobile context refers to the environment and state of the user when using it - that is, anything that can affect the user's interaction with the device. Because these contexts change continuously and rapidly, they are particularly important for mobile devices. We need to consider universal design under complex environments such as user distraction, multitasking, gesture operation, low battery conditions and poor connection conditions.

Figure 2. Interactive context on the move (Source: Nadav Savio | Giant Ant Design)

Factors that affect the efficiency and accuracy of users completing tasks using touchscreen devices in various mobile environments include:

– In mobile situations, attention is easily distracted (such as talking, observing the surrounding environment, etc.)
– In mobile scenarios, the time spent on mobile phones is fragmented (interrupted by various things)
– In mobile scenarios, tasks are easily interrupted (due to unexpected situations)
– In mobile situations, limbs may be occupied by other objects (such as walking the dog, carrying a bag, etc.)
– In mobile scenarios, noise distracts attention (roadside with heavy traffic and people)

3. Basic operations of touch gestures

[[163418]]

Figure 3. Holographic touch interaction in the Iron Man series of movies

So-called natural gestures are gestures that exist or are derived from the real physical world, such as sliding up and down to scroll a list, sliding to pan, etc. These gestures are natural and require little or no learning by the user.

- Long press to see more actions (now with 3D Touch, the biggest difference compared to long press is that a certain amount of pressure is required)
– Click to perform the main operation
– Swipe to pan
- Swipe to select and perform command actions
– Pinch and stretch to zoom
– Turn to rotate
- Edge swipe to use system commands

4. What are useful gestures?

First, let's look at the advantages and disadvantages of multi-touch.

So what are some useful gestures?

Good gestures are simple and can be operated with one hand. They should be as popular as the "pull to refresh" developed and patented by Tweetie founder Loren Brichter. Or as natural and simple as turning pages in iBook. Here are some characteristics of good gestures:

– Easy to use. Not only should the movements be simple, but it should also be able to be operated with one hand in crowded public transportation.
- Easy to remember. First, the gesture should be easy to remember, and second, people should be willing to remember it.
– Conform to cognitive habits. That is to say, the gesture should follow people’s natural habits and consciousness on the one hand, and fit the operation that the gesture will produce on the other hand.
– Practical. Gestures should make users feel comfortable. Few users are willing to click twice to see what they want to see, which will make them feel troublesome.
– A delightful experience. Winkler believes that good gestures feel magical. UX is always unknown and difficult to explain. But this is exactly what we know,
A manifestation of enjoying technology
- Timely feedback. Feedback means that the user knows the current operation. After the user completes the gesture operation, there is clear status information to inform

5. Points to note when applying gesture design : (Gesture design guidelines)

In line with cognitive habits

When using "innovative" gestures other than basic gestures (combinations) in non-conceptual projects without establishing unified standards, the confusion in usage will lead to user confusion, cost of learning, increase of memory burden, difficulty in guiding users to develop usage habits, and technical limitations may turn "innovation" into inconvenience.

The end user is a person, and gesture operation is defined based on human behavior. Gesture operation is a reflection of people's real-world behavior. Therefore, gesture design should conform to the cognitive habits of most people and reduce the user's cognitive cost. For example, directional gesture operation should try to conform to the direction of thumb activity and be consistent with cognition.

[[163419]]

[[163420]]

Figure 4. iBooks page-turning experience and physical book turning experience

Memory limitations

Because these gestures cannot be clearly displayed on the interface, there are no visual elements representing the actions, and users need to remember which gestures correspond to which actions. Some uncommon gestures are often difficult to find. If the gestures are intuitive and common, there will be no problem. If there is no "natural" gesture to represent an action, users will be confused and need to remember it, just like remembering the commands when using the command line interface.

The number of gestures in an App should be kept below 5, relying more on the guidance and hints of the interface to allow such users to memorize these gestures based on the context, thereby increasing the memorability of the gestures.

If users lack awareness of these gestures, these gestures will not be easily discovered, and will not be used, or even cause operational obstacles. (Bad example: the navigation bar cannot be found)

Figure 5. Swipe right to bring up the Tab screen in Mozilla Firefox 4

Different gesture designs are used in different application scenarios

People will use our products in all kinds of strange environments. Our products compete with the surrounding environment for users' attention. They rely on a 3.5-5-inch screen to fight against the hustle and bustle of the world. Therefore, the actual gesture design also needs to consider the usage scenarios of the application.

Efficiency and practical applications. This type of application is generally used while moving. Considering that the phone generally shakes as the user moves, operating efficiency and misoperation, etc., gesture interaction is adopted to operate the phone with one hand.

Screen immersive applications such as games generally provide a casual and stable operating environment. You can appropriately set some complex gestures to coordinate with advanced operating functions in the game to increase the fun of the game.

Figure 6. Clear's gesture operation is impressive

Moderate application gestures

Flappy Bird was so popular in 2014 that you can't stop playing it once you start. The game uses basic gestures in a simple but effective way. Clicking or not clicking is the only operation gesture. Players can quickly learn what gestures to use and how to use them to play the game.

[[163421]]

Figure 7. Flappy Bird game, players only need to use one finger to control

Provide instant feedback

Providing visual cues immediately when users touch the screen can increase user confidence. Interactions can involve elements changing color, changing size, or moving/vibrating.

Figure 8. 3D touch vibration feedback

Make the operation reversible

Touch interactions should be reversible. Provide visual feedback to indicate what will happen when the user lifts their finger, and allow the user to undo the action. This will make your app safe for navigation using touch.

Figure 9. Cancel sending voice message on WeChat

Don’t keep your gesture triggers away from the thumb hotspot (rule of thumb)

Jash Clark mentioned in the book Touching People's Hearts: Designing Excellent iPhone Apps that the range of motion of the thumb has a certain impact on the efficiency and accuracy of operating the phone.

Although the thumb can swipe across the entire screen, the thumb is limited in reach and flexibility, and only one-third of the screen is truly easy to reach - that is, the area directly facing the thumb. In order to obtain a comfortable human-computer experience, the primary click target should be placed in a hot zone that is convenient for the thumb to click.

Figure 10. Luke Wroblewski in Mobile First

Keep gestures global

Don't let users get used to the gestures you create in your app, only to run into a wall in your app.

If users are already accustomed to your gestures, feel that your gestures are convenient and quick, and spend the learning cost to master and adapt to your gestures, then it means that you are halfway to success. Try to use simple gestures to complete common functions. For functions that require complex gestures, there should be a convenient and easier to find way to cooperate. Try to use unified gestures to reduce the frequency of switching between different gestures.

Figure 11. Usage scenarios of global gestures in iOS native applications

Written in ***

Useful touch gestures are a way for people to communicate with devices and applications. The creators of multi-touch technology were able to carefully understand people's delicate and authentic behavior characteristics and then naturally reflect them through the touch screen behavior.

References:

• Warmthen《Things to pay attention to when adding gesture operations to applications》
• Nadav Savio "Design Sketch: The Context of Mobile Interaction"
• Rani Molla "What Makes a Good Gesture Control"