Keywords

1 Introduction

In the era of mobile Internet, mobile news apps, based on AI algorithms, becomes an essential source for users to obtain information. They currently rank fourth in the mobile internet industry in China regarding app session, second only to instant message, long video, and short video apps [1]. Continuous optimization of the news reading experience on mobile phones is one of the critical factors to improve sessions of news apps.

At present, researches on reading at domestic and foreign mainly focus on reading on computers or in print with materials such as textbooks, novels, and Chinese exam papers, and students selected as samples. However, due to the differences between mobile phones and computer screens in size, between news and texts, and between other wider range of users and students, existing research conclusions have limited guidance on optimizing the reading experience of mobile news apps.

Therefore, this study focuses on the news reading experience on mobile phones and conducts researches in two stages. Study I explored critical factors that influence the users’ mobile news reading experience. While Study II, based on findings of Study I, focuses on how to optimize the body text typesetting, one of the key factors, to improve the reading experience. The research results guide the optimization of the reading detail pages of mobile new apps.

2 Literature Review

Current domestic and foreign researches on reading and mobile new apps are mainly divided into three categories: (1) researches on reading fatigue, mainly to explore effects of factors such as task difficulty, mental load and text typesetting; (2) researches on reading efficiency, mainly to explore the effects of text typesetting, contrast, reading material difficulty and other factors; and (3) researches on users’ experience of mobile new apps, mainly to explore the effects of factors including information and navigation structure.

2.1 Researches on Reading Fatigue

Research methods to judge subjects’ levels of reading fatigue can be divided into three categories: (1) from characteristics of subjects, their physiological parameters are obtained by eye tracking/electroencephalogram/Galvanic skin response monitoring devices; (2) based on the subjective feelings of subjects, they are asked about to subjective feelings after completing the task; and (3) from the task performance, performances of subjects in a specific task are evaluated.

Chi and Lin compared seven indicators of measuring fatigue, including pupil diameter, accommodation power, visual acuity, critical fusion frequency (CFF), eye movement velocity, subjective rating of visual fatigue, and task performance, and found that pupil diameter, eye movement velocity, and subjective rating of visual fatigue were connected to visual fatigue [2]. When studying visual fatigue caused by visual display terminals (VDTs) tasks, Chi et al. found that as tasks were being performed, blink frequency of subjects would increase, and the growth tended to diminish and eventually stabilizes after 30 min [3]. Researches done by Yong and others showed that fatigue would cause an increased pupil diameter while increased mental load would cause a deceased pupil diameter [4], which was consistent with previous findings of Loewenstein and Loewenfeld [5]. When exploring effects of font size on the laptop screen on reading fatigue, Mingchuan found that Song typeface would cause the lowest level of reading fatigue and the smallest change in pupil diameter under the same time of reading [6].

2.2 Researches on Reading Efficiency

In early studies on English reading, Legge et al. measured the reading rate as a function of the contrast (0.90, 0.30, 0.10 and 0.03) and character size (0.25°, 1°, and 1.2°) of text for subjects with normal vision with the method of gliding leading format, and found that reading speed sharply dropped regardless of the font size when the contrast was 0.1 [7]. However, results of studies on Chinese reading were different. Lian and others adopted RSVP to study the effects of font size, stroke and contrast on Chinese text reading on a 19-in. LCD screen. They found that the more the stroke was, the slower the reading speed was and that the higher the contrast was, the faster the reading speed was. The font size had an effect of “critical font size.” When the font size was smaller than the critical font size, the reading speed increased as the font size increased; when the font size was larger than the critical font size, the reading speed was substantially the same [8]. Liying studied the effects of font size, font type, word spacing and line spacing on the reading speed and accuracy of individuals with the macular disease when reading print materials, and found that font size, font type, and line spacing affected their speed and accuracy. Among them, results on font size were consistent with Lian’s theory of “critical font size”; the reading speed and accuracy in line spacing 1.0 were significantly higher than those in 1.0, but when line spacing 3.0 failed to be appropriate to reading habits of subjects, it would distract subjects and lower their reading speed and accuracy [9]. Rayner’s research found that increases difficulties of articles would lead to shorter saccade amplitude [10]. Philips and Edelman found that saccade amplitude accounted for much more of the variability and improvement in performance than did fixation duration in visual search tasks [11]. Therefore, saccade amplitude can also be regarded as an indicator of reading efficiency and difficulty of recognition.

