The Best of Eyetrack III:
What We Saw When We Looked Through Their Eyes
By Steve Outing and Laura Ruel
Eyetrack III project managers

News websites have been with us for about a decade, and editors and designers still struggle with many unanswered questions: Is homepage layout effective? … What effect do blurbs on the homepage have compared to headlines? … When is multimedia appropriate? … Are ads placed where they will be seen by the audience?


The Eyetrack III research released by The Poynter Institute, the Estlow Center for Journalism & New Media, and Eyetools could help answer those questions and more. Eyetracking research like this won’t provide THE answer to those questions. But combined with other site metrics already used by news website managers — usability testing, focus groups, log analysis — the Eyetrack III findings could provide some direction for improving news websites.

由Poynter Institute、Estlow Center for Journalism & New Medi和Eyetools共同组织的Eyetrack III研究,将有助于回答这些问题(甚至更多)。这样的视线追踪(eyetracking)研究本身不会直接给出答案,但与一些业已为新闻站点管理者们所用的方法——如可用性测试、聚焦组、日志分析——结合起来,Eyetrack III的研究成果就能为改进新闻站点指出一些方向。

In Eyetrack III, we observed 46 people for one hour as their eyes followed mock news websites and real multimedia content. In this article we’ll provide an overview of what we observed. You can dive into detailed Eyetrack III findings and observations on this website — use the navigation at the top and left of this page — at any time. If you don’t know what eyetracking is, get oriented by reading the Eyetrack III FAQ.

在研究过程中,我们让46名参与者阅读虚拟新闻站点和真实多媒体内容,为时一个钟头,同时观察他们那的眼部活动。本文将概述我们观察到的现象。你可以随时在本站查阅Eyetrack III研究成果的细节——请使用本页顶部和左边的导航条。如果你尚不了解eyetracking,请阅读Eyetrack III FAQ。

Let’s get to the key results of the study, but first, a quick comment on what this study is and is not: It is a preliminary study of several dozen people conducted in San Francisco. It is not an exhaustive exploration that we can extrapolate to the larger population. It is a mix of “findings” based on controlled variables, and “observations” where testing was not as tightly controlled. The researchers went “wide,” not “deep” — covering a lot of ground in terms of website design and multimedia factors. We hope that Eyetrack III is not seen as an end in itself, but rather as the beginning of a wave of eyetracking research that will benefit the news industry. OK, let’s begin. …

我们直入主题,来看看研究的关键结果。但必须先解释一下本研究“是什么”和“不是什么”的问题:它是在旧金山对数十名受测者进行的初步研究。它不是能推而广之于普遍人群的彻底观测结果。它是基于可控变化和未受严格控制的“观测”“结论”的综合。研究者采取了“博而不深”的做法——范围覆盖网站设计和多媒体元素等领域。我们希望Eyetrack III不被看作是最终结果,而应该是视线跟踪研究新一轮热潮的开端,这些研究将有利于新闻工业。好,现在开始……


At the core: Homepage layout


While testing our participants’ eye movements across several news homepage designs, Eyetrack III researchers noticed a common pattern: The eyes most often fixated first in the upper left of the page, then hovered in that area before going left to right. Only after perusing the top portion of the page for some time did their eyes explore further down the page.

在观察参与者在阅读数个新闻首页的眼部运动时,Eyetrack III注意到一个普遍模式:视线多数时候常常首先在页面左上角停留,然后在该区域稍作浏览,跟着移动到页面右方。在对页面上方进行一段时间的仔细阅读后,眼球才会开始浏览下方内容。

Depending on page layout, of course, this pattern can vary. The image above is a simplistic representation of the most common eye-movement pattern we noticed across multiple homepage designs. (In other words, don’t take what you see above too seriously.)


Now also consider another Eyetrack observation: Dominant headlines most often draw the eye first upon entering the page — especially when they are in the upper left, and most often (but not always) when in the upper right. Photographs, contrary to what you might expect (and contrary to findings of 1990 Poynter eyetracking research on print newspapers), aren’t typically the entry point to a homepage. Text rules on the PC screen — both in order viewed and in overall time spent looking at it.


A quick review of 25 large news websites — here’s a list of them — reveals that 20 of them place the dominant homepage image in the upper left. (Most news sites have a consistent page design from day to day; they don’t often vary the layout as a print newspaper would.)


We observed that with news homepages, readers’ instincts are to first look at the flag/logo and top headlines in the upper left. The graphic below shows the zones of importance we formulated from the Eyetrack data. While each site is different, you might look at your own website and see what content you have in which zones.


