Keywords

1 Introduction

In the era of mobile Internet, the information explosion is characterized by a higher degree of fragmentation. There are two main ways to connect user and information: search and feed. Feed is a simple and efficient way to help users get information, and recommends content for users based on their interests provided by the personalized algorithm. As a typical representative of the human-machine interactive recommendation system in the field of mobile Internet, feed has been increasingly appearing in social media, news, short video, and other mobile phone apps. In China, almost all mobile phone news apps adopt the form of feed to recommend users rich and diversified content that interests them. In the huge competition among news apps for users and their usage time, it is particularly important to optimize product’s user experience. Besides continuous efforts to improve the quality of content sources and recommendation algorithms, proper interface design is also essential.

Overseas researches on the reading experience of feed mainly focused on social media products (e.g., the feed of Facebook), studying users’ browsing behavior and their attention to information [1, 2]. In recent years, with the fast emergence of mobile news apps in China, Chinese scholars have begun to study the design of mobile news apps [3] and the impact of layout design on users’ visual browsing [4, 5]. Due to the limited research topics concerning news feed of mobile news apps, a comprehensive understanding of the reading experience of mobile news feed is needed, including how users browse mobile news feed, what demands they have for mobile news feed, what key factors affect users’ reading experience, as well as what should be done to improve the design.

Therefore, this research focuses on the reading experience of mobile news feed and conducts researches in two stages. Study 1 explores information that users pay attention to when browsing the news feed and reasons concerning users’ preference for products, and then draws a conclusion on critical factors affecting the reading experience of mobile news feed. Study 2 focuses on the specific design of one of the critical factors found in study 1. The research results provide design suggestions for mobile news feed products.

2 Related Work

When browsing through news feed, users are faced with an information-rich page composed of text and graphics and they pay different attention to the text and graphics. A joint study by Poynter Institute and Stanford University on online news on computer screens found that news readers started with the text, instead of graphics, after opening the website [6]. Based on an eye tracking research on the news feed of Facebook, Vraga, Bode, and Troller-Renfree [1] found that the style of the post matters for attention patterns, with richer content (e.g., pictures, links) enhancing attention especially for social and news posts. Sülflow, Schäfer, and Winter [2] studied what drives attention to content within the news feed of Facebook and what influences the selection of news posts. Their eye tracking measurement showed that users preferred to select news posts with content reinforcing their attitudes and they spent more time with news posts from sources with high credibility and selected them more frequently.

A good news product needs to achieve the goal of improving users’ reading efficiency and promote their immersive experience [3]. In recent years, as news apps in the Chinese market are extensively using feed to recommend content to users, Chinese researchers have begun their research work on the graphic layout design of news feed, in an attempt to enhance the reading efficiency and experience of users.

Currently, there are three typical templates of graphic layout designs among news apps in the Chinese market, namely the single-picture template, the three-picture template, and the large-picture template. Among them, the single-picture template has two forms, the text left and picture right type and the picture left and text right type, while in the large-picture template, a video snapshot or merely a picture is presented (see Table 1).

Table 1. Typical templates of graphic layout designs of news apps in the Chinese market
Full size table

Liu and Hou [4] studied the impact of graphic layout of mobile news feed with single-picture and three-picture template structures on users’ reading efficiency. They found that users presented the text-oriented visual browsing rule and their hot spots were on the text. That is to say, users tend to look at the text and choose content that they are interested in, and then browse the corresponding picture. Therefore, for most right-handed users, the text left and picture right type of single-picture template is less prone to block the text than the picture left and text right type. Lv et al. [5] further tested eye movement of right-handed and left-handed users when browsing news in the text left and picture right type and the picture left and text right type. Their research results confirmed the impact of the position of fingers on the hot spot. When fingers and pictures were on the same side, users had a larger browsing scope, which enabled them to explore more information on the page. However, in terms of fixation duration, both right-handed and left-handed users had longer fixation duration on news headlines under the condition of the picture left and text right type, i.e., this type made it easier to allow users to pay more attention to news headlines.