2.3 Researches on Mobile News Apps

Huayu explored the information architecture design and navigation layout design principles of mobile news apps from the perspective of users’ cognition. He believed that the design of mobile news apps needed to reduce the cost in searching, cognition, and learning of users, improve their reading efficiency, and create an immersive experience [12]. Ting and Wenjun, based on favorite news apps in the Chinese market, discussed eye movement in visual browsing and visual search of three basic graphic layout structures, i.e., the picture left and text right type, the text left and picture right type, and the text above and picture below type. They found that the text above and picture below type had the highest visual search efficiency [13]. Nevertheless, researches on detail pages of mobile news apps are hardly available now.

By reviewing previous studies, we find that there is much research experience on the key factors and measurement methods that affect reading efficiency and reading fatigue, but limitations also exist. (1) Existing studies are mainly about the large-size screen on PCs, and only a few studies are on mobile phones; (2) independent variables have limited numbers but too large value range; and (3) there are no studies on news detail pages. Therefore, existing research results can hardly directly guide the design of detail pages of news apps.

Given limitations above and the broad application of mobile news apps among Chinese netizens, it is necessary to conduct in-depth research on factors affecting the reading experience and specific design principles of mobile news detail pages, so as to guide the optimization of the detail pages of news apps and enhance their reading experience. To this end, this paper is divided into two parts to study factors mattering the experience of reading news detail pages and body text typesetting of news detail pages respectively.

3 Study I: On Factors Mattering the Experience of Reading News Detail Pages

This study focuses on the detail pages of mobile news apps and explores factors affecting the reading experience of Chinese users.

3.1 Research Focus and Methodology

During the one-on-one interview, users were invited to read three designs of news detail pages, and rank them with reasons given. We would explore critical factors affecting Chinese users’ reading experience of news detail pages by analyzing those reasons.

The three design schemes of news detail pages for comparison were from the three mobile apps with the highest DAU in the Chinese market in January 2018, which were numbered by A, B, and C respectively. To avoid effects of users’ degrees of interest and the number of pictures, every subject in the experiment was asked to read one piece of social news and one piece of entertainment news that was most interesting for and read by Chinese users. Social news represented news with few pictures while entertainment represented news with many pictures. To balance the sequence effects, the order of presentation of different schemes was grouped and randomized before the interview, and then the grouping of users was also randomized. After users read the three different designs, researchers would have interviews with them about their ranking and reasons given.

All users were required to finish two tasks:

Task I:

  • A. Users randomly read the three design schemes, A, B, and C, of the same piece of social news.

  • B. Users compared the three design schemes of detail pages, and ranked them according to their reading experience.

  • C. Users explained their reasons for ranking in the interview sessions.

Task II:

  • A. Users randomly read the three design schemes, A, B, and C, of the same piece of entertainment news

  • B. Users compared the three design schemes of detail pages, and ranked them according to their reading experience

  • C. Users explained their reasons for ranking in the interview sessions.

3.2 Participants

Given that young workers were primary users of mobile news, 54 participants (27 males and 27 females) were all workers aged between 18–34 years old who used mobile news apps more than 4 times a week. They received a reward for their participation after the interview.

3.3 Design of Materials

Materials were designed according to three principles: to reproduce the real conditions of products, to avoid effects of content, and to avoid effects of brands.

Therefore, news content shared by three products was chosen for the experiment. Materials had the same headlines, body text, pictures and author names, but were typeset according to design specifications of products A, B, and C respectively (see Table 1, original designs of title, text font, font size, line spacing, spacing between paragraphs, margins on both sides, and other elements, were kept). Brand information (such as brand names, brand colors, special operation icon) was also removed (see Fig. 1). Besides, because of the effects of background color and contrast [14] on the reading experience, all materials had a white background color and were presented with the same screen brightness on mobile phones.

