Reading Online Text: A Comparison of Four White Space Layouts

by Barbara Chaparro, J. Ryan Baker, A. Dawn Shaikh, Spring Hull, & Laurie Brady

Summary: In this study, reading performance with four white space layouts was compared. Margins surrounding the text and leading (space between lines) were manipulated to generate the four white space conditions. Results show that the use of margins affected both reading speed and comprehension in that participants read the Margin text slower, but comprehended more than the No Margin text. Participants were also generally more satisfied with the text with margins. Leading was not shown to impact reading performance but did influence overall user preference.

Introduction

Research investigating the proper amount of "white space"on a web page has produced mixed results (Chaparro & Bernard, 2001; Spool, 1997). The latest recommendation by the National Cancer Institute (2003) is to limit the amount of white space on pages that are used for scanning and searching. Few recommendations, however, are provided for the amount of white space for online text passages such as short stories, news articles, or online novels.

To examine the effects of white space on reading performance, this study compared four white space layouts that manipulated margins and leading. A margin was defined as the white space surrounding the text passage on the left, right, top, and bottom. For purposes of this study, margins on a web page were manipulated such that 10 mm of white space surrounded the text (Margin) or 2 mm of white space surrounded the text (No Margin). Leading was defined as the vertical distance from the baseline of one line of text to the baseline of the next line (i.e., space between lines of text). This space was manipulated to have 5 mm between lines (Optimal) or 4 mm between lines (Sub-Optimal). Participants read online text passages from each of the four possible white space layout combinations: (1) Margins & Optimal Leading; (2) Margins & Sub-Optimal Leading; (3) No Margins & Optimal Leading; and (4) No Margins & Sub-Optimal Leading. Figures 1 through 4 (below) show examples of each of the four white space conditions.

Figure 1. Margins, Optimal Leading

Figure 1. Margins, Optimal Leading

Figure 2. Margins, Sub-Optimal Leading

Figure 2. Margins, Sub-Optimal Leading

Figure 3. No Margins, Optimal Leading

Figure 3. No Margins, Optimal Leading

Figure 4. No Margins, Sub-Optimal Leading

Figure 4. No Margins, Sub-Optimal Leading

Methods

Participants

Twenty college students (10 male, 10 female) with normal or corrected vision participated in the study and received compensation of $25. One female participant was unable to complete more than half of the study and was eliminated from the analysis. Eighty-nine percent of the participants reported visiting websites daily and 10.5% reported visiting websites only a few times per week. Primary online activities reported included e-mail, browsing, searching for information, and instant messaging. Eleven percent of the users reported reading online 24 – 40+ hours per week, 26% reported reading 7 – 24 hours per week, and 63% reported reading 0 – 6 hours per week.

Materials

Text passages used in this study were chosen from SAT and ACT practice examinations and contained approximately 800 words each (M = 802.00, SD=59.68). The passages were presented in a graphical format to incorporate the white space layout features discussed above. Passages were randomly presented using a Visual Basic 6.0 program which captured reading time, and were presented on a Dell Inspiron 5100 Laptop with a 15"display running 1400 x 1050 screen resolution. Passages were also presented on two consecutive pages; users clicked on an arrow at the bottom of each page to advance to a subsequent page or return to a previous page. No scrolling was required. Users read the passages at a distance of approximately 50 cm.

Procedure

Participants were randomly assigned to read two passages from one of the four conditions. In each condition, they spent approximately 20 minutes reading two documents. They were asked to read each document at their own pace. After reading each passage, the participant was given eight comprehension questions about the passage. Participants were permitted to go back to the passage to look up the answers to the questions, but were advised that they only had 5 minutes to do so. After reading both documents, the participants completed a questionnaire regarding their reading satisfaction. Participants then took a short break and then repeated the procedure for the other conditions. After all four conditions were completed participants were shown a sample page with images of the four conditions and asked to state their preference as to which layout they liked best. The order of the conditions and passages was counterbalanced across participants.

Results

Reading performance

Reading time was averaged across passages for each condition and converted to words per minute. Comprehension scores were computed as a sum score out of a total eight possible. A two-way within subjects ANOVA revealed a marginally significant main effect of margins for reading speed (F(1,17) = 3.61, p =.07), with passages in the No Margins condition read faster than those with Margins. There was no main effect for leading or interaction between margins and leading.

Examination of the comprehension scores also revealed a main effect of margins (F(1,17) = 8.34, p = .01). Comprehension of the Margins was higher than that of the No Margins. This indicates that while the participants read the Margin passages slower, they comprehended more than when reading the No Margin passages. There was no main effect for leading or interaction between margins and leading.

