Taking a ride with carousels

Are rotating displays of Web content an effective way to promote news stories? This is the second in a series of articles about findings from the studies conducted for the member of the DiSEL’s Eyetracking Research Consortium.

One challenge that faces all of us who have a wealth of content on our Web sites is how to best promote it. Unlike a print magazine or newspaper there is no big stack of paper to provide a clear physical indicator that there is much to read and experience beyond the front page.

Although we can debate the effectiveness of using a Web site’s front page when it comes to promoting content¹, our industry is trying a variety of methods to tackle this challenge. One method is the “carousel” – or a rotating display of a site’s content that appears in a dominant spot on the front of the page.

You can see a variety of carousel styles on sites such as MarthaStewart.com, aol.com, msn.com and even the newly redesigned whitehouse.gov. This past October, the Yahoo! Developer network launched the “carousel control” in their user interface library. They describe it as a widget that provides a means for “browsing among a set of like objects arrayed vertically or horizontally in an overloaded page region.”

So, the obvious question from the DiSEL research consortium was: Do carousels work on news sites?  Also, is there is a preferred design style that is most effective? With the help of page prototypes created by USAToday.com² we put some carousels to the test. Here’s an overview of some of our findings.

What we did

In July of 2008 we tested 54 people with a mean age of 31. About three-fourths of the participants were women and one-fourth were men. Most had some college education.

This study was conducted in conjunction with two others that explored the ideal number of links and images on home pages. (More on these studies in future columns.) Test subjects were solicited via Craigslist, local newspaper sites and blogs. Each participant was given a $20 Target gift card for participating. The entire test took about 40 minutes per participant.

The third test conducted was the carousel test. Users were directed to one of three home pages and asked to “browse the site as you normally would” and to “tell the experimenter when you have seen what you would like of the site.”  If test subjects browsed beyond five minutes, they were asked to stop.

While users browsed the site, we tracked their eye movements using the Tobii eyetracker.  

After the browse time, users completed a questionnaire that assessed their thoughts about the site’s effectiveness and collected demographic information.

Here are the three different home pages viewed, with links to the actual test sites.

Arrow version (Link to test site)

This site’s home page contains an automatically changing carousel that allows the user to control the rotation of the stories by clicking on navigational arrows in the upper right of the carousel element. Seventeen of the 54 people tested saw this version of the carousel.

Dot version (Link to test site)

This site’s home page contains an automatically changing carousel that allows the user to control the rotation of the stories by clicking on navigational dots in the upper left of the carousel element. Nineteen of the 54 people tested saw this version of the carousel.

Thumbnail version (Link to test site)

This site’s home page contains an automatically changing carousel that allows the user to control the rotation of the stories by clicking on thumbnail images to the left of the main image in the carousel element. Eighteen of the 54 people tested saw this version of the carousel.

What we found

To make these results useful to those thinking about carousel use as a promotional tool, we examined the users’ eyetracking and also asked them survey questions to provide us with some of their overall impressions.

Survey says….

As the chart below indicates, we found that the type of carousel used did not seem affect how engaging users found the home page. Interestingly, though, we did see that users who viewed the home page with the Thumbnail version of the carousel, felt more strongly that the Web site was easier to navigate.

Those viewing the Arrows version also had a stronger desire for more stories on the home page. This could be due to the fact that the arrows navigation did not clearly indicated the number of stories available in the carousel.

Another result worth noting is that users viewing the Thumbnail version of the carousel seemed to indicate more than the other two groups that the overall site was easy to navigate.

All three groups were fairly neutral when it came determining which stories were most important.   The carousel style did not seem to provide them with a clear indication of story hierarchy.

In light of that, we also wanted to know how did users would respond to this question:  What was the headline for the main news story on the site?

As the chart above indicates, is seems that users who viewed the Arrow version of the carousel were more apt to say the first story appearing in the carousel was the “main” story. Those with the other two versions were more apt to say that it either all or some of the stories that appeared in the carousel element.

All these survey results – while purely observational – may suggest that editors ask themselves what their goals are with one type of carousel-style presentation over another. Obvious navigation – such as thumbnails – seems to encourage users to view the site navigation as easy. It also may be an indicator to users that all stories within the carousel are of equal importance.