Table 1. Material design specification
Full size table
Fig. 1.
figure 1

Typography designs A, B, and C of Social and Entertainment News

Full size image

3.4 Results

Based on the ranking of social news and entertainment news, the results about users’ reading experience of the three new detail pages are as follows (Table 2):

Table 2. Rank of design schemes of news detail pages.
Full size table

In the case of removed brand information (without brand logo, brand color, or special operation icon), A was most liked by users, followed by B, and finally C.

By analyzing reasons given by users for their favorite products, we found that the body text typesetting, headline typesetting and information in the description section were the critical factors affecting users’ reading experience.

  1. (1)

    Body text typesetting. 57% of users emphasized the font size and line spacing, and preferred clear and recognizable text and obvious line spacing. In terms of specific schemes, most users preferred both A and C.

“The font size in scheme A is the best. Bigger font size makes me feel the text is not that cramped.” – User 17, female, 19 years old

“I like scheme C. Its line spacing is large, but its font size a little small.” – User 50, male, 33 years old

  1. (2)

    Information in the description section. The description section is shown in the red box below (see Fig. 2), including the author’s name and profile photo, release time, comments, and followers. 46% of users emphasized the news source, release time, and profile photo of the author and hoped that such information was authentic, abundant and complete. In terms of specific schemes, most users believed that A was the best, better than B and C.

    Fig. 2.
    figure 2

    Description sections of Social and Entertainment News

    Full size image

“In scheme A, there is information about the source and release time, which I pay more attention to in news to judge its truthfulness/reliability.” – User 23, female, age 28 years old

“I prefer the author’s profile photo in scheme A program. Words in the profile photo of scheme B are too small to recognize.” – User 13, male, 22 years old

  1. (3)

    Headline typesetting. 24% of users emphasized the color and font size of headlines, and expected large and bold headlines that were eye-catching and easy to read. In terms of specific schemes, most users believed that A was the best, better than the other two.

“The headline in scheme A program is large and clear in a bold and eye-catching color.” – User 43, male, 29 years old

“The color of headline in scheme A is darker and bolder than scheme C, and is more appropriate for headlines.” – User 33, male, 32 years old

3.5 Discussion

From reasons given by users, critical factors mattering the reading experience include:

  1. (1)

    Clear body text that is easy to read. Users demanded proper font size and line spacing, recognizable font and clear line breaks that do not lead to crowded or cramped text.

  2. (2)

    Authentic, abundant and complete information in the description section. Users demanded complete and true information about the news source/author, release time, originality, and profile photo of the author.

  3. (3)

    Bold and eye-catching headlines. Users demanded bold and eye-catching font of headlines, and the large font size and dark font color in scheme A were preferred by users.

Among the three factors, typesetting of the body text was the most important, which occupied the essential position of the entire page. There was no definitive conclusion or standard about the favorite combination of font size and line spacing of body text. Some users preferred scheme C (font size: 51px, line spacing: 2.0), and believed that larger line spacing created better reading experience while some users preferred schemes A and B (font size: 54px, line spacing: 1.5), and thought that the font size was large and the font clear which made the text easy to read. Therefore, it is necessary to conduct further researches on the font size and line spacing of the body text of news detail pages to explore their effects on users’ reading experience.

4 Study II: On Body Text Typesetting of News Detail Pages

This study focuses on the body text typesetting of news detail pages and explores effects of different font sizes and line spacing on users’ reading experience.

4.1 Research Framework

In previous studies, factors such as font type, font size, line spacing, word spacing, word boundaries, background color [14], and contrast influence users’ reading experience. Reading fatigue and reading efficiency are mainly used to assess users’ reading experience. Common indicators of visual fatigue include blinking frequency, pupil diameter, CFF, LF/HF, and subjective level of fatigue, while those of reading efficiency include reading speed, reading accuracy, vertical saccade, saccade amplitude, fixation duration, number of fixations, regression count and so on.

Study I shows that the body text typesetting is one of the critical factors affecting users’ preference for news detail pages and that users have different opinions on better font size and line spacing. Therefore, it is necessary to continue to explore the effects of different font sizes and line spacing on reading fatigue and reading efficiency. The research framework of Study II is as follows (see Fig. 3).