On the whole, past researches on the reading experience of mobile news feed mainly focus on social media platforms (e.g., Facebook) and news platforms (e.g., computer news websites and mobile news apps). On the one hand, it is not proper to directly apply results of researches on the news feed of social media platforms to the feed design of mobile news apps, because of their difference in both the product attribute and the form of the feed. On the other hand, current researches on the news feed of mobile news apps only focus on the graphic layout, and their design schemes are all with the single-picture template or with the three-picture template, which is much different from news feed with mixed templates in real products. As a result, past researches can only provide limited guidance on the actual feed design of mobile news apps.

Given limitations above and the broad usage of mobile news feed products in China, it is necessary to conduct more comprehensive and in-depth research on factors affecting users’ reading experience, so as to sharpen the understanding of experience of news feed users and provide design suggestions for products. To this end, this research studies news feed of mobile news apps and deeply probes into factors mattering the reading experience of mobile news feed and related design principles. The research was conducted in two phases. Study 1 examined critical factors influencing users’ reading experience of mobile news feed at first.

3 Study 1: On Factors Mattering Users’ Reading Experience of Mobile News Feed

3.1 Tasks

The task consisted of a free-viewing paradigm of three typical news feed of mobile news apps in the Chinese market, and followed by an in-depth interview. Free-viewing refers to the behavior of users when they view information freely without explicit search targets. As news feed is a typical product for users to kill time, free-viewing is the most important scenario in its daily use.

In the interview, participants were asked to browse the news feed of three typical mobile news apps in a given order, and then ranked them according to their preference and explained their reasons.

3.2 Participants

54 Chinese participants (27 males and 27 females) were recruited to participate the interview. They were all workers aged between 18–34 years old. To control the impact of past experience of using mobile news apps on users’ preference, it was set that each news app to be tested had 18 current users, and participants should use only one news app to be tested in the past month, with a frequency of 4 times a week or higher. Participants received a reward for their participation after the interview.

3.3 Stimulus

Materials were long screenshots of the news feed of three typical mobile news apps, namely A, B, and C (see Fig. 1). There were 25 pieces of news in each long screenshot, which was set according to the average number of pieces of news read by users every day. With the online proportion of product A as a reference, 6, 12, and 7 pieces of news were presented with the single-picture template, the three-picture template, and the large-picture template respectively. Detailed design principles of materials are as follows:

Fig. 1.
figure 1

Materials used in study 1 (part of the long screenshots)

Full size image

  • To avoid the impact of news headlines on users’ preference. News content shared by the three products was chosen. All schemes had the same news headline and source.

  • To avoid the impact of brand on users’ preference. Brand names and specific colors were removed, and icons at the bottom were replaced with generic ones.

  • To reproduce the online schemes of products. Templates (the single-picture template, the three-picture template, or the large-picture template), pictures, release time, number of comments, text font, font size, line spacing, spacing between paragraphs, margins on both sides, and spacing between pictures of every piece of news were as same as elements outlined in specifications of online news of the three products.

3.4 Apparatus

Three iPhone 6plus were used in the experiment (screen size: 5.5 in., resolution: 1920 × 1080). Each device presented a long screenshot of the news feed of one news app so that participants could simultaneously compare the three products at the end of the interview. In consideration of the impact of mobile phone background color and contracts on the reading experiences of participants, the screen brightness was set the same among three iPhone 6plus devices. The experiment was carried out indoors with fluorescent lamps.

3.5 Procedure

Before the experiment began, participants were told about the experimental procedures in detail. Then they were asked to browse through three news feeds marked with A, B, and C in a given order. After it, they would have a one-on-one interview with the staff, and rank the three schemes according to their preference and explain their reasons (comparing the three schemes presented on the three mobile phones was allowed). To avoid the effect of sequence on user’s preference, Latin square design was used for the order.

3.6 Results

User’s ranking of the three schemes was measured (see Table 2). 24% of users liked A most, while 56% preferred B and 20% preferred C.

