The introduction
We live in a device-driven world with frequent human-computer interaction.
As touch screens become standard on mobile devices, the widespread use of multi-touch gestures gives us a broader way to connect with our phones, tablets and even laptops. We interact with various elements on the screen by simulating gestures in the real world, which makes many human-computer interaction modes that we never thought of or dare not think of become reality. Meanwhile, the application of gesture operation lowers the threshold of communication between people and physical devices.
Figure 0. Infants play games with little difficulty through the screen
By the time he was less than two years old, he could easily unlock his iPad, turn the page to find his favorite panda restaurant, and then expertly choose from a variety of ingredients to create a delicious virtual meal. And we’re happy to buy all kinds of big-screen phones and tablets for our elders. Mobile devices and gesture interaction have brought us revolutionary experience and convenience. The era of mobile touch control has long arrived. Have you kept pace with The Times? It is worth every designer’s reflection.
What is touch gesture
Touch gestures are a form of natural user interface (NUI).
Natural User Interface (NUI) refers to a kind of invisible user interface. NUI requires only people to interact with the machine in the most natural forms 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 and intuitive, more humanized.
Your phone, tablet, and laptop have the ability to recognize multi-touch input to help you make extensive use of it. This type of input helps us interact with the content on the screen, and mimicking real gestures can reduce our cognitive barriers to manipulating screen objects.
In the PC era, we needed someone or a tutorial to teach us how to use a mouse, move a cursor on a screen that was almost impossible to map to in the real world, and then learn how to double click to open a file, hold it down, drag it into a folder.
Touch gestures bring a natural user interface, and mobile devices that support touch can be used naturally and intuitively by people of all ages and skill levels. Using multi-touch interface technology to replace the current keyboard (keys) and mouse will further reflect the future trend of humanized control interface.
Figure 1. Schematic diagram of capacitive touch screen structure
Think of stereotypical user interfaces that require you to hover over a mouse or click on an email to get more detailed information. That doesn’t work on a mobile device. How do you get rid of this idiomatic design? The answer is to create a mobile-first experience.
Ii. Use scenarios of touch gestures (mobile scenarios)
Mobile scenarios refer to the environment and state of the user’s use — anything that can affect how the user interacts with the device. Because these situations are constantly and rapidly changing, they are especially important for mobile devices. We consider common designs for complex environments where users are distracted, multi-tasking, gesturing, low battery conditions, and poor connectivity.
Interaction in figure 2. The mobile context (reference: Nadav Savio | Giant Ant Design)
Factors that may affect the efficiency and accuracy of users to complete tasks using touchscreen devices in various mobile environments are as follows:
- Attention is easily distracted in mobile situations (e.g., talking, observing the surroundings, etc.)
- Fragmentation of time to operate the phone in mobile scenario (interrupted by various events)
- In mobile scenarios, tasks are prone to interruption (unexpected effects)
- In moving situations, the body may be occupied by other objects (e.g. walking the dog, carrying a bag, etc.)
- In mobile situations, noise is distracting (busy, noisy roadside)
Three, the basic operation of touch gestures
Figure 3. Holographic touch interaction in the Iron Man movies
Natural gestures are gestures that exist or evolve in the real physical world. For example, slide up and down to scroll a list, slide to pan, etc. Such gestures are natural and require little or no learning by the user.
- Hold down to see more action (now with 3D Touch, the biggest difference is that there needs to be a certain amount of pressure compared to holding down)
- Click to perform the main action
- Slide to translate
- Swipe to select and perform command operations
- Shrink and stretch to scale
- To rotate by turning.
- Edge swipe to use system commands
Four, what is a good gesture?
First, let’s look at the pros and cons of multi-touch.
So what are good gestures?
Handy gestures that are both simple and one-handed should be as popular as the “pull-refresh” developed and patented by Tweetie founder Loren Brichter. Or as natural and simple as turning pages on an iBook. Here are some characteristics of a good gesture:
– Easy to use. Not only is it simple, but it can be used with one hand in a crowded vehicle – easy to remember. One is that gestures are easy to remember, and the other is that people want to remember-consistent with cognitive habits. That is to say, on the one hand, the gesture should follow people’s natural habits and consciousness, and on the other hand, it should conform to the operation that the gesture is about to produce — practical. Gestures need to make the user feel comfortable. Few users want to click twice to see what they want to see, which makes them feel uncomfortable — a pleasant experience. Winkler believes that good gestures can feel magical. UX is always unknown and difficult to articulate. But this is just one of the ways we recognize and enjoy technology — timely feedback. Feedback means that the user knows what is going on. Users will be informed of their status after performing gesture operations
Five, in the process of gesture design application points need to pay attention to :(gesture design criteria)
Conforming to cognitive habits
In non-conceptual projects, the use of “innovative” gestures other than basic gestures (combinations) will lead to confusion for users, cost of learning, increase memory burden, and difficulty in guiding users to develop habits when unified standards are not established. Technical limitations may turn “innovation” into inconvenience.
The end user is a human, and gesture manipulation is defined based on human behavior. Gesture operation is a mapping of people’s behaviors in the real world. Therefore, gesture design should conform to the cognitive habits of most people and reduce the cognitive cost of users. For example, directional gesture operation should try to conform to the direction of thumb movement, and should be consistent with cognition.
Figure 4. IBooks’ page-turning experience and physical book turning
Memory limitation
Because these gesture operations can not be clearly displayed on the interface, there is no visual element representing the action, and users need to remember which gesture corresponds to which operation, some uncommon gesture operations are often difficult to find. It’s fine if gestures are intuitive, but if there are no “natural” gestures to represent an action, the user gets confused and needs to remember them, just as commands need to be remembered when using a command line interface.
The number of gestures in an App should be kept below 5, relying on the guidance and hints of the interface, so that such users can remember these gestures according to the situation, thus increasing the memorability of gestures.
If the user is not aware of it, these gestures will not be easily detected, and will not be used by others, and even cause operational obstacles. (Bad example, can’t find navigation bar)
Figure 5. Mozilla Firefox 4 right click to call Tab
Different application scenarios use different gesture design
People will use our products in a strange environment, our products and the surrounding environment in the user’s attention, with a 3.5 to 5 inch screen to fight against the traffic, noisy world, so in the actual gesture design also need to consider the use of the application scenario.
Efficiency and practical applications, such applications are generally used in the moving scene, considering the mobile phone generally shaking along with the user’s moving, operation efficiency and misoperation and other factors, using one hand to operate the mobile phone gesture interaction.
Screen immersion applications, such as games, are generally casual and stable operation environments. Some complex gestures can be appropriately set with advanced operation functions in the game to increase the operation fun of the game.
Figure 6. Clear’s gesture manipulation is impressive
Use gestures sparingly
2014 was so hot that once you started playing Flappy Bird, you couldn’t stop. The game uses basic gestures in a simple but effective way. Clicking or not clicking is the only action gesture. Players quickly learn what gestures to use and how to use them to play the game.
Figure 7. Flappy Bird requires only one finger to control
Provide immediate feedback
Providing immediate visual cues when the user touches the screen can improve the user’s confidence. Elements involved in interaction can change color, change size, or move/vibrate.
Figure 8. Vibration feedback of 3D Touch
Make the operation reversible
Touch interaction should be reversible. Provide visual feedback to indicate what happens when the user lifts their finger, while allowing the user to back out and cancel the action. This will enable your app to safely navigate with touch controls.
FIG. 9. Wechat cancels sending voice
Don’t keep your gesturetrigger area away from the thumb hot zone (Rule of thumb)
Jash Clark, in his book Touching People: Designing Good iPhone Apps, notes that the range of motion of your thumb can have an impact on how efficiently and correctly you use your phone.
While the thumb can swipe across the entire screen, it has limited reach and flexibility, and only a third of the screen is truly accessible — that is, the area where the thumb is right in front of it. In order to obtain a comfortable man-machine experience, the main click target should be placed in the hot area convenient for thumb click.
Figure 10. Luke Wroblewski in Mobile First
Keep the gesture global
Don’t let your users get used to the gestures you create in your app, only to get stuck in your app.
If the user has become accustomed to your gestures, finds them convenient and quick, and spends the learning cost to master and adapt to your gestures, then you’ve won half the battle. Try to use simple gestures to complete common functions, requiring complex gestures to complete functions, to have a convenient and easy to find the way to match. Try to use the same gesture, reduce the frequency of switching between different gestures.
Figure 11. The use of global gestures in iOS native apps
Write in the last
Good touch gestures are how people communicate with devices and applications. It is commendable that those who created the multi-touch technology at the beginning had a careful insight into the delicate and authentic behavior characteristics of people and turned to touch screen to reflect the behavior naturally.
Reprinted with: Yunrui original address: Tencent CDC