Fig. 3.
figure 3

Research framework

Full size image

4.2 Experimental Hypotheses

  • Effect of Font Size and Line Spacing on Reading Fatigue.

  • H1: Font size affects users’ reading fatigue.

  • H2: Line spacing affects users’ reading fatigue.

  • Effect of Font Size and Line Spacing on Reading Efficiency.

  • H3: Font size affects users’ reading efficiency.

  • H4: Line spacing affects users’ reading efficiency.

  • Effect of Font Size and Line Spacing on Subjective Satisfaction.

  • H5: Font size affects users’ subjective satisfaction.

  • H6: Line spacing affects users’ subjective satisfaction.

4.3 Methodology

Participants.

60 users, including 30 male and 30 female workers, participated in the experiment. They were aged between 23 and 35 with a university degree or above, and used mobile news apps more than 4 times a week. Their vision or corrected visual acuity was normal. They received a reward for their participation.

Experimental Design.

The 4 × 5 between-subject design was adopted for the experiment. Variable 1 was font size at four levels, i.e. 51px, 54px, 57px, and 60px, while variable 2 was line spacing at five levels, i.e. 1.4, 1.5, 1.6, 1.7, and 2.0. The value range of font size and line spacing was based on the design of the top six news apps with the highest DAU in the Chinese market in January 2018. The experiment included 20 typography schemes (see Table 3), and users were randomly divided into 4 groups according to the font size, and each group read news detail pages with the same font size but five different line spacing and content.

Table 3. Experimental combinations.
Full size table

Three dependent variables were measured in the experiment: (1) visual fatigue, including blink frequency and pupil diameter. A higher blink frequency and a smaller pupil diameter indicate a higher level of mental load of the user; (2) reading efficiency, including reading speed, vertical saccade and saccade amplitude. A higher reading speed indicates higher reading efficiency. A smaller vertical saccade indicates fewer reading errors and higher reading efficiency. A larger saccade amplitude indicates getting more information before saccade and higher reading efficiency. (3) subjective satisfaction, including proper density, easy recognition and, overall satisfaction.

The questionnaire for subjective satisfaction is as follows:

Please rate the satisfaction of the following three items separately and give reasons. (The score is from one to five, of which one is very dissatisfied, three is neutral, and five is very satisfactory)

 

1.4

1.5

1.6

1.7

2.0

Proper density that is comfortable for reading

     

Proper font size that is easy to identify

     

Overall satisfaction

     

Materials.

Six pieces of social news articles were chosen from news apps, one of which was for the pilot and the other five of which were for the formal experiment. With 700–800 words, all news read smoothly and was free from mistakes such as syntactic, semantic or word-boundary ambiguities. Each article was evaluated for its difficulty, and simple words accounted for around 70% of its total words. The difference in the proportion of simple words among the five articles was less than 5% to control the difficulty of articles.

To avoid the effect of content on users, 20 scheme designs were produced for the five articles, and a total of 100 materials were produced for the formal experiment (Fig. 4).

Fig. 4.
figure 4

Twenty schemes of one article

Full size image

Apparatus and Conditions.

The experimental equipment included 2 TOBIIX60 eye trackers, 2 sets of handheld equipment operation tables for placing mobile phones and eye trackers (the user is 60–65 cm away from the eye tracker), 2 laptops, 2 Logitech cameras, 12 iPhone 6plus (screen size: 5.5 in., resolution: 1920 × 1080, one of the most popular screen sizes on the market), two of which were used for eye movement experiments and the other ten of which were divided into two groups for scheme comparisons. The screen brightness of each iPhone 6plus remained the same. The experiment was carried out in a closed conference room with fluorescent lamps.

Procedures.