But, this is what users SAID. Let’s take a look at the hotspots to see what they DID.

 Eyetracking shows…

Eyetracking offers researchers valuable information about where users actually look on a site. It is accomplished by calibrating a user’s pupils with a small camera hidden in the base of the computer monitor. Calibration takes only a few seconds, but the tracking results allow researchers to know where users’ eyes went within a centimeter of accuracy. (For more on how eyetracking works, click here.)

We can get a variety of data forms from eyetracking. An aggregate view of what viewers saw is displayed in a “hotspot” or “heatmap” of the Web page studied. The chart to the left details how to read this data.

We generated hotspots for users’ fixations on each version of the carousel. Here are hotspots from the top portions of the page, which seemed to show us the most interesting data about the pages. See the actual hotspots from the pages below.

Past results ring true

As eyetracking researchers, we always will spend some time observing what trends are similar to results we found in past studies. In this case, we found two things worth mentioning:

The areas of the photos that got the most fixations were faces.

Top navigation gets the most use.

Past studies have shown that faces in photos are the areas where eyes tend to fixate. From observation during this study (and the heatmaps below) you can see that this is true again. No matter what carousel navigation style was used – and regardless of the size of the photo or the size of the person in the photo – users tended to look for and find that human element to relate to. (Stay tuned: In a future column, we will go results of a study conducted with prototype pages from the DesMoinesRegister.com that experimented with size and quantity of images on a home page.)

We also saw that the carousels that employed top navigation elements (Arrows version and Dots version) got more clicks than the Thumbnail version. Other factors (discussed below) contributed to this observation, but it is interesting we consistently find users viewing and using navigation more if it runs along the top of a page or page element.

Attention to change

One clear observation is that the Dots version had a higher percentage of user fixations on all elements on the top part of the page than the other two versions (Arrows and Thumbnails).

Why? Well, one clear difference here is that the navigational dots changed color when story changed. The change had high color contrast as well – from a blue dot to a white dot. The moving dots seemed to draw attention to the page overall.

The Arrows version had no visible change in when stories changed in the carousel. In the Thumbnail version the box around the image changed when the story changed, but the movement and the change in color contrast was not as marked or clear as the dot changes.

So it seems that the moving navigational dots in the Dots version encouraged a higher percentage of users to view all aspects of the top portion of the page. For example, only about half of the users looked at the page headlines on the arrows and thumbnail pages, but closer to 70 percent looked at this list when the dot navigation existed.

Interestingly, though, even though there was a higher percentage of eyes on the headlines in the Dots version, there were less total clicks in this area of the page than on the other two. In addition there were more “dead” areas – or areas with zero eye fixations – on the tops of the pages with the Arrows version and the Thumbnail version than on the page with the Dots version.

The type of carousel used did not seem to affect the number of clicks on the carousel photo and the corresponding headline and blurb.

These observations seem to suggest that if you are going to use a carousel element it may be best to place navigational elements above the display elements and to utilize a navigational design that clearly indicates the change from one story to the next.

But – what do you think?  Below are the hotspots from each carousel version. We look forward to your thoughts and comments about what you see – and why.   Post your questions here. We’ll respond.

Arrows version 

Automatically changing carousel that allows the user to control the rotation of the stories with navigational arrows in the upper right of the carousel element.

Dots version

Automatically changing carousel that allows the user to control the rotation of the stories with navigational dots in the upper left of the carousel element.

Thumbnails version

Automatically changing carousel that allows the user to control the rotation of the stories with the use of thumbnail images to the left of the main image in the carousel element.

---

¹ Some news sites editors have mentioned “off-the-record” that less than 20 percent of their story traffic comes from people linking to pieces from the home page. The rest comes from blog posts, Google searches, Delicious links and other forms of online promotion.

² Many thanks to DiSEL Research Consortium members Josh Hatch and Kristin Novak at USAToday.com for creating the testing materials. Also, thanks to UNC-CH Ph.D. candidate Bart Wojdynski for his assistance with designing this study and running test subjects.