Summary. This study examined the eye movement patterns of users browsing a web-based portal interface. Results demonstrate consistent scan patterns in both 2 and 3-column portal layouts. In the 2-column portal, users viewed the page through the top, left channel and proceeded to scan the rest of the portal page in a reverse ‘S’ pattern by row. In the 3-column portal layout, users typically started scanning in the top, center channel, and then proceeded to scan in a reverse ‘S’ pattern through the rest of channels by row. Implications of these results to portal design are discussed.
There are two major types of web portals in today’s market, public and private portals. Public portals serve wide audiences by providing news, weather, stocks, and other self-service functions like e-mail, messaging, and customization. Yahoo.com is an example of such a portal. Businesses and educational institutions have begun leveraging private web portals as one of their primary methods of information management and self service.
Portal websites differ from typical informational websites because they are organized by channels. Each channel is a self-contained unit that either provides self-service functions or access to a variety of information, customization options, or other utilities. Figures 1a and 1b are examples of public and private web portal pages, respectively.
Figure 1a. Example of a public portal – Yahoo.com
Figure 1b. Example of a private portal website.
Several researchers have explored eye movement patterns on various types of web pages (Nielsen, 2006; Granka, Joachims, and Gay, 2004; Shrestha, Lenz, Owens, and Chaparro, 2007). Nielsen (2006) reports that users read in an "F" pattern on paragraphs of text in web pages. Shrestha, et al. (2007) replicated Nielsen’s "F" pattern on a text-based web page, but not on a page with rows of categorical images. Granka et al. (2004) noted a significant decrease in the number of fixations after the first two results on a search results page.
Little research has been conducted to examine user eye movements on a portal website. In 2002, Goldberg and colleagues examined user eye movements on the Oracle 2-column web portal interface. In this study, they found that users scan by row rather than by column. Moreover, they discovered that the participants’ first fixations were primarily in the top left channel of the portal, and that the majority of their early fixations occurred in the first two rows of channels. Users proceeded to scan in a left-right, top-down method.
This study extended the work of Goldberg et al. (2002) and examined user eye movement patterns and fixations in both a 2-column and a 3-column web portal page.
Forty undergraduate students, with a mean age of 22.1 (SD=6.8) years, were recruited from a Midwestern university to participate in the study. All participants reported having experience using the internet at least once a week. Over 92% of participants reported using their university portal at least once a week.
The stimuli for this study consisted of two versions of a portal page. Eighteen channels were selected from the university web portal and were equally divided into two sets. A 2 and 3-column version of the web portal page was created from each set.
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 ClearViewTM 2.7.0 software, which was used to detect and collect participant eye-gaze data. A background questionnaire was used to assess participants’ internet usage and gather demographic information.
Participants were seated approximately 60 cm away from the monitor and calibrated with the eye tracker. Participants were randomly assigned to view one of the two portal pages. They were asked to simply view the page and familiarize themselves with its content. Participants were given 20 seconds to complete the task.
Order of Fixations
The orders of fixations in each channel were examined for both the 2 and 3-column conditions and summarized across participants. Across both conditions, participants scanned horizontally across channels instead of vertically by column. For the 2-column condition, this row-wise tendency replicates findings of Goldberg et al. (2002). Participants entered into the channel region of the 2-column portal page through the top, left channel and proceeded to scan to the right. After scanning the first row of channels, the second row of channels was entered in the right channel and scanned to the left. The scanning direction alternated in the third row by scanning left to right. This directionality alternated until each channel was scanned in the portal. This pattern was consistent across channels (Kendall’s W(8) = .886, p < .001). Figure 2 reveals this pattern.
Figure 2. Average order of fixations across participants viewing the 2-column portal page. Each square represents a portal channel as arranged in the study. Numbers represent the order of fixations across channels.
The top, center channel served as the primary entry point into the channel region for the 3-column condition. Participants continued scanning by moving into the top, left channel and completed the first row by moving to the top, right channel. At this point, participant’s fixations moved into the right channel of the middle row and proceeded to scan from right to left. The third row was completed by scanning from left to right. This pattern was found to be consistent through channels in 3-column web portal pages, albeit less so than the 2-column condition (Kendall’s W(8) = .699, p < .001). This pattern is summarized in Figure 3.
Figure 3. Average order of fixations across participants viewing the 3-column portal page. Each square represents a portal channel as arranged in the study. Numbers represent the order of fixations across channels. Channels designated as 7 had equal rankings.
Examination of fixation heatmaps for both the 2-column and 3-column layouts suggest that the number of fixations decreased as the participants browsed down the page. The number of fixations below the page "fold" were fewer despite the fact that most users scrolled the entire page length. Figures 4 and 5 show the overall heatmaps for 2 and 3-column portal pages, respectively.
Figure 4. Fixation heatmap for a 2-column portal page in the browse condition. The white line represents the page fold.
Figure 5. Fixation heatmap for a 3-column portal page in the browse condition. The white line represents the page fold.
Results of the 2-column portal layout concur with Goldberg (2002) in that participants fixate in the top, left channel and proceed to scan from left to right. However, in subsequent rows, our findings indicate scanning directionally changes in a reverse ‘S’ pattern, which is demonstrated in Figure 3. Scanning patterns in the 3-column condition were found to be similar in the reverse ‘S’ pattern found in 2-column portal pages, with the exception of the initial entry point into the channel region and the initial migration between channels in the first row. A top-to-bottom method of scanning across columns of channels was apparent in both 2 and 3-column portals pages.
Granka et al. (2004), Nielsen (2006), and Shrestha et al. (2007) all found that fixations decrease as users read further down a web page. Not surprisingly, this same behavior was also noted in the portal pages in this study. In a 2-column portal page, participants fixated most in the top, left channel, and in 3-column portal pages, the top, left and center channels.
The findings of this study provide insight into how users scan a portal web page and may be used by designers as they consider where to position certain information. In consideration of these findings, if information is placed in the top, left channel of the 2-column portal layout or the top, center or left channels of the 3-column portal layout, users may be able to find it quicker than if it is located elsewhere. Further research needs to be done to determine the effects of graphics and different style headers within channels on eye movement patterns.
Note: A paper based on this work can be found in the Proceedings of the Human Factors and Ergonomics Society’s 52nd (2008) Annual Meeting in New York, NY.
Goldberg, J., Stimson, M., Lewenstein, M., Scott, N., & Wichansky, A. (2002). Eye tracking in web search tasks: design implications. In Proceedings of the 2002 Symposium of Eye Tracking Research & Applications (pp. 51-58). New Orleans, Louisiana: ACM Press.
Granka, L., Joachims, T., & Gay, G. (2004). Eye-tracking analysis of user behavior in WWW search. In Proceedings of the 27th annual international ACM SIGIR conference on Research and development in information retrieval (pp. 478-479). Sheffield, United Kingdom: ACM Press.
Nielsen, J. (2006). F-Shaped Pattern for Reading Web Content. Retrieved January 18, 2007, from http://www.useit.com/alertbox/reading_pattern.html
Shrestha, S., Lenz, K., Owens, J., & Chaparro, B. (2007). "F" pattern scanning of text and images in web pages. In Proceedings of the 51st Annual Human Factors and Ergonomics Society (pp. 1200-1204). Baltimore, Maryland.