Content carousels reviewed: Yahoo loses, Sky wins
Carousels (sliders as they're sometimes known) are a good way to promote several items of content without using up too much space on your homepage.
Here's a roundup of sites using them - and how successful I think they are. At the end - once I've called Sky a narrow winner over the BBC - I've given some tips on implementing a good one.
Yahoo UK carousel: 1 point out of 10
E4 carousel: 2/10
Some of the elements are videos that you can play directly, which is good. But personally I find the bold white out of black hard to read.
VNUnet carousel: 2/10
On the plus side, vnunet's is clear enough what the numbers are for. On the minus side, who can be bothered to click them when there's no clue what they are going to show you?
ABC carousel: 3/10
ABC's is another one where it's not clear what the 6 elements are. But at least it rotates quickly. The 'watch free episodes' link is confusing as it never changes. And it looks like they were caught out by widescreen - the big grey box is always half empty.
CBS carousel: 3/10
CBS: great design - lousy functionality.
First, it's obscured by an advert when you load the page. The control showing there are 5 items doesn't appear until you mouseover (so I didnt know it was there, or that the pictures were going to change). And there's no way to see what the 5 elements are. On top of all this, the relationship between the carousel and the top menu items is really unclear.
ITV carousel: 5/10
ITV's looks good and its fairly clear what the tabs do. However, it's not clear where to click to actually see the page (you can in fact click anywhere, but you have to work this out). And it's a shame for a TV site you can't play video from within the carousel.
Express carousel: 6/10
It's clear what the tabs are for. everything that should be a link is, but there's a 'read more' call to action just in case. There are multiple content items in each tab in case the main one isn't of interest.
It's not perfect, obviosuly. It rotates automatically, which isn't clear and therefore annoying. And on the features panel, the headline was too long so the copy was all sitting on top of each other. And the font size is tiny. But these are mainly issues with the Express design - as a carousel, it works well.
I've always liked Videojug's. It rotates automatically but you can also manually control it if you want to go back to one. There's a little timer showing how long until it rotates the content. My only criticisms are that the font is a bit small, and Ive always found it a bit wierd for a video site that you can't play the video from the carousel itself.
Consumer Reports carousel: 6/10
Normally i wouldn't give a mark this high to a carousel which made you guess what the elements are. However, it's got an obvious 'Play / pause' control - the only automatic carousel I came across that did. So I gave it some more marks.
BBC homepage: 8/10
Beautifully designed, as you'd expect, and you can even play video from within the carousel.
I don't think it's 100% obvious that the tabs control the box, however. Especially as when I load the page, the 4th purple tab seems to be the default one, which isn't very intuitive.
And it's shame that the images are all static photos - some motion might have been good.
Sky News: the winner with 9/10
This one has everything. It rotates the content automatically, with a little timer showing when it will change. The images are actually videos, so it has a real energy about it. It's clear what's going on with the 5 elements - and you can also control them manually.
The only issue I has was that when I clicked the first story, there was no sign of this video on the page I was sent to, so it didn't really deliver on its promise. Functionality and design wise, however, I think this one's spot on.
Tips on implementing a good one
If you want a carousel, I reckon you should follow these rules:
- Let users see what all the elements are without clicking
- Make them flexible enough to handle different types of content (pictures, videos, multiple links etc).
- Make sure they are easy to understand how to control
- Make it obvious what to click to change the content of the carousel, and what to click to go to the next page.
- And if they rotate elements automatically, make sure it's clear what is happening and when.
Learn more about homepage carousels / sliders
Here is some more reading:
- Home Page Carousel Showcase: 40+ Carousel Designs (actual examples here).
- Implement a carousel yourself using the YUI Library instead of jquery. There's also a Carousel Pattern at the Yahoo design pattern library.
- Here's a 3d carousel using mootools, although I think this is getting away from being a usable one ...