Eye Movement Analysis of Text-Based Web Page Layouts

Sav Shrestha & Justin W. Owens

Summary. User eye movements of five different text-based web page layouts were compared. The layouts evaluated were a narrow 1-column, narrow 2-column and full-length text layouts, including those with a picture on the right and a picture on the left of the article paragraph. All of these were evaluated while users conducted a simple browse task. Heatmap and fixation count data showed no significant difference in the fixation count between the different page layouts. The heatmaps of the layouts shared a similar F-pattern for fixations, with the concentration of the fixations above the fold. Further analysis showed a similar order of fixations on the 2-column and the full-length layout conditions and an identical order of fixations on the picture-left and the picture-right layout conditions. The narrow 1-column layout showed a fixation order different from the other layouts.

INTRODUCTION

An increasing amount of information is being delivered via text-based web pages. It is of interest to web designers of text-intense sites (e.g. news sites) to maximize the exposure of the text content. It is also important to be able to quantify exposure of the advertisements present on the page as well, as they are a primary source of a sites’ sustainability. Nielsen (2006) was the first to point out the eye movement patterns which web users employ when browsing a text-based page. By observing the heatmap data, he noted that users maintained "F/E" viewing patterns with a few horizontal scans, the preceding one being longer than the subsequent one and a long vertical scan along the left column of the text. Shrestha et al., (2007) found this same pattern of fixations on a text-based page regardless of the goal-orientation of the task – search vs. browse (Figure 1). However, fixations during a search task were less dispersed than fixations during a browse task. This study also showed that users fixated more on the area above the page fold regardless of page content or goal orientation of the task.

Figure 1. Heatmap showing the "F" pattern of fixation on a 1-column layout of text.

Figure 1. Heatmap showing the "F" pattern of fixation on a 1-column layout of text.

Shrestha & Owens (2008) compared fixation patterns on text-based pages for a 1-column and 2-column layout. Fixations also were evaluated based on the goal-orientation of the task (search task vs. browse task). Results revealed that regardless of the page type and the goal-orientation, frequency of fixations was higher towards the top of the article and decreased with each descending paragraph. Interestingly, very little difference was found between the fixations on the search and the browse conditions. However, there were more fixations on the page banner, advertisements and article headline in the browse condition when compared to the search condition. Fixation patterns on the 1-column and 2-column layouts were almost identical in the browse condition. In the search condition, however, there were significantly more fixations on the right-hand column of the 2-column text layout than on the bottom half of the 1-column text layout.

Purpose

The purpose of this study was to investigate fixation patterns of text-based pages across different layouts further. The columns of text presented in the Shrestha and Owens (2008) study only had a narrow width, commonly used on many news websites. However, there are also sites that present text using the full-length text layout. Thus, the current study expanded the number of layouts and compared the fixation patterns for a narrow 1-column, narrow 2-column and full-length text layouts. The condition of a picture on the right or a picture on the left of the article paragraph was also investigated (see Figure 2 for sketeches of the different layout conditions).

Figure 2. Sketches illustrating the five different page layouts: (left to right) narrow single-column, narrow double-column, full- length, picture-left and picture-right.

Figure 2. Sketches illustrating the five different page layouts: (left to right) narrow 1-column, narrow 2-column, full- length, picture-left and picture-right. The narrow 1 and 2-column conditions reflect those used in Shrestha et al., 2008.

METHOD

Participants

Forty-eight undergraduate students from a Midwestern university volunteered to participate in the study. There were 32 females and 16 males with the mean age of 22.3 years (SD = 4.79). All participants reported having Internet experience with two-thirds of them reporting Internet usage of at least 7 hours per week. The participants reported using the Internet mostly for entertainment, e-mail and education related activities. Half the participants reported using the Internet simply for browsing/surfing.

Materials

Participants were given a background questionnaire inquiring about their Internet usage habits. The Tobii 1750 eye tracking monitor was powered by a Pentium Core 2 Duo PC. The 17" monitor was set at 96 dpi running at a resolution of 1024 by 768 pixels at 50Hz. ClearViewTM 2.7.1 software was used for calibration, recording eye movements and exporting the data.

The news web page used in the Shrestha and Owens (2008) was modified for the three new text layouts. All the pages were identical except for the layout of the text and inclusion of images in two of the layouts. There were two sets of Areas of Interest (AOIs) investigated on these pages: 8 AOIs on the main content area (text article); and 3 AOIs outside the main content area (Top Banner, Advertisements and Article Headline). The placement of the AOIs was identical across the layouts. The picture left and picture right conditions had an additional AOI for the picture. The new AOIs were placed on the 1-column and the 2-column conditions from the Shrestha et al., (2008) study and the new eye movement data was exported.

Procedure

