How detailed are the design details of big companies? Let’s take a look at the actual combat case of QQ Browser!

Data from the third quarter of 2020 show that the penetration rate of online video on mobile terminals in my country has steadily exceeded 75%, and the penetration rate of short videos has also exceeded 70%. The way of watching videos on mobile phones anytime and anywhere is gradually replacing the viewing habits of the PC and TV era. With the rapid growth of video consumption, QQ Browser, as a platform for video consumption, has become an important issue in providing users with a better video viewing experience.

In QQ Browser, we provide users with a variety of video playback functions and three playback modes: full screen mode, floating mode, and small window mode. Next, I would like to share with you four thoughts during the design process of the upgraded player.

Design Thinking 1:

How to make the functional layout close to user habits and improve the usability of the functions?

Horizontal screen playback can enhance the immersiveness of watching videos, but the challenge of functional layout in horizontal screen state has also become higher. According to Fitts's law, the distance from the finger to the target (D) and the size of the target (W) determine the time and difficulty (physical interaction cost) for users to complete the operation. Large and close targets allow users to easily reach them, otherwise they will leave users with the impression that they are "difficult to use".

The touch hotspot is an ergonomic concept. Steven Hoober defined the comfortable control range of fingers when holding a device in a study published in 2013. The team conducted more than 1,300 field observations and counted the operation methods of general users using mobile devices. The study found that about 75% of clicks are driven by the thumb. Hoober pointed out that in order to obtain a comfortable human-computer experience, important click targets should be placed in the "touch hotspot", but this study only focuses on the vertical screen operation of mobile phones, and we cannot be sure whether the horizontal screen scenario is also applicable. Therefore, we conducted user surveys to understand the user's operating habits when watching videos in horizontal mode, and defined the touch hotspot range when watching videos in horizontal mode, with the aim of ensuring the usability of the player interface and making users willing to actively explore the high-quality functions of the player.

In the survey results, we found that when watching videos in full screen, about 70% of users are accustomed to operating with the right thumb, and half of the users hold the phone with one hand, which is basically consistent with Hoober's research results. This means that we should place the function entrances that users use frequently on the right side of the screen. Although there are also touch hotspots on the left side, because there are fewer users holding the phone with their left hand, the frequency of use is lower, so it can be considered to be placed on the left side of the screen. It should be noted that human factors (hand size, walking or stationary state, holding posture) and machine factors (screen size, weight, shape) will cause fluctuations in the hot zone range, so the touch hot zone refers to the touch reference range in human-computer interaction, rather than a constant area.

Based on the touch hotspots mentioned above, we further introduced a grid system to refine the layout of the new player interface, planning the position of the function buttons from the surface to the point. Considering that the touch hotspots that the thumb can reach will not scale with the screen size, the player grid adopts the adaptation logic of "fixed at both ends and stretched in the center" to ensure that the function buttons can be easily reached on large-screen mobile phones. In addition, the contact area between the thumb and the screen is generally between 8-12mm, so we control the width of a single grid to 12mm (taking the screen size of iPhone X as an example) to avoid accidental button touches that affect the operating experience.

Combining touch hotspots and establishing a grid system, we have defined three types of functional areas, which contain high-frequency, medium-frequency, and low-frequency operation buttons. This layout rule allows users to trigger more commonly used functions while maintaining a comfortable posture, and it can also help us verify the usability of the subsequent gesture design.

Design Thinking 2:

Flexible and free switching in line with natural metaphors

There are three window sizes in the QQ browser platform: small window mode, floating mode, and full screen mode. The window size corresponds to the user's focus on the content. We hope to design a set of universal gestures so that the player can switch freely between the three modes to meet the viewing needs of different levels of focus.

When studying gesture operation cases, we found that the usage rate of many gesture functions is actually not high. Quite a number of users have never used gestures other than single-finger sliding and clicking. The reason is that gestures are more complicated than click operations and lack visual guidance, and the learning cost is high. Many users have never even discovered gesture operations. So how should we design gesture operations to achieve our intended design goals? In this case, we can use the user's commonly used gestures as the design entry point, establish gestures that conform to the user's mental model, and reduce the discovery and learning costs of gesture operations.

Finally, we chose the two-finger zoom gesture that is most commonly used by users to control the window to enlarge or reduce layer by layer.

Design Thinking 3:

Optimize existing gestures to create a comfortable control experience

The new version of the player adds a long press multi-speed function. Users can long press the hot area on the screen to freely select the viewing speed according to their needs. When designing this differentiated function, we thought about how to enhance the pleasure and excitement of control.

On the basis of ensuring usability, we tried to continue to polish the details of the operation feedback. When switching speeds, the gear hot zone will light up as the user's finger stays, and on top of that, a slight vibration feedback is added to each switch, which can not only clearly perceive the current state, but also enhance the user's sense of control.

Design Thinking 4:

Insight into user needs and strengthen privacy awareness

Privacy protection is a service provided by browser products to users. When designing the player, we are also thinking about how to expand the privacy protection service to deeper and more detailed scenarios. Through observation of user behavior, we found that when young people who are not living alone are suddenly interrupted by their parents or roommates while watching videos at home, they will turn off the video to protect their privacy. From this scenario, we extend our thinking to other scenarios of mobile video playback, most of which are relatively independent but not enclosed spaces, such as the living room of a shared house, the subway, the workstation, etc. Users all have the need to quickly close the video window to protect their privacy when they are suddenly interrupted by the outside world.

In order to meet the needs of users to quickly exit the playback window and shorten the repurchase path, the new player introduces a two-finger pull-down gesture in the full-screen scene. The two-finger pull-down gesture can close the current playback window and return to the browser homepage in seconds. The closed playback content will be retained in the multi-window, and you can click to resume watching.

Summarize

The player is a container for content, and all its functions are designed to create an immersive viewing experience. Interaction design should be based on the principle of "content first", maintain restraint in design, and constantly polish product details.