[Read more on what Eyetrack III says about homepage layout here.]

[在此处查看Eyetrack III关于首页布局的观点]


Want people to read, not scan? Consider small type


The Eyetrack III researchers discovered something important when testing headline and type size on homepages: Smaller type encourages focused viewing behavior (that is, reading the words), while larger type promotes lighter scanning. In general, our testing found that people spent more time focused on small type than large type. Larger type resulted in more scanning of the page — fewer words overall were fixated on — as people looked around for words or phrases that captured their attention.

在测试标题和首页字体时,Eyetrack III发现一些重要的现象:小字体使得人们集中精力阅读,而大字体则引致快速扫读。普遍而言,研究结果表明,人们花更多时间在小字体文字上。较大的字体导致更多的扫读——眼光只会在少数词上停留——人们四处乱看,寻找能抓住他们注意力的词或短语。

This was especially the case when we looked at headline size on homepages. Larger headlines encouraged scanning more than smaller ones.


(Note: We are not advocating that you run out and reduce the size of your font across the board. You should make sure that people can read the font size you select in order to achieve the appropriate balance.)


Particularly interesting was people’s behavior when there were headlines and blurbs used on homepages. Eyetrack III test participants tended to view both the headline and blurb when the headline was bold and the same size as blurb text and immediately preceded the blurb on the same line.

特别有趣的是,在首页既有(新闻)导语又有(新闻)标题时人们的阅读行为。在导语采用和标题同样的字体、且紧跟在标题后面时,Eyetrack III受试者们倾向于都看。

With a headline larger than the blurb and on a separate line, people tended to view the headlines and skip the blurbs; they scanned the headlines throughout the page more than the group that looked at the smaller headlines.


Researchers believe that it is the contrast in type size that accounts for this behavior, as well as the type size itself. When a headline is larger than its accompanying blurb text, it’s perceived as the important element of the headline-blurb block — so people appear to decide that viewing the headline is sufficient and they skip the blurb.


Underlined headlines discouraged testers from viewing blurbs on the homepage:

This may be related to a phenomenon that we noted throughout the testing: visual breaks — like a line or rule — discouraged people from looking at items beyond the break, like a blurb. (This also affects ads, which we address below.)


When we look at news websites, we find that the vast majority of them (22 out of 25) use blurbs to accompany headlines on their homepages. It’s the rare ones that use only headlines: CNN.com, NYPost.com, and ProJo.com. In terms of headline size, we observed about an even split between using larger type size for headlines vs. smaller type.


We found that 12 out of 22 news sites that use blurbs on their homepage put rules under their headlines.


[Read more on what Eyetrack III says about type and blurbs here and here.]

[在这里阅读Eyetrack III关于字体和导语的研究 ]


Partial viewing of headlines, blurbs found to be common


We found that when people look at blurbs under headlines on news homepages, they often only look at the left one-third of the blurb. In other words, most people just look at the first couple of words — and only read on if they are engaged by those words.


Here’s a heatmap of a blurb demonstrating this. (A heatmap is an aggregate view of all the eye fixations of our test subjects. Below, the orange area was viewed the most, the blue areas the least.)


With a list of headlines on a homepage, we can see where people looked with eyetracking — and again, most often it’s the left sides of the headlines. People typically scan down a list of headlines, and often don’t view entire headlines. If the first words engage them, they seem likely to read on. On average, a headline has less than a second of a site visitor’s attention.


For headlines — especially longer ones — it would appear that the first couple of words need to be real attention-grabbers if you want to capture eyes.


The same goes for blurbs — perhaps even more so. Our findings about blurbs suggest that not only should they be kept short, but the first couple of words need to grab the viewer’s attention.


On the 25 news websites we reviewed, there’s considerable variety in blurbs. Average blurb length varies from a low of about 10 words to a high of 25, with most sites coming in around 17.


[Read more on what Eyetrack III says about blurbs here.]

[在这里查看Eyetrack III对于导语的研究]


What creates “hot spots”?


In Eyetrack III, we tested several homepage designs, watching where on the page people looked. As you would expect, lower parts of the page — especially areas you have to scroll to view — receive modest viewing. But that doesn’t mean you can’t get people to look at content low on a scrolling page.