Table 2. User’s ranking of three schemes
Full size table

After analyzing reasons why users preferred the news feed that ranked in the first place, we found three critical factors mattering their choices, namely graphic layout and image quality, ancillary information, and template combination.

Graphic Layout and Image Quality

  • Graphic layout

42.6% of participants mentioned that they preferred a scheme because of its graphic layout of the single-picture template (the text left and picture right type or the picture left and text right type). Their reading habits influenced their choices. Until now, there has no clear research conclusions on the superiority of the two types, and the results of two relevant studies showed that the two schemes had their strong points and weaknesses in the hotspot and fixation duration [4, 5].

“I prefer B. The text left and picture right type is more appropriate to my reading habit for I usually start with the text, and then move to the picture. If the picture is on the left, the page will look top-heavy and make me uncomfortable.”

“I prefer A. With the picture on the left, it is seemingly more straightforward than the text. The picture is the best information.”

  • Image quality

Image quality includes three aspects: information content, color, and cropping.

31.5% of participants mentioned that extracted pictures needed to concur with the topic in the news and convey as much information as possible.

“If the picture is attractive or well presented, it will increase my reading interest. I will click on it to see what it is about. Only the text is not that attractive.”

“In the news about “Six Walnuts” (the second news in the test material), the second graph (in scheme C) is proper, more realistic, and is more consistent with the headline, while pictures in the other two schemes look like advertisements.”

What is more, 3.7% of participants mentioned the color and cropping of pictures, and they hoped that pictures would have a comfortable color and be properly cropped.

“I like A in which pictures look warm, bright, clear, real but not glaring.”

“I don’t like B. Some pictures are not well cropped so that some words are missing.”

Ancillary Information

Ancillary information includes the source, release time, and number of comments. Since this study chooses news headlines that appear on all three products, there is no difference in the news source among three schemes. The release time and number of comments are consistent with the online designs of each product, so the three schemes are different in terms of these two elements.

31.5% of participants mentioned that they preferred a scheme because of it shows the release time and that they judged the timeliness of the news from this.

“I prefer B because it shows that the news was updated a few minutes ago and I know that this is the latest news.”

24.1% of participants mentioned the number of comments is quite important and they believed that it was one of the key messages to help them judge the quality of the news and whether it is clickbait.

“I like the scheme that displays the number of comments. The more comments the news has, the more eager I am to read it. If there is no comment, I will think it is unpopular and will not click on it.”

Template Combination

13.0% of participants mentioned the template combination in reasons of preference. They hoped that template combination would follow a certain rule that makes the page neat, orderly and more comfortable to read.

“I prefer the template combination in which a piece of news with one picture (single-picture template) is followed by two ones with three pictures (the three-picture template) so the overall page does not look so messy.”

“Horizontal (the three-picture template or the large-picture template) and vertical (the single-picture template) patterns should appear alternately in a transitional way. If a vertical pattern suddenly appears after horizontal ones, the page will look messy and make it painful to read.”

Based on analysis of users’ ranking and reference reasons, we extracted critical factors mattering the reading experience of news feed of mobile news apps:

  • Graphic layout and image quality. Graphic layout should be appropriate to users’ reading habits and image quality should be high (e.g., concurrence with the topic, deliver rich and straightforward information, and has proper brightness and cropping).

  • Ancillary information. Provide complete ancillary information about the news (including its release time and number of comments) to help users judge its timeliness and quality and decide whether to click on it for further reading.

  • Template combination. A neat and orderly template combinations that creates a good reading pace.

4 Study 2: The Effect of Template Combination on Reading Experience of Mobile News Feed

Study 1 shows that template combination is a critical factor that affects users’ preference for news feed of mobile news apps. What is the “neat and orderly” template combination that users prefer? Based on the three typical design templates (the single-picture template, the three-picture template, and the large-picture template), study 2 probes into the combination of these three templates, and measures the viewing paradigm of users under the condition of different template combination with the eye tracking methodology to find the “neat and orderly” template combination.

