By S. Shrestha & K. Lenz
Summary: This article discusses users’ visual scan paths of web pages containing text and/or pictures while conducting browsing and searching tasks. User performance on three usability tasks on an e-commerce website is described. Results show that users follow a fairly uniform scan path when browsing through pictures, and a more random path while specifically searching through them. Additionally, users appeared to follow Nielsen’s ‘F’ pattern (2006) while both browsing and searching through text-based pages.
According to Nielsen (2006) users tend to focus on the left side of the body of a webpage when reading and fixate very little on information located on the right-hand side. Users maintain this ‘F’ viewing pattern with a few horizontal scans, the first one being longer than the second and a long vertical scan (Figure 1). Implications of this are that users may miss valuable information located on the right-hand side of the page.
Figure 1. The "F" pattern as noted by Nielsen (2006).
(The red areas indicate the highest number of fixations, followed by yellow and blue.)
This study investigated whether the "F" pattern style of viewing was dependent on the page content (text-based vs. picture-based) and/or on the user task (searching vs. browsing). This information could play a valuable role in determining where companies should place certain types of information on web pages.
Twenty undergraduate students (17 female, 3 male) at Wichita State University participated in this study. Sixty-five percent of the participants were between the ages of 18 and 26 years. A Pentium IV-based PC computer with 96 dpi, 17" monitor with a resolution setting of 1024 x 768 pixels was used. The monitor was integrated with the Tobii 1750 eye-tracking system, which was used to detect and collect participant eye-gaze data during testing. The Tobii 1750 eye-tracker samples the position of the user’s eyes on an average of every 20ms (i.e., 50Hz) and has the eye-tracking hardware (e.g., high resolution camera and near infra-red light-emitting diodes) in the monitor frame. This allows for more natural user behavior by not placing restrictions on the participants (e.g., helmets, chin-rests).
Participants were seated approximately 60 cm away from a computer monitor. All participants completed three tasks each (one search task, one browsing task, and one search task for a non-existent product). Participants were allowed 20 seconds to complete each individual task. Participants were shown two web pages, one at a time (Figure 2). The search task for Figure 2a required participants to find the product category for backpacks. The search tasks for Figure 2b required participants to find information on what kind of backpack was best suited for travel along narrow, uneven trails. Browsing tasks for each page asked the participants to simply browse the information on the page with no specific goal. All participants were also asked to find a product category for a Mountain Bike shown in Figure 2a. This product was not available on the site.
Figure 2a. (left) Picture page viewed by the participants
Figure 2b. (right) Text page viewed by the participants
RESULTS AND DISCUSSION
Gaze Patterns While Viewing a Picture Page
Hotspot plots for the browsing task and the search task are shown in Figures 3 and 4. When browsing this page, the users scanned the categories in a horizontal pattern (left to right and right to left) line by line. It should be noted that the area visible when the page displayed (i.e., area "above the fold") received the most fixations even though all users scrolled the page as they browsed.
Figure 3. Hotspot plot while browsing the product categories. The area "below the fold" of this page was located below the fourth row of product categories.
When searching specifically for the backpack category, users appeared to follow a less systematic scan path. Eye tracking of the page was stopped immediately after the target category was identified. For this reason the hotspot plot below shows very light exposure to the areas other than the target area of interest.
Figure 4. Hotspot plot for the backpack category search task.
A sample of individual gaze plots from users browsing the page (top 3 screenshots in Figure 5) also show the left to right search pattern. The gaze plots of searching for the backpack category (bottom 3 screenshots in Figure 5) show that the users followed a more random path.
Figure 5. Gaze plots for browsing (top) and searching (bottom) a page of product categories. (The blue circle indicates the duration of fixation with larger circles representing longer fixations; and the blue lines connecting the dots indicate the saccade path)
Figure 6 shows the hotspot plot for the search for the nonexistent Mountain Bike category. The user gazed almost uniformly across all the categories with the heaviest concentration in the top left.
Figure 6. Hotspot plot while searching for the nonexistent Mountain Bike category.
Further investigation of the individual gaze plots, shown in Figure 7, shows how each user followed a unique and random path while searching for the nonexistent Mountain Bike category. It was interesting to see that several of the participants did not fixate on all of the categories.
Figure 7. Individual gaze plots while searching for the nonexistent Mountain Bike category.
Gaze Patterns While Viewing a Text Page
Figure 8 shows hotspot plots when browsing and searching the text page. During both tasks, users seemed to follow by the "F" pattern suggested by Nielsen (2006). Users had more fixations at the beginning of a line than the end of a line, and also the fixations were more for the first few lines than for subsequent lines.
Figure 8. Hotspot plot while performing the browsing (left) and searching (right) task for the text page.
A sample of individual gaze plots for browsing (top 4 plots) and for searching for the specific information (lower 4 plots) are shown in Figure 9. It can be noted that the gaze plot in the browsing task is somewhat more dispersed than the gaze plot in the searching tasks where it is more concentrated to the upper portion of the webpage. This was due to the fact that the participants searching for the specific information tended to read the text more closely than the participants that were browsing. However, some individual differences can be seen in the second plot on the browsing and third plot in the searching tasks, which actually show an opposite pattern.
Figure 9. Sample individual gaze plots for the browsing (top) and searching (bottom) task for the text page.
From this study we have replicated what Nielsen (2006) called the "F" pattern of viewing for a text-based webpage as shown in Figure 8. With a few exceptions, we also found the browsing task elicited this same "F" pattern though it was more dispersed than the search task. This pattern and the exceptions can be seen in Figure 9.
The "F" pattern style of viewing does not seem to hold true while browsing or searching a picture-based webpage. Much of the participant’s gaze was on the categories of pictures that were above the fold as shown in Figure 3. Participants were very efficient at searching for a particular category among the 31 categories of pictures, however, the pattern of search for each participant was unique. The participants fixated on only 8-15 items before the target was identified. The style of viewing while searching for a non-existent category was more uniformly distributed above and below the fold unlike in the browse task where categories below the fold did not receive many fixations.
These results reinforce the importance of conciseness in the delivery of text on web pages. Since the right hand side of the page and the content below the fold is typically ignored, pages should be structured so that the important content falls in the "F" pattern. Further investigation is needed to see how the viewing pattern changes when the text is divided into columns. For picture pages, positioning the important or featured products above the fold is most effective. Further investigation is needed to determine what kind of pictures draw more attention and how viewing patterns change for web pages containing both pictures and text.
Nielsen, J. (2006). F-Shaped Pattern For Reading Web Content. Retrieved January 18, 2007, from http://www.useit.com/alertbox/reading_pattern.html