On a couple of our test homepages, we found “hot spots” for some stories. Perhaps because our testing took place in San Francisco, research subjects were drawn to one story about the site “Craig’s List” (a local online community popular since its inception in 1995). The headline for that story had an inordinate number of eye fixations compared to surrounding content, even though it was below the first visible screen of the page. We observed a similarly high number of eye fixations on a headline about clothing maker FCUK, which was placed far down on a page with a long list of headlines and blurbs.

在有些研究案例中,我们发现有所谓“热点”。也许是因为测试在旧金山开展,选用了Crag’s List站点(1995年开站以来,一直是当地的热门在线社区)。某条新闻标题比周围其他内容要获得更多的关注,尽管它不在第一屏。我们还观察到一条关于服装制造商FCUK的标题也吸引大量眼球,这条标题僻处于页面上一堆列表的极下方。

We think this spells good news for those websites with homepages that extend well beyond the initial screen view. Eyetrack III found that people do typically look beyond the first screen. What happens, however, is that their eyes typically scan lower portions of the page seeking something to grab their attention. Their eyes may fixate on an interesting headline or a stand-out word, but not on other content. Again, this points to the necessity of sharp headline writing.

我们认为这对于那些首页长度超出第一屏的站点来说是好消息。Eyetrack III发现人们的确会阅读第一屏以下的页面。只不过,他们的眼光会扫过页面较下方,寻找吸引注意力的标题。如果看到有趣的标题或特别的词,眼光就会停留,不过不停留在内容块上。这又重申了写作简明标题的重要性。

[Read more on what Eyetrack III says about homepage design here and here.]



Where’s your navigation?


While testing several homepage designs, we varied the placement of a navigation element: top (under the flag or logo), left column, and right column.


Navigation placed at the top of a homepage performed best — that is, it was seen by the highest percentage of test subjects and looked at for the longest duration. In a survey of 25 top news sites, we found 11 that used top position navigation. The other 14 used left navigation. Seven of the 25 used left and top navigation elements. None of the 25 sites we surveyed used right side navigation. It’s rare, but you can find right navigation in the news website world.


It might surprise you to learn that in our testing we observed better usage (more eye fixations and longer viewing duration) with right-column navigation than left. While this might have been the novelty factor at play — people aren’t used to seeing right-side navigation — it may indicate that there’s no reason not to put navigation on the right side of the page and use the left column for editorial content or ads.


[Read more on what Eyetrack III says about navigation here.]



What about article layout, writing style?


Eyetrack III results suggests various characteristics of article writing and layout can affect a reader’s viewing behavior.


For example, let’s take average paragraph length. Most news sites run articles with medium-length paragraphs — somewhere (loosely) around 45-50 words, or two or three sentences. In a survey of 25 top news sites, however, we did find seven that routinely edited articles to make paragraphs shorter — often only one sentence per paragraph.


Shorter paragraphs performed better in Eyetrack III research than longer ones. Our data revealed that stories with short paragraphs received twice as many overall eye fixations as those with longer paragraphs. The longer paragraph format seems to discourage viewing.


Most news website article pages present stories in a single column of text, but a handful of sites — like IHT.com and TheHerald.co.uk — mimic newspaper layout and present articles in two or three side-by-side columns. Is this as readable as the traditional (for the Web) one-column article format?


Eyetrack III results showed that the standard one-column format performed better in terms of number of eye fixations — in other words, people viewed more. However, bear in mind that habit may have affected this outcome. Since most people are accustomed to one-column Web articles, the surprise of seeing three-column type might have affected their eye behavior.

Eyetrack III的研究表明,以眼光停留计算,单栏布局比多栏布局表现更好——即人们会阅读更多文字。但是,要记住习惯会影响测试结果。多数人被培养出阅读单栏布局Web文章的习惯,看到三栏布局时的惊奇也许会影响他们的眼球行为。

What about photos on article pages? It might surprise you that our test subjects typically looked at text elements before their eyes landed on an accompanying photo, just like on homepages. As noted earlier, the reverse behavior (photos first) occurred in previous print eyetracking studies.


Finally, there’s the use of summary descriptions (extended deck headlines, paragraph length) leading into articles. These were popular with our participants. When our testers encountered a story with a boldface introductory paragraph, 95 percent of them viewed all or part of it.


When people viewed an introductory paragraph for between 5 and 10 seconds — as was often the case — their average reading behavior of the rest of the article was about the same as when they viewed articles without a summary paragraph. The summary paragraph made no difference in terms of how much of the story was consumed.


Just over 20 percent of the leading news websites regularly use summary paragraphs with articles.


[Read more on what Eyetrack III says about article layout here.]