4.1 Tasks

The experiment followed a free-viewing paradigm. Participants were required to browse six news feeds with different template combinations in a given order, and then scored their satisfaction for each feed.

4.2 Participants

32 Chinese users were recruited to participate the eye tracking experiment. There were 17 males and 15 females, 26 workers and 6 students. All participants were aged between 18 and 24 and used mobile news apps more than 4 times a week in the past month. Their vision or corrected visual acuity were normal. They received a reward for their participation after the experiment.

4.3 Design of Experiment

The within-subject design was adopted for the experiment, with template combination as the independent variable. Given the fact that about four pieces of news appear on a single screen of mainstream mobile phones, templates were combined and designed for four pieces of news as a basic unit in the experiment. Based on the single-picture template and the three-picture template, the “3+1” combination was chosen to produce six combinations: A. All single-picture templates; B. Three single-picture templates and one three-picture template; C. Three single-picture templates and one large-picture template; D. All three-picture templates; E. Three three-picture templates and one single-picture template; and F. Three three-picture templates and one large-picture template. Figure 2 shows the smallest unit in each combination.

Fig. 2.
figure 2

Six template combinations (Color figure online)

Full size image

The dependent variables included both objective and subjective measurements. Objective measurements were from eye-tracking data, including users’ sequence of gaze point, heat map, and fixation duration. Because of high sampling frequency, high precision and low interference to users, the eye-tracking technology is widely used to emulate real human-computer interaction for the test [7], and serve as an important objective indicator to measure users’ experience of mobile apps [8]. Sequence of gaze point shows the browsing order of the interest area with a visible ratio greater than 50%. The heat map shows the attention aroused stimuli from participants with different colors and visualizes the tendency of fixation for analysis; red indicates more attention while green means less attention. Fixation duration corresponds to how long the fixation on a point in the region of interest last for and is used to analyze users’ attention on a specific region. The longer the fixation duration is, the more attractive the region is. In this experiment, with one piece of news as a region of interest, each participant’s overall fixation duration on all pieces of contents of each piece of news was calculated, and the average value of all participants was calculated. Subjective measurements were from questionnaires with three items, including “good organization”, “ease of reading”, and “overall satisfaction.” Likert Scale was used (1 = very unsatisfied, 3 = neutral, 5 = very satisfied). The higher the score was, the more satisfied the user was with the item.

4.4 Stimulus

The stimulus was based on six template combinations and input with news feed content. Most of the news were about entertainment and life which received much public attention, and news about finance, education, military, and sports were interspersed between. The total length was almost the same among testing schemes, with 70 to 100 pieces of news varied by schemes (see Table 3 for details). Participate would spend 1.5 to 2 min to browse the whole news feed on each scheme.

Table 3. Number of pieces of news in testing schemes
Full size table

4.5 Apparatus

A desktop eye tracker with a sampling rate of 30 Hz, an accuracy of 0.5°–1° and 9 calibration points was used in the experiment. Huawei P10 with a screen size of 5.1 in. and a resolution of 1920 × 1080 was used as the mobile phone device. The apparatus and experimental scenario are shown in Fig. 3.

Fig. 3.
figure 3

Apparatus and experimental scenario

Full size image

4.6 Procedure

Before the experiment, participants were told about the entire experimental procedures in detail. Then, they sit down in front of the eye tracker for the program running, eye tracker connection and calibration. In the pilot after calibration, participants were guided to familiarize themselves with the interface and operation of the mobile phone and browse the news feed according to their habits. After the above tasks, the formal experiment began. Participants needed to browse through six schemes of news feed according to a given order, schemes A and D first (in random order) and then B, C, E, and F (also in random order). Each time when they finished one scheme, they scored their satisfaction.

