Eye Movement Patterns on Single and Dual-Column Web Pages
Summary. This study examines eye movement patterns of users browsing or searching a 1-column and 2-column news article on a web page. The results show a higher number of fixations for information in the second column of an article than for the same information in the lower portion of a single column. In addition, the typical "F" pattern appeared in the left column of the 2-column layout, but not in the right column. Users also fixated more on other page elements, such as ads, when they were browsing than when they were searching.
Fixation data captured by the eye tracker can effectively plot the areas on a web page where the users look. Fixations are defined as a static gaze fixated on one specific area lasting 200-300 milliseconds between saccades, which are rapid eye movements that reposition the fovea in the direction where user wants to fixate on (Rayner, 1998). More fixations on a specific area of the webpage 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 study examines eye movement patterns on a text-heavy web page. We were interested in how these patterns change with (1) the columnar layout of the text presentation (1-column vs. 2-column) and (2) the user's task (browsing vs. searching the article).
Forty undergraduate psychology students (Mean age = 22.1 years) participated in the study. All participants reported having Internet experience.
Participants were given a background questionnaire inquiring about their Internet usage habits. A Pentium Core2 Duo PC with 96 dpi 17" monitor running at a resolution of 1024 by 768 pixels was used. The monitor was integrated with the Tobii 1750 eye-tracking system running at 50Hz and ClearView™ 2.7.0 software, which was used to detect and collect participant eye-gaze data.
Two web pages, modeled after a CNN.com news page, were created in ClearView™. Each article was presented in both a 1-column and a 2-column layout. On each page, 25 Areas of Interest (AOIs) were also defined: one set contained 22 equal AOIs (the 1-column article had all the AOIs in a single column and the 2-column article had 11 AOIs in each column). Each of the AOIs corresponded to one paragraph of the news story. In addition, 3 AOIs corresponding to the banner on the top of the page, the ads on the right side of the page, and the title of the article were defined.
Participants were seated approximately 60 cm away from the monitor and calibrated with the eye tracker. Each participant conducted two tasks, which differed in their goal (search vs. browse) and layout style (1-column vs. 2-column). Each task required users to view one of the two news articles in one of the two layouts. Both the single and 2-column articles also had advertisements placed vertically on the right side of the page.
Participants were given 40 seconds to complete each task. For the browse task, participants were asked to simply familiarize themselves with the article, while for the search task, participants were asked to locate the specific name of a person mentioned in the news article. The location of the search target for both the articles was approximately the same.
Eye movements were recorded for all tasks. After both tasks, participants were asked if they saw any ads on the page. Fixations recorded by ClearView™ were defined as a motionless gaze focused on one element lasting 100 milliseconds or longer.
Heatmaps and gaze plots were generated for the 1 and 2-column pages and for the search and browse tasks. The following is a summary of the results:
The "F/E-Pattern": There was a distinct "F" or "E" pattern for both the 1-column condition (see Figure 1) and left column of the 2-column condition (see Figure 2). The pattern was exhibited regardless of whether it was a browse or search task. This pattern has been noted previously by Nielsen (2006) and Shrestha, et al., (2007). The right column of the 2-column browse condition lacked any distinctive pattern (Figure 2), though, it is apparent that this column had more fixations in the search condition. It was suspected that the second column of the 2-column layout may elicit the similar eye movement patterns as the first column, but this did not seem to be the case.
Figure 1. Heatmap of 1-Column Browse (left) and 1-Column Search (right). The circle indicates the location of the target for the search condition.
Figure 2. Heatmap of 2-Column Browse (left) and 2-Column Search (right). The circle indicates the location of the target for the search condition.
Fixation count throughout article: Fixation count was the highest at the top of the article and decreased steadily down the article. This was true for both the 1-column and 2-column search and browse tasks. To quantify this, the number of fixations for each of the 22 defined AOIs on the article were summed. Figure 3 shows a comparison of the number of fixations by task for each layout. It can be seen that, in general, fixations decrease throughout the article. The spike in the 8th AOI for the search condition reflects the target location.
Figure 3. Number of fixations for 1-Column Browse & 1-Column Search (left) and 2-Column Browse & 2-Column Search (right).
Browse vs. Search: While the figures above show little difference between browsing and searching the article itself, examination of individual gaze plots (Figure 4 and 5) for each task revealed that the participants in the browse condition fixated more on the areas of the page outside of the article, such as the banner at the top of the page, the ads on the right side of the page, and the headline of the article than in the search condition. Recall of the presence of the ad was also significantly more for participants in the browse conditions than in the search conditions, χ2 (1) = 5.01, p < .05. This suggests that participants were more inclined to look at the ads when they did not have a specific search goal.
Figure 4. Sample Gaze Plot of 1-Column Browse (left) and Search (right).
Figure 5. Sample Gaze Plot of 2-Column Browse (left) and Search (right).
1-Column vs. 2-Columns: In the browse task condition, the number of fixations on the 22 AOIs in the article were nearly identical regardless of the columnar layout of the text. In the search task condition, fixations on the right column (AOIs 11-22) of the 2-column layout were significantly more than the fixations on the bottom half of the 1-column condition, t(18) = -2.962, p < .05 (Figure 6).
Figure 6. Number of fixations in the 1-Column & 2-Column Browse conditions (left) and 1-Column & 2-Column Search conditions (right).
Results from this study provide additional insight into the differences in the fixation patterns for a single and double-column web page layout. When searching the article, users fixated on the right column of the 2-column article significantly more than the bottom half of the 1-column article. This shows a potential solution to the "below the fold" problem where users do not scroll to read text below the visible screen. Web page designers should be encouraged to use the 2-column layout to maximize fixations on lengthy text. Future studies should be done to investigate the eye movement patterns viewing single-column articles of varying column width as well as articles with subsection headers.
Note: A paper based on this work will be presented at the Human Factors and Ergonomics Society’s 52nd (2008) Annual Meeting in New York, NY.
Nielsen, J. (2006). F-Shaped Pattern for Reading Web Content. Retrieved January 18, 2007, from 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., Lenz, K. M., Owens, J., and Chaparro, B. C. (2007). Eye Gaze Patterns while Searching vs. Browsing a Website. Usability News, 9(1). Retrieved May 22, 2008, from http://www.surl.org/usabilitynews/91/eyegaze.asp