How the mobile app understands the user's eye

mobile phone and PC browsing, where is the difference?

We have for the QQ space PC version and QQ space mobile phone version of the eye movement test, let the user login to their QQ space free browsing friends dynamic, compare the results of two tests (as shown below), you can find that, compared with the use of computer browsing friends dynamic, users on the mobile phone browsing friends dynamic when the fingers slide more frequently, It is often a slide of the finger while browsing the content.

In the analysis of eye movement data based on the computer Web page, we mainly focus on the focus and trajectory of users, but for mobile phones, only to analyze what users see and what is not enough, it is necessary to pay attention to eye and finger sliding, to analyze the user's browsing characteristics, and assess the user's browsing efficiency.

In the QQ space mobile phone version of the process of eye movement test, we found that sometimes the user is obviously interested in a certain dynamic, but only slide the screen without looking at the contents of the above, until the content is adjusted to a certain range of time to start to see, this situation obviously reduces the user's browsing efficiency, increased the sliding distance of the fingers, There is no more content to see (pictured below). In this study, we call this scenario "inefficient sliding".

Low-efficiency sliding scenarios Let us think: Since the user is not from the top of the entire screen after browsing the screen to slide up, then the user's gaze on how much? How to optimize the design based on the gaze range to reduce the user's inefficient sliding? Can the user's gaze range change?

　　How big is the gaze on your fingertips?

QQ Space Mobile phone version For example, we used the Tobii X120 eye movement to test 24 users, allowing users to login their QQ space free browsing friends dynamic, the results show that the length of gaze range of mobile phone screen length (excluding the top bar and bar) of the proportion of about 75% ( The following figure).

Description

1, each map by participating in the corresponding terminal testing of the 6 users of the focus of the hot map superimposed, independent version refers to the QQ space client, combined version refers to the entrance from the QQ into the QQ space;

2, in the hot map, the deeper the color, the higher the representative's attention. For the superposition of hot maps, screen background is only to indicate the size of the screen, hot spots cover the area of the focus of attention, does not represent the actual content seen;

3. The red frame is marked to highlight the boundary of the gaze range.

Limited gaze range and illustrated app design

In the process of browsing an interesting dynamic, when the user wants to see the content does not appear/not fully visible in the scope of the gaze, by sliding the screen with their fingers to adjust the position of the content, after positioning to start browsing. Therefore, the user wants to see the content displayed in the scope of their gaze, can reduce the occurrence of inefficient sliding.

Illustrations are the main forms of social app content, among them, the picture occupies the larger area of the screen, and plays an important role, whether it is a friend of the life of news photos, or let information class dynamic more vivid and intuitive picture, are users used to judge the dynamic is interested in the key elements, It is also the focus of browsing in the context of the dynamic of interest. Because the user's gaze range is limited, what problems should be paid attention to when designing the height of the text and picture in the dynamic?

First, when the picture is vertical, the height is controlled within the gaze range.

In a single dynamic, the height of the horizontal graph usually does not exceed the gaze range, the user does not have to produce the low efficiency slide to be able to browse the text and the picture completely. But for the vertical map, the height should not be too long, should be controlled in the scope of attention. When the picture is not fully displayed in the gaze range, the user will be able to read the text and then slide the screen in the meantime will not look at the picture content, the picture position is good, usually is the picture top and the screen at the topmost alignment, only then starts to browse the picture, this not only gives the user to browse the picture to bring the trouble, moreover when the user wants to see the text again, You have to slide the screen again to see the text.

Second, when the text is longer, expand some of the text, the total height of the text and picture control within the gaze range.

For a long text of the picture dynamic, the user on the phone usually through the title, pictures to quickly determine whether they are interested in the dynamic, but the large text summary of the less attention. Sometimes the user is not attracted by the title, the slide screen directly skips the text summary, and when the picture appears on the screen, it is attracted by the picture, and then click on the Details page to read the full text. Therefore, the longer text part of the collection, the text and the height of the picture control in the gaze range, can reduce the user skips text when the low effect of sliding.

Thinking: Can the user's gaze range change?

By analyzing the characteristics of users browsing the social app content, the user's gaze range is closely related to the design of the graphic and graphic type dynamic. So, for different social apps, is the user's gaze range fixed?

In the QQ space mobile phone version of the eye movement test, we also targeted at Facebook mobile users to carry out eye movement test, so that 6 of users free to browse Facebook, the user to use Facebook when the scope of attention (pictured below).

The length of Facebook's gaze ranges from 87% to the length of the phone's screen (excluding bar and bar), longer than the length of the QQ space phone's gaze range. In order to better analyze the formation of the gaze range, we also study the user's gaze when browsing a single dynamic.

Facebook's dynamic is the card design, two dynamic between the interval is more obvious, users browse a dynamic, usually slide it to the top of the screen to start browsing, in addition to the overall height of text and pictures in a screen, users can see the bottom of the picture in a screen, This allows users to browse a dynamic process of their own interest, you can directly in a screen full view of text and pictures, rarely read the text will begin to slide the screen to adjust the position of the picture, thus allowing the length of the gaze range increased.

Thus, we infer that in the use of social apps, the user's gaze is not fixed, through the design changes can enlarge the user's gaze, which not only better use the size of the screen, but also reduce the user's inefficient sliding, improve browsing efficiency. Of course, this is only compared to the QQ space mobile phone version and Facebook mobile version of the inference, the focus on what design elements of the impact of design changes in the scope of the specific impact of the mechanism is worth further in-depth study of the problem.

　Summary:

This paper mainly reveals the characteristics of users browsing the social app, and tries to bring some inspiration to the design of the app from the view of browsing experience.

In view of the user's gaze range and the low efficiency sliding problem, how to enlarge the gaze range and reduce the inefficient sliding through the design change is a problem to be considered when designing the dynamic presentation way in the social app.

At the same time, what are the characteristics of the user's gaze range for other types of apps, such as information? What are the similarities and differences in the gaze range of social apps? Can you summarize some of the guidelines for improving the design of app browsing experience by comparing the gaze range of different types of apps? For these problems, We will continue to carry out relevant research to find the answer.