Table 1. Mean (SD) Reading Performance Across Conditions

 

Margins, Optimal Leading

Margins, SubOptimal Leading

No Margins, Optimal Leading

No Margins, Sub-Optimal Leading

Reading Speed (WPM)

176.73(38.39)

182.34(56.43)

185.42(50.08)

200.94(62.04)

Comprehension

5.17(1.08)

5.06(1.38)

4.28(1.32)

4.58 (1.36)

 

Figure 5. Effect on Margins on Reading Speed.

Figure 5. Effect of Margins on Comprehension.

Figure 5. Effect of Margins on Reading Speed and Comprehension.

Satisfaction

Results revealed a significant main effect of Margins on satisfaction. Users favored the Margin condition, reporting lower levels of physical fatigue during reading and greater satisfaction with the layout for the presentation of textbook, leisure, and news material. Results also showed a significant Margin x Leading interaction for questions related to satisfaction with the overall layout and perceived eyestrain. Post-hoc analysis showed that in both cases, the No Margins, Sub-Optimal Leading condition was significantly less satisfying and more strenuous.

Preference

Results from a Friedman X2 test showed a significant preference for the Margins, Optimal Leading condition ( X2 (3, N = 18) = 8.80, p < .05). Post-hoc analysis showed this condition to be significantly preferred over the No Margins, Sub-Optimal Leading condition. Preference for each condition (percent of participants choosing each layout as their first choice) is shown in Figure 6.

Figure 6. Preference of white space passages.

Figure 6. Preference of white space passages. M-OL= Margins - Optimal Leading; M-SL = Margins, Sub-Optimal Leading; NM-OL = No Margins, Optimal Leading; NM-SL = No Margins, Sub-Optimal Leading

Discussion

Results from this study showed that the manipulation of the Margin white space affected both reading speed and comprehension; participants read the Margin text slower, but comprehended more than the No Margin text. In general, the results favored the use of Margins. The manipulation of Leading did not seem to impact reading performance, but did result in lower satisfaction with the layout and perceived eyestrain when paired with No Margins. Forty-seven percent of participants chose the Margins, Optimal Leading layout as their favorite, while 50% of the participants chose the No Margins, Sub-Optimal Leading text as their least favorite. The second preferred combination was the No Margin, Optimal Leading condition. Interestingly, those that chose this condition as the best layout said that they liked the spacing between the lines and indicated the font looked larger and was easier to read. So, while leading did not affect reading performance, it did appear to influence user preference.

The use of white space for online reading is important as the number of people using online textbooks and materials continues to grow at a steady rate ("Another non-traditional option,"n.d.). Figure 7 shows an example of two websites offering short stories. As shown, each utilizes a different amount of white space. The top example is very typical of a selection from a short story site and uses very little margin. Based on the results of this study, it is possible that reader comprehension may be reduced for this passage. Designers should be aware of the potential influence of white space on reading performance. Future research needs to be done to examine the role of white space in online reading. While this study investigated the use of margins and leading, future studies could examine the impact of such variables in multi-column displays and with various line lengths.

Examples of white space used on two short story websites.

http://mbhs.bergtraum.k12.ny.us/cybereng/shorts/caskpoe.html

Examples of white space used on two short story websites.

http://www.short-stories.co.uk/

Figure 7. Examples of white space used on two short story websites.

Acknowledgement: This study was funded by a grant from Microsoft Corporation.

References

Another non-traditional option: Is online learning right for you? (n.d.). Retrieved July 8, 2004 from the Greater Philadelphia Newspapers Web site: http://www.phillyburbs.com/educationguide/online.shtml.

Chaparro, B. and Bernard, M. (2001). Finding Information on the Web: Does the Amount of White Space Really Matter? Proceedings of the Tenth Annual Usability Professionals’ Association Conference. (also available at http://psychology.wichita.edu/surl/usabilitynews/
2W/whitespace.htm
)

De Groote, S. L., & Dorsch, J. L. (2003). Measuring use patterns of online journals and databases. Journal of the Medical Library Association, 91, 231-240.

National Cancer Institute (2003). Research-based web design and usability guidelines. Retrieved on January 28, 2004, from the National Cancer Institute’s Usability.gov Web site: http://www.usability.gov

Spool, J. M., Scanlon, T., Schroeder, W., Snyder, C., & DeAngelo, T. (1997). Web Site Usability: A Designer’s Guide, User Interface Engineering. North Andover MA.