Online Images: Faces, Size Attract
Take a look at most news site homepages and you'll generally find that photos consume only a small portion of the screen. Some sites, such as South Florida's Sun-Sentinel.com or Las Vegas' ReviewJournal.com, provide users with a "click to enlarge" option that results in a pop-up window with a larger photo size than the homepage "postage-stamp" provides. Other sites, such as WashingtonPost.com and MSNBC.com, seem to give photos a bit more homepage real estate.

EYETRACK III FINDINGS
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.

But when it comes to images and online-news sites -- either on homepages or interior pages -- is bigger really better?

Initial Eyetrack III observations suggest that the answer is yes. Image size does seem to affect the number of photos noticed by online news consumers. It also affects the time they spend looking at pictures. Our observations also indicate that people's faces draw users' eyes the most.

For the purposes of this study we assumed that our images varied only in size and in the number of people depicted in them. Images were not controlled for visual quality or consistency. Future studies ought to consider how different qualities of photographs translate into different viewing behaviors.

Within this scope of study, we observed:

  • On both homepages and article-level pages, photo size affects the number of users seeing photos and the time they spend with them.
  • Faces in photos draw users' eyes.
  • Multiple faces in photos attract more viewers.
  • A minority of users routinely click on photographs.

Observation: Larger photo size increases the percentage of users seeing photos and the time they spend looking at them.

For this study, we tested three common sizes of photos: small (about 80x80 pixels), medium (210x230 pixels), and large (365x240 pixels). Thumbnails of the five images we used appear below.


Small photo


Medium photo


Medium photo


Large photo


Large photo

We then placed these photos on the mock webpages we created for this study and observed eye fixations and movement. Take a look at these sample pages (click to enlarge):

Small photo size: Homepage no. 3

Medium photo size: Homepage no. 1

Large photo size: Homepage no. 4

When comparing homepages with small photos to homepages with average-size photos, the percentage of users who noticed the images (that is, whose eyes fixated on the image for at least a fraction of a second) almost doubled.

Smaller photos just don't attract viewers -- they are often ignored entirely. However, there does seem to be a point of diminishing returns as photo size increases. Although large photos do get the greatest percentage of viewers and the greatest duration of viewing, the difference in the percentage of viewers who notice the medium photos vs. the large photos is not all that substantial.

At almost double the page real estate of the average-size photo, the large photos attracted only slightly more people to look at them than the average-size photo. However, differences in the length of time spent with larger photos remains substantial. The chart below provides specifics.

Photo viewing patterns on homepages

Small photo

Average photo

Large photo

Percent of participants seeing photo

43

80

88

Percent increase over next-smaller size

N.A.

86%

10% 

Amount of time spent viewing photo (in seconds)

0.6

1.5

2.3

Percent increase over next-smaller size

N.A.

150% 

53% 

Both of the large images used in this study had headlines superimposed on the image. It is important to note that this fact may contribute to -- or account for -- the increase in viewing duration.

On article-level pages, the same observations seem to hold true. Larger images (approximately 500x300 pixels) receive almost twice as many fixations as medium-sized pictures (approximately 300x200 pixels).

Article-level page with large image:

Article-level page with medium image:


Observation: Faces in photos draw users' eyes.

The homepages used in Eyetrack III all contain photos with images of people. We learned that with every image -- whether a real photo or a graphic image -- users zeroed in on faces.

Here are a few examples. The homepage below contains a screen shot of an image from a video game. On this heatmap you'll see that those who looked at this image zeroed in on the face. That's where about 60-70 percent of the users' eyes focused. (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.)

Now look at this homepage, which contains a main photograph of two people. Again, the "hot spots" are the faces, with more than 60 percent of the group focused there.

Finally, look at this homepage image, taken from a distance. The faces of the individuals are a small percentage of the image, and still, users found their way to at least one of them.

The third example introduces an additional variable -- the headline of the lead story is placed inside the photo and above the faces. Taking into account our observation that users eyes tend to fixate on main headlines (see our article on eye viewing patterns), we cannot ignore that the location of the headline type on the photo could have contributed to eye fixations in that area of the page. We also must remember that our test images were not controlled for visual quality or consistency. In the case of this homepage image (which is grainy and amateurish in its composition), these qualities could have had a negative effect on user interest.

A final observation in this area concerns the effect of an image's clarity and readability. It seems logical that on a busy homepage with a lot of clutter, or "visual noise," that a tight image with a strong focal point would draw gazes. Our data seem to support this observation. Compare the two pages below again. Both images are of two people and both have headline type placed on top of them. However, the headline gets fewer gazes on the first image, where the faces are clearer and larger, than in the second example, where the faces are not as close up. To state this observation another way: The clear, readable image of the two men may have such stronger drawing power than the distant image of the man and woman.


Observation: Multiple faces in photos attract more viewers.

Our data in this study suggest that viewers spend more time with images that contain more than one face.

Comparing the images on the two homepages below illustrates this point best.

First, take a look at the image on Homepage No. 7, which has only one face clearly visible.

Then, take a look at Homepage No. 6, which has the same size image, but with two faces clearly visible.

As the chart below indicates, there is a substantial difference in the percentage of users who view the image on homepages No. 6 and 7, and the amount of time they spend with the image (more than three times greater).

Image interest and time spent gazing

Homepage No. 7
(Image has one face visible.)

Homepage No. 6
(Image has two faces visible.)

Percent of participants seeing image

67

94

Amount of time spent with image
(in seconds)

0.7

2.5



Observation: People routinely click on photos.

Most news websites publish photographs that are not links -- that is, if you clicked on them, nothing would happen. Some websites do make homepage images into links -- mostly to accompanying articles, but sometimes to enlarged views of smaller images placed on the homepage.

Some test subjects (a minority, but a substantial percentage) clicked on photos, even though there was no indication that clicking might produce a result.

The heatmap image at right shows clicks on an image from three people out of 25 who viewed this page. (The purple X's are clicks; the numbers identify individual test subjects). You'll see this behavior throughout the heatmaps for this study.

The researchers have observed this behavior on many studies prior to Eyetrack III, so this isn't new. But judging by how seldom real-world news sites make photos links, perhaps it's not widely recognized by the industry.


Tips

  • Images that are least 210x230 pixels seem to keep viewers most engaged. Remember that on both homepages and inside pages, the larger the image, the more it will be noticed and the longer a viewer will engage with it.
  • Understand that online-news users' eyes move toward faces when viewing photos of people. When choosing images with people for homepages, tighter images where faces are easy to read may work best to draw reader attention.
  • When choosing photos of people for homepages, remember that viewers tend to look at and spend more time with images that have more than one face clearly visible.
  • Since it's common for some users to click on photos, perhaps it's worth considering making homepage images links. What to link to? Consistency throughout a site is most important, but a photo click could always bring up a larger version of the image; or from the homepage it could always lead to the full article associated with the photo.

Add/view feedback on this report


Written by Laura Ruel and Steve Outing, project managers; research and tools by Colin Johnson, Greg Edwards, and Leslie Kues of Eyetools Inc.