H5 links specially developed for this experiment was used in the whole process, and opened on iPhone 6plus with the same browser app for reading.

  1. (1)

    Before the experiment, participants were told about the entire experimental procedures in detail.

  2. (2)

    Eye tracker calibration. Users sit down in front of the eye tracker for calibration.

  3. (3)

    Pilot. Users were instructed to get familiar with the experimental procedures. They read the news article for the pilot according to their own habits, and scored their satisfaction of the design of the article.

  4. (4)

    Formal experiment. Participants were asked to read five news detail pages with different content and designs. Each time when they finished reading one detail page, they scored their satisfaction from three aspects, including proper density, easy recognition, and overall satisfaction.

  5. (5)

    Then participants were given five mobile phones that displayed one article but with five different typography (the same font size but 5 different line spacing), and asked to score the subjective satisfaction according to their own preferences and explain the reasons.

To avoid sequence effects, Materials in each group were made for H5 links in advance based on the Latin square design, ensuring that the probability of each article and each design appearing in the first, second, third, fourth, and fifth place was the same.

Data Analysis.

All data were analyzed by repeated measures ANOVA using SPSS20 software package. p < 0.05 was considered significant.

4.4 Results

Effect of Font Size and Line Spacing on Reading Fatigue

The effect of font size on blink frequency was not significant (F(3,59) = 0.37, p > 0.05); the effect of font size on pupil diameter was not significant (F(3,59) = 1.314, p > 0.05). Therefore, H1 hypothesis is not correct (Tables 4 and 5).

Table 4. Blink frequency and pupil diameter influenced by font size only (n = 60).
Full size table
Table 5. Blink frequency and pupil diameter influenced by line spacing only (n = 60).
Full size table

The effect of line spacing on blink frequency was not significant (F (4,59) =1.11, p > 0.05); the effect of line spacing on pupil diameter was not significant (F (4,59) = 1.51, p > 0.05). Therefore, H1 hypothesis is not correct.

Effect of Font Size and Line Spacing on Reading Efficiency

The effect of font size on reading speed was not significant (F(3,59) = 0.46, p > 0.05); the effect of font size on vertical saccade was not significant (F(3,59) = 1.49, p > 0.05);the effect of font size on saccade amplitude was marginally significant (F(3,59) = 2.18, p < 0.1), and saccade amplitude in font size 57px was significantly higher than that in 51px in pairwise comparisons. Therefore, H3 hypothesis is partially correct.

The effect of line spacing on reading speed was not significant (F (4,59) = 0.90, p > 0.05); the effect of line spacing on vertical saccade was not significant (F (4,59) = 1.24, p > 0.05); the effect of line spacing on saccade amplitude was not significant (F (4,59) = 1.09, p > 0.05). Therefore, H4 hypothesis is not correct (Tables 6 and 7).

Table 6. Reading speed, vertical saccade and saccade amplitude influenced by font size only (n = 60).
Full size table
Table 7. Reading speed, vertical saccade and saccade amplitude influenced by line spacing only (n = 60).
Full size table

Effect of Font Size and Line Spacing on Subjective Satisfaction.

The effect of font size on satisfaction of proper density was not significant (F(3, 59) = 0.68, p > 0.05); the effect of font size on satisfaction of easy recognition was not significant (F(3, 59) = 1.55, p > 0.05); the effect of font size on overall satisfaction was not significant (F(3, 59) = 1.85, p > 0.05). Therefore, H5 hypothesis is not correct.

