When analyzing the swiping gestures of the N9, we explore how they replace the iPhone’s Home button, presenting the argument of “replacing clicks”. This article summarizes previous discussions and emphasizes this design trend.
Touchscreen clicking is a continuation of mouse clicking, which has many disadvantages:
Display Space. Controls occupy display space; a 44-pixel square is valuable screen real estate on a mobile interface.
Difficult to Operate. Controls need to be placed in specific locations, and due to the large screen and the posture of handheld devices, some controls are hard to click.
Precision. First, clicking gestures require precision; the clickable area on a touchscreen is determined by the fingertip area. Second, the user’s click point is usually below the center of the target area.
Size. For input method keyboards with dense buttons, larger buttons lead to faster clicks but lower precision. Conversely, smaller buttons make users cautious, slowing down click speed.
Shape. Round and diamond-shaped buttons are less accurate than square buttons.
Position. It’s easier to click around the thumb area, but accuracy in the bottom right corner is lower than that of the top left button.
Metaphor. The metaphor of clicking is weak in real life; buttons indicate switches or specific operations, but actions like deleting, downloading, closing, opening, and switching are not directly related to clicking. This relates to the singularity of mouse operations, while touchscreen operations are richer. Natural User Interface (NUI) is more direct than Graphical User Interface (GUI), as it represents the physical world more naturally, transitioning to the most intuitive form of interaction.
From more design examples, it is evident that replacing clicks with gestures like swiping and dragging has become a trend in interaction design. Taking swiping gestures as an example, using swiping gestures instead of clicking has many advantages:
Convenience. Swiping operations are easier than clicking, even allowing for full-screen operations. For example, in Angry Birds, pulling the slingshot does not require precise targeting, a principle applied in many game designs. Similarly, switching tabs by swiping in Android 3.0.
Flat Interfaces. In iOS 5, swiping the camera interface allows users to view previous photos; the interface switches not by clicking but by presenting at the same level.
Saving Display Space. For example, the iPhone Douban homepage displays a search box when pulled down, the Palm application interface reveals frequently used functions along the swipe path, email lists can delete emails by swiping right, and Weibo lists can refresh by pulling down, reducing the space occupied by controls, which only appear when needed, allowing users to focus on the main content.
Reducing Misoperation. After controls are replaced, the probability of misoperation due to weak indication of controls and small size, leading to inaccurate clicks, decreases.
Strong Metaphor. Palm’s card deletion for multitasking and swiping right to delete emails metaphorically indicates “removal,” rather than mechanically clicking an ‘X’ icon.
Comparing the two, swiping has many advantages over clicking. Although some operations require a learning curve or temporarily serve as shortcuts, incorporating swiping in design can enhance user experience, especially for frequently performed actions like page turning. Furthermore, swiping has many inherent characteristics that can be utilized.
From a technical perspective, gestures are recognized through parameters. Clicking retrieves the coordinates of the finger touching the screen, swiping captures coordinates and time, and dragging combines long-press with swiping. The coordinates connecting various time points create a swiping trajectory, with parameters that can be utilized:
Directionality. In Safari, pages can be swiped in any direction; the iPhone home screen allows horizontal swiping, while WP7’s Sina Weibo supports both vertical and horizontal swiping, and Baidu’s mobile input method can swipe in four directions to select words. When swiping is limited to one direction, such as left or right, any displacement along the Y-axis will trigger the swipe; when swiping in two directions, the swipe direction is recognized based on the displacement range, although WP7 applications sometimes struggle to identify the swipe direction.
Inertia. Swiping trajectories have inertia; when the finger leaves the touchscreen, speed persists, and the swiping effect does not end immediately, such as in the rapid scrolling effect of web pages. On the Android system’s home screen, swiping slowly left or right over half the screen does not switch the interface, while quick short-distance swipes do switch based on inertia, aligning with the laws of physical motion in the real world.
Starting and Ending Points. Swiping starts in specific areas, leading to different operations; for example, Baidu’s mobile input method allows swiping to select words, with gesture areas similar to clicking. The N9 recognizes upward swipes from the bottom within a fifth of the area as multitasking switching.
These are the basic elements of swiping; more complex operations require application-specific customization, such as the Swype input method, which aids in recognizing letters based on curve angles. Browsers can define swipe shortcuts, and following this logic, we can anticipate more swiping operations will emerge.
Perceptibility. The first challenge in introducing clicking/swiping gestures is how to make users aware that they can click/swipe. Clicking gestures are relatively simple, as common buttons trigger click events. However, making users aware of the existence of swiping gestures is challenging; I only discovered in March 2016 that swiping could delete WeChat group records. While it is difficult, solutions exist:
1. Display hidden content appropriately, as in Zhihu, where exposing the next answer slightly helps users realize they can swipe to switch answers;
2. Introduce real-life metaphors, such as in QQ Reading, where the night mode toggle is achieved by pulling a lamp cord. For most users, seeing this lamp cord clearly indicates it can be swiped (pulled).
Terminal.Swiping or clicking? The standards for different terminals vary. During interviews, we often get asked about the differences between PC and mobile interface design. In my view, the fundamental difference lies in content capacity:A PC webpage can accommodate multiple layers and dimensions of information; the more content there is, the higher the requirement for operational accuracy, where mouse clicks can help users execute precise and rapid actions.
However, due to size limitations, a mobile interface cannot display much information; if too much information is shown, users must swipe to see it. Therefore, mobile design emphasizes simplicity and directness in the interface and content, adhering to the principle of “one interface, one task.” Given this premise, how can we enhance the usability of mobile products? We can incorporate more swiping gestures because, compared to clicking, swiping does not require high precision.
For example, in the Xiami Music song playback interface, if a user wants to return to the previous screen, they can swipe up anywhere on the screen. Of course, they can also click the return/minimize button at the top left of the interface, but that is clearly much more cumbersome. Moreover, with large-screen phones becoming the trend, for users accustomed to holding their phones in their right hand, whether their thumb can reach the top left button is a question.
Scenarios. Next, we will discuss the usage scenarios of clicking and swiping gestures, selecting several commonly used music applications. For a song currently playing, common user operations include: pause/play, adjust song progress/volume, switch songs, view lyrics, check song/album/artist details, download, favorite/like, and share.
Most scenarios are completed using clicking gestures, with swiping gestures only used for adjusting song progress/volume and switching songs. Notably, QQ Music, Kuwo Music, and Xiami Music all allow users to swipe up to return to the previous screen. Interestingly, Kuwo Music retains the iOS return gesture, meaning users can return to the previous screen by swiping left or up.
SummaryAbove is a simple analysis and summary of swiping gestures. If you have different opinions or views, feel free to leave a comment or join the discussion group.
If you are learning UI design without any methods or experience, you can join our UI design study group 826565833, where online classes are free, and software video resources are available for free. Alternatively, add the mentor’s WeChat xsjyzqf
Or click the link to join the official study group:
https://jq.qq.com/?_wv=1027&k=5K2IQLd
Or click the official course link to learn:
http://suo.im/4CvaFv