The experimental process was controlled by participants. After browsing one news feed, participants were required to fill in a questionnaire asking for their satisfaction about this scheme, and then they clicked the next button and moved to the next one. To prevent the fatigue, participants could take a break after finishing two schemes. When all six schemes were browsed through, and the questionnaires were complete, participants were asked to tell their preferences for the six schemes and reasons.

4.7 Results

Eye Tracking Results of Different Template Combinations

How Users Browse Mobile News Feed?

Figures 4 and 5 show the average fixation duration on news at different positions in schemes with mainly single-picture templates and three-picture templates respectively. The overall zigzag tendency indicates that instead of the one by one manner, participants browse news feed selectively, namely, in the way of skimming.

Fig. 4.
figure 4

Distribution of fixation duration on each piece of news in three schemes with mainly single-picture templates (unit: second)

Full size image
Fig. 5.
figure 5

Distribution of fixation duration on each piece of news in three schemes with mainly three-picture templates (unit: second)

Full size image

The type and combination of templates affect users’ behaviors of browsing the news feed. Table 4 shows the results about relative peaks of fixation duration of individual templates in different template combinations. The relative peak means that for two consecutive pieces of news if the fixation duration of the second one is longer than that of the first one, the second one is marked as a relative peak. As can be seen from Table 4, the proportion of relative peaks of fixation duration of the large-picture template, whether it was combined with the single-picture template (scheme C) or three-picture template (scheme F), was higher, which indicated that participants were unconsciously attracted more by the large picture. When a three-picture template was mixed with consecutive single-picture templates (scheme B), participants paid more attention to the three-picture template and focused less on the single-picture template. As for the case in which a single-picture template was mixed with consecutive three-picture templates (scheme E), only 5 of the 21 single-picture templates had the relative peak (accounting for 24%), which suggested that participants obviously paid more attention to the three-picture template, and single-picture template was less attracted and even be ignored.

Table 4. Proportion of relative peaks of fixation duration of individual templates in different schemes
Full size table

Browsing Behaviors under Schemes Mainly Based on Single-picture Templates

Figure 6 shows the sequence of gaze point and heat map of schemes A, B, and C. When consecutive single-picture templates were mixed with either three-picture template or large-picture template, participants had a relatively good reading pace.

Fig. 6.
figure 6

The sequence of gaze point and heat map of schemes A, B, and C mainly based on single-picture templates

Full size image

In the sequence of gaze point, compared with scheme A with all single-picture templates, the scan path of participants under the condition of the scheme C with three single-picture-templates and one large-picture template, remained nearly linear, with few movements or zigzags. When three single-picture templates were mixed with one three-picture template (scheme B), there was no specific rule in the scan path, and the gaze point of participants alternated between the text and the picture, which would cause a frequent switching between “text analysis” and “picture analysis” in the area of brain cognition.

The classic “F”-shaped reading pattern was not shown in the heat maps of schemes B and C, instead, the “1”-shaped pattern with a bulge from the middle to the two sides was distinct; when combined with the three-picture template, the “bulge” was more apparent.

Browsing Behaviors under Schemes Mainly Based on Three-picture Templates

Figure 7 shows the sequence of gaze point and heat map of schemes D, E, and F. When consecutive three-picture templates were mixed with single-picture template (scheme E), the reading pace was poor, but when mixed with the large-picture template (scheme F), there were fewer changes in the reading pattern, the reading pace was better.

Fig. 7.
figure 7

The sequence of gaze point and heat map of schemes D, E, and F mainly based on three-picture templates

Full size image

Compared with scheme D, scheme E showed the “F”-shaped reading pattern concave from the middle to the right because of the difference in structure between the three-picture template and the single-picture template. In the case of scheme F with three-picture template combined with large-picture template, both of the two templates have a top-bottom structure, few changes in the reading pattern was shown when compared with scheme D, and thus this combination is relatively balanced for the large-picture harmonizes with the three-picture ones.

In addition, from the sequence of gaze point and heat map, within the three-picture template, participants’ attention to pictures was concentrated on the first two pictures, especially the first one, and the third one was ignored. Therefore, when such template is used, the order of pictures is critical, and the most high-quality picture should be put in the first place to increase users’ attention to the news.