The effect of line spacing on satisfaction of proper density was not significant (F(4,59) = 1.42, p > 0.05); the effect of line spacing on satisfaction of easy recognition was not significant (F(4,59) = 0.53, p > 0.05; the effect of line spacing on overall satisfaction was significant (F(4,59) = 4.87, p < 0.05), and overall satisfaction in line spacing 2.0 was significantly higher than that in 1.4(p < 0.01), 1.5(p < 0.01) and 1.6(p < 0.05), and overall satisfaction in line spacing 1.7 was significantly higher than that in 1.4(p < 0.05) and 1.5(p < 0.05) in pairwise comparisons. Therefore, H6 hypothesis is partially correct (Tables 8 and 9).

Table 8. Subjective satisfaction influenced by font size only (n = 60)
Full size table
Table 9. Subjective satisfaction influenced by line spacing only (n = 60)
Full size table

4.5 Discussion

(1) Effect of Font Size and Line Spacing on Reading Fatigue

Effects of font size and line spacing on blink frequency and pupil diameter were not significant. The value range of independent variables was based on the six most popular products in the market, and existing differences in their designs were not enough to cause differences in reading fatigue.

(2) Effect of Font Size and Line Spacing on Reading Efficiency

Effects of line spacing on reading speed, vertical saccade and saccade amplitude were not significant. Effects of font size on reading speed and vertical saccade were not significant, but its effect on saccade amplitude was marginally significant. Saccade amplitude in font size 57px was significantly less than that in 51px, which indicates that users had higher efficiency when reading materials with a larger font size of 57px.

(3) Effect of Font Size and Line Spacing on Subjective Satisfaction

Effects of font size on proper density, easy recognition, and overall satisfaction were not significant. The difference in overall satisfaction between different line spacing was significant. Pairwise comparisons showed that satisfaction in 2.0 was significantly higher than that in 1.4, 1.5 and 1.6, overall satisfaction in 1.7 was significantly higher than that in 1.4 and 1.5, and different in satisfaction between 2.0 and 1.7 was not significant. It indicates that larger line spacing had higher satisfaction. One user commented, “when the line spacing was small, the content presented on one page was too much and difficult to read. I don’t like such typesetting.”

(4) Interrelation and Difference between Subjective Satisfaction and Eye Movement Indicators

The difference in subjective satisfaction between different font sizes was not significant but the difference in saccade amplitude between font sizes 51px and 57px was significant. It shows that the users could not distinguish the advantages and disadvantages of 9px in their subjective feeing, and font size designs of mainstream mobile news apps on the market were subjectively acceptable for users. However, the eye tracker could still capture even a slight difference between different font sizes.

Difference between different line spacing in reading fatigue and reading efficiency was not significant but in subjective satisfaction was significant. Satisfaction in line spacing 1.7 and 2.0 was significantly higher than that in 1.4 and 1.5. In other words, a larger line spacing would cause a higher satisfaction. By reviewing reasons given by users for their scores of subjective satisfactions, we found that one user commented, “too small line spacing (such as 1.4 or 1.5) would make me feel there was too much content. I was pressured and could not believe I could finish it. I felt as if I was reading something formal such as academic papers or government announcements. A larger line spacing (such as 1.7, or 2.0) was more relaxing for casual news reading.” In other words, when scoring their subjective satisfaction, users took into accounts more conditions of daily life than reading experience in the experiment, which led to inconsistencies between subjective and objective indicators.

5 Conclusion

Critical factors mattering the reading experience of news detail pages include body text and headline typesetting and information in the description section.

When the detail pages of mobile news apps are designed, the following principles can be referred to:

  • A comfortable and clear body text typesetting. Choose 57px font size because saccade amplitude in 57px is significantly larger than that in 51px, and the reading efficiency is also better. Avoid line spacing 1.4 and 1.5 which make the text too crowded and have significantly lower overall satisfaction than line spacing 1.7 and 2.0.

  • An eye-catching and bold headline typesetting. The font size needs to be large, and the font color be dark. 72px and darker colors such as #222222 are good choices.

  • Authentic, abundant and complete information in the description section. The author’s profile photo should be true, and the release time be detailed to the moment.

6 Limitations and Future Studies

This research program, mainly studying detail pages of the mobile news apps, focuses on effects of the font size and line spacing of body text typesetting on the reading experience. Its approach is based on current mainstream designs, with specific and limited choices in the value range of independent variables, user groups, and mobile devices. Its results proved to exist within certain limits.

There are extensive researches on Chinese reading in the field of psychology. However, a few studies in China are about reading Chinese on mobile phones. We propose that future studies will, based on the experience in this paper, first expand the value range of independent variables, especially font size to enrich the experimental results. The range of line spacing should also be supplemented and expanded to explore continuous changes. Secondly, the scope of ages and educational background of subjects will be broadened for comparisons of different user groups. Thirdly, mobile devices of different sizes can also be included. Their distance with users when being used are different, which will cause different reading experience. Such more comprehensive experimental results have a wide range of application to design mobile news apps.