CNET.com’s Animated Story Teaser
August 21st, 2005
On the SIGIA-L discussion list, there’s been a discussion about the lateral links NYTimes.com is using.
In this discussion, the ever present Ziya Oz asked me:
Are you happier with the C|Net “semi-opaque sectional navigation” example I gave?
What Ziya is referring to is the Animated Story Teaser (my term), a lateral navigation design element that News.com is using to encourage readers to explore other articles on the site.
The Animated Story Teaser appears in the middle of a story:
Click to see the animated story teaser in a news.com article.
If you go to a news story (like this one), you can see the teaser in the middle of the page. It scrolls through several different stories, one after the other.
If you move the mouse over the teaser element, the animation stops and two scroll controls appear in the lower right of the element:
I think the concept is interesting.
The text is better than “10 of 14″, certainly. Because they are headlines, they run the risk that a lot of news sites run — the text is less informative and more “catchy”, thereby not communicating as much scent as they could. I wonder if these links communicate the best trigger words for their content.
The images, for the most part, don’t seem to communicate anything about what the story is about, so they feel ornamental to me. (Ornamental is one type of graphic. Two other types are Navigational — an image that communicates scent — and Content — an image that communicates information.) Our studies consistently show that ornamental graphics don’t add any real value (either for performance measures or subjective ratings), but do increase development time. Could you get the same value from the links with just a text-based presentation?
The fact that the reader needs to use the little scrolling controls to see the other articles is problematic. I actually never noticed this element before until Ziya pointed it out (and I probably visit the site 3-4 times per week). Our studies show that, on a site like this, most users keep their mouse on the scroll bar (or, when using a scroll wheel, keep the mouse still) until *after* they’ve decided what they are going to click on. I wonder if this presentation performs better than “The Pulse” presentation of links in the right column.
I’m also intrigued that the image is placed in the middle of the article, instead of at the end. If the reader is not done reading, will they be distracted by the article? Would it work better for most users if it was placed *after* the text? The question I have is where is the best placement for this, from a seducible moment perspective.
So, to summarize my answer to Ziya’s question:
Pros:
- More useful text
- potentially useful graphics
Cons:
- Graphics could be a lot of work
- not necessarily placed in layout well
- must use mouse to see links
- trigger words may still be missing
August 24th, 2005 at 8:35 am
At first when I clicked the link to see this example, I didn’t see it. I only saw an ad that was placed in the copy. Another con is its ad-like appearance.
August 25th, 2005 at 2:22 pm
I’ve seen these used before and don’t care for them. Some don’t even have those little scrolling controls or, as in your case, I’m not seeing them. Even if I did see those controls, I am unlikely to use them and will just wait for the story to pop up again or forget it if it takes a long time to get back to that story. How do these thing come through on screen readers, if they do at all?
August 30th, 2005 at 7:12 pm
I’m on the development team at News.com and, in conjunction with the editorial team, I built this “animated story tease” (not a bad name, but we call it the carousel). We’ve had this in our stories for some time now. It was originally a promotional spot for one story, but we thought we might have some success by adding a few more to the mix.
Ziya was observant in calling it “semi-opaque,” as we originally had the promos fade from one to the next using JavaScript and CSS transparency. We received some complaints about it hogging CPU time, however, so we decided to forego the fading effect.
The point of this component is to let readers who may have come directly to the story via an outside link that we have other interesting news on the site. We wanted this promo to attact the eye, but not be overly intrusive.
To be clear about how this works: Promos rotate from one to the next in a constant loop until a user interacts with the component by mousing over it. At that point, the navigation appears, and the promos no longer scroll. I’m a bit confused by the comment “The fact that the reader needs to use the little scrolling controls to see the other articles is problematic” as this necessarily displays each promo until it’s “touched.” The navigation, in my mind, is more important to help a reader get back to a promo that caught his eye, but switched out before he could get his mouse to it.
As to the “seducible moment,” that’s an excellent question. Where does a reader’s interest start to wane? Some may get all the information they need in the headline and the first paragraph. Some may read the entire story and not be sated. Sometimes this is dictated by the quality of the story, but most often it’s dictated by reader interest. For a news site that produces 50+ articles a day, to track this at a story level is impractical, if not impossible.We generally place the carousel toward the bottom of the story. We want to make it noticeable before the end, and make it easy to get back to. To put this after the story would, I think, make it more ad-like and much easier to ignore. To put it higher would be overly distracting.
To touch on a couple other points: Jessica comments that it looks like an advertisement. This is disappointing, but not entirely unexpected. We’re very careful to flag all ads on our site as such. Our promos have a fairly specific style and the flag at the top says “In other news.” Other than putting text above the component that reads “Not an advertisement” I’m open to ideas. We may very well try text links at some point. Jared mentions a concern that the graphics could be a lot of work. It’s not that much. We’ve already produced these graphics for these stories in other formats, and it’s easy to migrate them to this format. Yes, some of the graphics are ornamental, but considering that we’re a tech news site, we often find ourselves illustrating concepts that have neither specific nor iconographic imagery.
For what it’s worth, there’s some of the thinking that went into the carousel. I’m sure there are ways to improve this component, and I appreciate that you’ve taken the time to consider it. Comments and suggestions are most welcome.