Subjective Evaluation of Different Template Combinations

From the subjective evaluation of participants, the effect of template combination on the evaluation of “good organization” was marginally significant, while its effect on “ease of reading” and “overall satisfaction” was not significant (see Table 5). In pairwise comparisons (see Table 6), the score of scheme E with three three-picture templates and one single-picture template was much lower than that of scheme A with all single-picture templates, which indicated that participants believed that the combination in scheme E did not look that neat and orderly when compared with scheme A.

Table 5. The effect of template combination on users’ satisfaction
Full size table
Table 6. Pairwise comparisons of template combinations in terms of “good organization” (Tukey’s test)
Full size table

5 Discussion

Study 1 explores users’ demands on the news feed of mobile apps and summarizes critical factors mattering user’s reading experience through the qualitative research method that combines free viewing paradigm and interview session together. Excluding the influence of news contents (i.e., headlines and sources), the graphic layout (whether it is appropriate to users’ reading habits) and image quality (whether it is concurrence with the topic, deliver rich and straightforward information, has proper brightness and cropping), the ancillary information (whether the release time and number of comments are complete), as well as the template combination (whether it is neat and orderly) will greatly affect users’ reading experience of the mobile news feed.

Based on the findings of study 1, study 2 further investigated what kind of template combination is neat and orderly to identify the better combination according to users’ eye-tracking data and subjective evaluation of six combinations. The results show that templates and their combination influence the browsing behavior of users and that there are differences in gaze behavior among different templates and even among different regions in the same template. The large-picture template is generally more attractive to users, with higher proportion of relative peaks of fixation duration. With the three-picture template, users usually focus their attention on the first two pictures and barely see the third one. As for different combinations, the main findings are as follows:

  • When consecutive single-picture templates are combined with large-picture template, the scan path remained nearly linear, with few movements or zigzags. Such scheme did not interrupt the pace of scanning.

  • When consecutive single-picture templates are combined with three-picture template, there was no specific rule in the scan path, and the gaze point of users alternated between the text and the picture, which would cause a frequent switching between “text analysis” and “picture analysis” in the area of brain cognition.

  • When consecutive three-picture templates are combined with single-picture template, because of the difference in structure between the two templates, users would think the page looked messy and unorganized, and the single-picture template was less attracted and more likely to be ignored by users, which greatly weakened the value of this piece of news.

  • When consecutive three-picture templates are combined with large-picture template, the two forms of templates had a top-bottom structure, few changes in the reading pattern was shown when compared with all three-pictures, and thus this combination was relatively balanced for the large-picture template harmonizes with the three-picture ones.

Based on the findings above, we propose the following design suggestions for the news feed of mobile news apps:

  1. 1.

    The combination of consecutive three-picture templates with single-picture template should be avoided as much as possible.

  2. 2.

    The large-picture template is a good choice to be combined with consecutive single-picture templates or consecutive three-picture templates since it can be well integrated. It should be noted that since the large picture receives much more attention, its quality has a significant impact on user experience and therefore high quality should be guaranteed. However, the quality of large pictures in current news feed vary, some of them are not appealing or have poor resolution, which greatly harms the reading experience.

  3. 3.

    When using three-picture template, put the high-quality picture in the first place could increase users’ attention to the news.

6 Conclusion and Future Work

This research studied users’ browsing behavior and demands on news feed of the mobile news apps. Two studies were conducted to find critical factors affecting users’ reading experience and investigated the influence of template combination to find out appropriate combinations for mobile news feed. Based on research results, proposals were put forward to guide the design of mobile news feed. The approach of this paper is based on current mainstream products in the Chinese market, with specific and limited choices in the value range of independent variables, user groups, and mobile devices. In the future, more work should be done to explore more diversified template combinations, broaden the scope of participants’ ages as well as the mobile devices of different sizes, so as to provide a whole guidance on the experience design of mobile news feed.