Participants were seated approximately 60 cm away from the eye tracker and calibrated. Participants were randomly presented one of the three stimuli and were asked to browse for 40 seconds. They were told they would be asked general questions about the page content after reading. After browsing, participants were asked to give a brief synopsis of the article and were also asked to answer two recall questions: recall of the presence of advertisements on the page and recall of the name of the site they just browsed.

Eye movements were recorded and fixation data was exported for all the defined AOIs. Fixations recorded by ClearViewTM are defined as a static gaze fixated on one specific area lasting 100 milliseconds between saccades. Saccades are rapid eye movements that reposition the fovea in the direction where a user wants to fixate (Rayner, 1998). More fixations on a specific area of a web page indicate that it is more noticeable to the users and that information may be extracted from that area during fixation (Poole et al, 2004). This fixation and saccade data can be graphically mapped to a heatmap image or a gaze plot to visually demonstrate fixations and gaze paths. Saccades were defined as a motionless gaze focused on a single element lasting 100 milliseconds or longer and average fixations were defined as the average number of fixations on an AOI, (Rayner, 1998).

RESULTS

The data for the narrow 1-column and the narrow 2-column conditions from the Shrestha et. al., (2008) study were included in the analysis but the AOIs were redrawn to get the fixation data on the new AOIs of interest in this study. The data on the the full length, picture-left and picture-right conditions were collected in this study using the same methodology from the Shrestha et. al., (2008) study.

Recall of the Advertisement and Site

Only about 24% of the participants reported seeing an advertisement on the page while 67.5% of the participants fixated on the advertisements. The page was modeled after a typical CNN.com news page and the large red CNN logo was unaltered on the top left corner of the page. Despite this fact, only 43.4% of participants remembered which site they viewed when asked immediately after browsing the site for 40 seconds while 58.4% of the participants fixated on the CNN banner. Only 3 participants were able to both recall the presence of the advertisement on the site as well as correctly report the name of the site.

Heatmaps and Gaze Plots

Upon initial examination, all five page layouts reveal a well-defined "F/E"-shaped patterns of fixation on the text portion of the page similar to the heatmaps of the narrow 1-column and 2-column page layouts from the Shrestha et al., (2008) study (Figure 3A).

Figure 3A. (Top) Heatmap of fixation counts on five different page layouts.
Figure 3B. (Bottom) Sample gaze plots on the five different page layouts.

Heatmaps also showed fixations on the Page Banner, Advertisements and the Article Headline AOIs. In the conditions with an image, fixations on the picture were very few compared to the adjacent text. The individual gaze plots (Figure 3B) showed unique patterns of browsing the page, however some consistency was seen across participants. Fixations were concentrated above the page fold, with the first few paragraphs receiving the most fixations. The fixations were most dense on the text adjacent to the picture in both the picture-right and the picture-left conditions.

Comparing Page Types by Fixations on AOIs

Fixation counts by AOI were compared across page type. Figure 4A shows the comparison between the 8 AOIs across page types. Results from a split-plot ANOVA showed a comparable number of fixations across all AOIs across page types, F (4, 72) = .975, p > .05. The main effect of AOI was significant indicating higher fixations at the top of the article than the bottom, F (1, 72) = 134.6, p < .05. The interaction, however, was not significant, F (4, 72) = .711, p > .05. Thus, fixation count on the 8 AOIs was not found to be significantly different regardless of the layout of the presentation. Figure 4B shows the comparison of fixation counts on the Top Banner, Advertisement, Headline and entire article across the page types. The fixation counts on the 4 AOIs between page types were not different from each other. Two AOIs were created to compare fixations on the top half and the bottom half of the page across the page types, but as depicted in Figure 4C, no difference was found between conditions. As expected, fixation count was higher on the top half of the page.

Figure 4A. Fixation counts on the 8 AOIs on the main article for all 5 page layouts.

Figure 4A. Fixation counts on the 8 AOIs on the main article for all 5 page layouts.

Figure 4B. Fixation counts on Top Banner(1), Ad(2), Headline(3) and entire article(4) for all 5 page layouts.

Figure 4B. Fixation counts on Top Banner(1), Ad(2), Headline(3) and entire article(4) for all 5 page layouts.

Figure 4C. Fixation counts on the top half (1) and bottom half (2) of the page for all 5 page layouts.

Figure 4C. Fixation counts on the top half (1) and bottom half (2) of the page for all 5 page layouts.

Order of Fixations

The order of fixations on the 4 AOIs (top banner, advertisements, article headline and article content) were analyzed for the 5 different page layouts (see Table 1).

Table1. Order of fixations for the 4 AOIs.