Eyetrack III tested a variety of ad placements and formats across our various hompages and article-level pages.


The first thing we noticed is that people often ignore ads, but that depends a lot on placement. When they do gaze at an ad, it’s usually for only 0.5 to 1.5 seconds. Good placement and the right format can improve those figures.


We found that ads in the top and left portions of a homepage received the most eye fixations. Right side ads didn’t do as well, and ads at the bottom of the page were seen, typically, by only a small percentage of people.


Close proximity to popular editorial content really helped ads get seen. We noticed that when an ad was separated from editorial matter by either white space or a rule, the ad received fewer fixations than when there was no such barrier. Ads close to top-of-the-page headlines did well. A banner ad above the homepage flag didn’t draw as many fixations as an ad that was below the flag and above editorial content.


Text ads were viewed most intently, of all the types we tested. On our test pages, text ads got an average eye duration time of nearly 7 seconds; the best display-type ad got only 1.6 seconds, on average.


Size matters. Bigger ads had a better chance of being seen. Small ads on the right side of homepages typically were seen by only one-third of our testers; the rest never once cast an eye on them. On article pages, “half-page” ads were the most intensely viewed by our test subjects. Yet, they were only seen 38 percent of the time; most people never looked at them. Article ads that got seen the most were ones inset into article text. “Skyscraper” ads (thin verticals running in the left or right column) came in third place.


Reviewing 25 leading news websites, we discovered that there’s a preponderance of small banner ads on homepages. And it’s exceedingly common to find ads in the right column of news homepages. About half of the 25 sites we reviewed inset ads into article text.


[Read more on what Eyetrack III says about advertising here.]



Larger online images hold the eye longer than smaller images


News homepages typically use templates, many of which employ a predetermined size for a main image. Although the value of using a template-driven design can (and should) be debated, what we learned about photo size in Eyetrack III may be helpful to those who are wondering just how big a spot to leave for images.

新闻首页通常使用模板生成,多数会采用规定尺寸的主图片。尽管使用模板生成页面的价值可能(且应该)值得讨论,但Eyetrack III对相片图片的研究结果却会对那些想搞清楚应该给图片留多大位置的人有帮助。

Although we learned that most of our test participants did not look at images first, we also observed that images received a significant number of eye fixations. We also learned that the bigger the image, the more time people took to look at it.


One of our test pages had a postage-stamp sized mug shot that was viewed by 10 percent of our participants. Compare that with an average-sized photo (about 230 pixels wide and deep) that drew gazes from about 70 percent.


We found that images that are at least 210 x 230 pixels in size were viewed by more than half of the testers. Our research also shows that clean, clear faces in images attract more eye fixations on homepages.


Article-level pages seem to follow suit. Again we found that the larger the image, the more users were drawn to it.


In reviewing 25 news websites, we found that about 20 percent routinely use small images on their homepages. Four out of five sites routinely place their homepage main photo in the upper left.


And here’s an interesting research tidbit: We noticed that people often clicked on photos — even though on our test pages that got them nowhere (and indeed, clicking on photos does nothing on many real news sites).


[Read more on what Eyetrack III says about images here.]

[在这里阅读Eyetrack III关于图片的研究结果]


Text for facts; multimedia graphics for unfamiliar concepts


Overall, we observed that participants were more likely to correctly recall facts, names, and places when they were presented with that information in a text fomat. However new, unfamiliar, conceptual information was more accurately recalled when participants received it in a multimedia graphic format.


So what does this mean? While overall we did see a slight, although not statistically significant, increase in information recall from text stories, we should note that most of our recall questions were about facts, names, and places. Story information about processes or procedures seemed to be comprehended well when presented using animation and text. A step-by-step animation we tested supported this idea.


We also observed that most participants attended to only two forms of media at a time. For example, in one of our testing situations users were presented with audio, still images, and written captions. We observed that they directed their attention to the audio and images. Important information in the photo captions were not read by many.


The bottom line is that the best journalists working in multimedia environments know how to make good choices about the presentation of story information. As demonstrated in this research, some information is best conveyed by the use of good, descriptive writing. Other information is better explained graphically.


[Read more on what Eyetrack III says about multimedia comprehension here, and read additional general multimedia observations here.]


We’ve covered some of the highlights in this article, but there’s lots more, so please spend some time exploring this website. Use the navigation devices at the top of this page and in the left column.

© 2022 Xiaoxiao’s Weblog. All Rights Reserved. 粤ICP备15088982号