Viewing Patterns for Homepages
Once users visit your homepage, where do they look first, and what drives them to look there? Not surprisingly, our left-to-right reading behavior in Western culture seems to greatly influence these responses. In Eyetrack III, we observed that the upper left corner of a page seems to be the preferred starting point for most online news users. However, the location of key elements -- such as headlines and the flag -- also seem to be powerful forces in determining reader attention.
This report is one of many from the Eyetrack III study of broadband-era news websites.
46 people were tested for one hour each in December 2003 by Eyetools Inc. in partnership with the Poynter Institute and the Estlow Center. During the test period, each test subject viewed mock news websites created for research purposes and real-world multimedia news features. Results were published in September 2004.
Overall, the upper left-hand side of a homepage -- especially when dominated by headlines -- seems to be the consistent spot where online news users look first. We observed that several factors contribute to this scanning pattern, but among the most influential are the placement of main story headlines and the website's flag.
After viewing content in the top left corner or the main headlines on our prototype homepages, participants' eye movements usually involved scanning back and forth across the homepages and ending in the upper right-hand quadrant.
Our participants scanned headlines that were in the upper left first. However, once there, they generally took only a quick look at the first few words before moving on. We found that the first 1-2 inches of each headline is where most eyes fixated, suggesting that the first few words are key in drawing reader attention. This situation is particularly true when headlines are in a list format or when headlines and blurbs have a similar look and feel.
As seen on all heatmaps of our test homepages, concentration of viewing is left-sided when participants are perusing a list. (A heatmap is an aggregate view of all participants' eye fixations on a page; a fixation is where the eye paused to look for at least a fraction of a second.)
Data also suggest that approximately five headlines are viewed on a homepage before viewers move on. This observation does not seem dependent upon the number of headlines available to view.
Observation: When viewing homepages, eyes initially tend to fixate in the upper left and finally move to the lower and upper right.
Think you can predict where most people look -- and don't look -- on a news webpage? Take this interactive quiz and find out.
Information from Eyetrack III suggests that this pattern may be partially caused by the learned instincts of readers and partially caused by the design of the pages they view. We believe users tend look to this area for two primary reasons:
- The larger, top headlines (or links to the biggest news stories) are located here. The way the site's editors ranked the stories appeared to be important to our participants (though we can't know that for sure).
- The news organization's flag (or branding element) is located here. Our participants appeared to have found it important to assess the credibility of their information source. The researchers surmised that perhaps because the sites our participants viewed were all new to them, they were drawn to look at the page flag first.
The diagram below shows an average overall viewing sequence compiled from eyetracking data on our test homepages.
As the diagram indicates, the upper-left quadrant gets a fairly complete glance. Not only is it the viewing start point in this area, but viewers also tend to peruse the entire area before moving on.
Next stop -- a cursory look at the lower part of the upper right hand quadrant, followed by the same in the upper part of the lower left-hand quadrant. The eyes seem to move back and forth again to outlying areas of these two quadrants. Finally, users scan the right-hand side of the page before leaving.
The sequence is fairly logical when considering that Westerners read from left to right. It also is consistent with traditional teachings of readers to scan printed pages in a Z-shaped pattern.
Another way to think about these sections is to break them into priority zones. Given the designs tested, the researchers determined that some regions within the page have more immediate prominence than others.
Thought about in a more general way, we can see how the upper left is viewed more quickly, on average, then the next layer out, then the outer periphery.
However, it is important to remember that viewing patterns are affected by what page elements exist in particular locations. Headline placement, images, and blurbs are strong factors in determining viewing patterns. Our homepage designs that contained the largest lead headlines closer to the center of the page received the most initial gazes in that area. Remember, the visualization above is the average of eight different page designs.
To illustrate this point, let's review the specific pages themselves and take a closer look.
More observations:
When analyzing viewing sequences on individual pages we observe:
- Readers most often view the top headlines (wherever they may be) and the site's flag (or logo).
- Visual elements such as blurbs can sometimes override this tendency.
- The visual flow tends to move out from the starting point of top headline and flag/logo combination to the periphery of the page.
Our first homepage complies with the pattern in the overall average. Participants view the top-left quadrant first, then move to the periphery. The top-left quadrant on this homepage is where the top headlines and flag/logo reside.
This tendency changes, though, when blurbs are introduced. It appears the blurbs pull the readers down the page and keep them in this area longer -- long enough to discover the picture, before the natural tendency to check the flag/logo kicks back in. See how this page has individuals looking to the picture before reviewing the flag/logo.
In other homepages, we see the same tendency -- people look to the top headlines and/or the flag/logo interchangeably as their first item of viewing. We suspect that this is driven, in part, because they are on a news site to read news, hence their interest in the headlines. But before they dive into the headlines too deeply, they appear to want to be sure that they know the source of these headlines. Can the source be recognized or trusted? If these readers had visited their favorite news site rather than the mock brand that we gave them, we expect that they would bring to that browsing session familiarity with the site and the trust that they have already established with the organization. In future studies, it will be interesting to investigate whether readers in that situation would still look at the flag/logo or would ignore it because they already are familiar with a site.
It is important to note here that our data suggest that the placement of elements on a page goes hand-in-hand with the content of those elements when determining a typical viewing sequence for online news readers. For example, on one of our test pages, the main headlines were placed more toward the center of the page, and for that page, viewing tended to begin in the center. Take a look:
Observation: When viewing homepages, users generally look at only the first few words of headlines before moving to another headline or page element.
Online news readers concentrate viewing on the left-hand side of headlines (the first 1-2 inches). This data indicate that the first few words of a headline are critical in drawing user attention. This situation is particularly true when headlines are in a list or when they have a similar look and feel. Take a look at the heatmap of this sample test page below. (A heatmap is an aggregate image showing overall eye activity on a webpage. Red-orange areas indicate the most eye activity, blue-black the least.) It is fairly representative of the group in this respect. (Click to enlarge.)
Heatmap -- homepage No. 3
Notice the deep red and orange tones concentrated on the left-hand side of the headlines. These colors indicate that almost all subjects looked at these parts of the test page. Also notice the deliberate vertical viewing down the stack of headlines. This observation is typical. Many of our test pages with stacked headlines seemed to generate user behavior where eyes moved down the left-hand side of the list. Note that the red and orange colors do not extend the full width of each headline, indicating a drop off in the number of users who read headlines from start to finish. The majority of participants seem to spend time with only the first few words of the headlines they view.
Another finding worth mention concerns use of an unusual keyword in the first few words of a headline. As the page above also shows, the use of "FCUK" (the name of a controversial clothing manufacturer) as an initial word in a headline far down on a homepage is an eye-grabber. We believe two factors contribute to this catchiness. First, the increase in viewing of "FCUK" is likely because of its perceived shocking content. Secondly, viewing may be strongly influenced by the fact that it is a short word in all capital letters. These make the text different than all the surrounding text and visually stand out in peripheral vision, thereby drawing attention to it. Eyetools researchers refer to elements such as these as "widows and orphans." Similar to the meaning of these terms in newspaper design, they are points of visual discontinuity.
Observation: Users read a minimum of about five headlines, regardless of the number of headlines on a homepage.
The average number of headlines viewed varies with the number of total headlines on the homepage. (This number includes repeat visits to a specific homepage during a user's session.) However, there appears to be a minimum number of headlines viewed, on average.
As seen in the graph below, the number of headlines viewed increases with the number of headlines available. However, a minimum of about five headlines, on average, are viewed even when the number of headlines available is small.
The number of viewed headlines does not rise significantly higher than five until the number of headlines available reaches about 20. Subjects in this study may have been scanning pages longer and more deliberately, though, than they normally would because they were in a testing environment.
Tips
- Readers are first drawn to the flag/logo and your top headlines, especially when they are located in the upper left of your page, so you may want to place important content in these areas. You might use other elements such as blurbs to override this instinct if there is some other content that you wish your readers to see before all else. Also remember that large headlines tend to attract more eye fixations sooner than some other page elements.
- Understand that the first few words in a homepage headline are crucial in engaging the largest number of users. Also note that unusual initial words and words in all capital letters may influence how many eyes fixate on a particular headline.
- Users will give you a minimum of five chances to engage them with headlines. Excellent headline writing in this environment can make a difference.
Add/view feedback on homepage reports