1-Column Headline –> Top Banner –> Advertisement –> Article
2-Column Headline –> Article –> Advertisement –> Top Banner
Full Headline –> Article –> Top Banner –> Advertisement
Picture-Left Top Banner –> Headline –> Article –> Advertisement
Picture-Right Top Banner –> Headline –> Article –> Advertisement

Fixation order on the 1-column layout was unique from the rest, fixation order on the 2-column layout and the full layout was similar and the picture-left and the picture-right conditions had the exact same order of fixations on the AOIs (see Table 2). This pattern of fixations was consistent within each page type.

Table 2. Fixation order across the different conditions.

1-Column Kendall’s W(3) = 0.52, p < .001
2-Column Kendall’s W(3) = 0.52, p < .05
Full Kendall’s W(3) = 0.50, p < .05
Picture-Left Kendall’s W(3) = 0.68, p < .001
Picture-Right Kendall’s W(3) = 0.48, p < .05

It is interesting to note that even though both the picture conditions had the exact same pattern of fixation, the consistency was higher for the picture-left condition. To further investigate the order of fixations on the picture conditions, fixations on 5 AOIs (top banner, headline, advertisement, picture and first article paragraph) were analyzed. Results showed the exact same fixation order on the AOIs for both the page types: Top Banner –> Headline –> Picture–> Article –> Advertisement. Concordance was higher for the picture-left condition, Kendall’s W(3) = 0.66, p < .001 than for the picture-right condition, Kendall’s W(3) = 0.45, p < .05.

CONCLUSION

The mock web page used in the study modeled a CNN.com news article page. It contained the page banner with the distinctively red CNN logo and advertisements on the right side of the page. Despite the page being identical to a real CNN.com page, more than half of the participants failed to recall the site name immediately after browsing it for 40 seconds. Eye tracking data showed about 58.4% of the participants fixating on the CNN banner. Recall of the presence of an advertisement was worse. While more participants fixated on the advertisement (67.5%), it was recalled less (only by 24% of the participants). Recall of both the site name and the presence of the advertisement was low with only 3 participants recalling both.

Heatmap analysis showed that regardless of the layout of the presentation, the F-pattern persisted. Consistent with the previous studies (Figure 3A), fixations were heavier on the top half of the page (above the fold) compared to the bottom half (below the fold) (Figure 4C). Fixations on the article showed a downward slope that flattened after the fourth AOI (Figure 4A). Fixations on the top banner, headline, advertisement and fixations on the entire article were not statistically different between the layout conditions (Figure 4B). This shows that participants followed similar fixation patterns while performing a browse task on text-heavy pages with different layouts.

The order of fixations on the different AOIs on the page was also of interest. This indicates the sequence in which the AOIs were attended. Results indicated a similar order of fixations on the 2-column and the full layout conditions and an identical order of fixations on the picture-left and the picture-right layout conditions. The consistency of the order was the highest for the picture-left condition. The 1-column layout, being dissimilar to the other layouts, consequently showed a unique fixation order. In this condition, the advertisement was fixated before the article. On the two conditions with the picture, it was found that the picture was fixated upon before the article, but after the headline. It was unexpected that the larger bolded text would be attended before the picture.

Future studies should investigate fixation patterns on different text-based pages such as blogs. Blog articles are placed one below the other making the layout distinct from those used in this study. Would dominance of the page fold, "F" pattern of scanning still hold true for blogs? Investigating different blog layouts (blogs that present the entire article versus ones that present an excerpt of the article) should provide further insight into fixation patterns on text-based pages.

REFERENCES

Nielsen, J. (2006). F-Shaped Pattern for Reading Web Content. Retrieved April 24, 2009 http://www.useit.com/alertbox/reading_pattern.html

Poole, A., Ball, L. J., and Phillips, P. (2004). In search of salience: A response time and eye movement analysis of bookmark recognition. In S. Fincher, P. Markopolous, D. Moore, & R. Ruddle (Eds.), People and Computers XVIII-Design for Life: Proceedings of HCI 2004. London: Springer-Verlag Ltd.

Rayner, K. (1998). Eye movements in reading and information processing: 20 years of research. Psychological Bulletin, 124, 372-422.

Shrestha, S. & Owens, J. (2008). Eye Movement Patterns on Single and Dual-Column Web Pages. Retrieved April 24, 2009 http://www.surl.org/usabilitynews/101/column.asp

Shrestha, S., Lenz, K., Owens, J. & Chaparro, B. S. (2007). F-Pattern Scanning of Text and Images on Web Pages. Proceedings of the 51stAnnual Meeting of the Human Factors and Ergonomics Society, Baltimore.

Tagged with: , , , , , , , ,
Posted in Usability News
Subscribe to SURL

Want to receive notifications when SURL has new articles? Please enter your name and email address to subscribe to our website.

Popular Topics in Usability News
Log in/Sign Up
%d bloggers like this: