Introduction
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.
http://www.useit.com/alertbox/reading_pattern.html
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.
METHOD
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.
Conclusion
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.
ReferenceS
Nielsen, J. (2006). F-Shaped Pattern For Reading Web Content. Retrieved January 18, 2007, from
www.useit.com/alertbox/reading_pattern.html
