Are carousels effective?

13 Sep 2009 - 5:27pm
4 years ago
12 replies
1923 reads
Jay Morgan
2006

This begs the question that people will care about the _content
inside_ the carousel!

You could base your interaction design on existing design patterns
documenting carousels, but the usability of it does not cause people
to care about what the client is promoting nor compel them to click
through.

Make sure you're asking the right questions, soving the right
problems. In this case, it sounds like the primary challenge is
validating that the content is important, meaningful, and valuable to
the people visiting that site.

Hope this helps,
Jay

On Sun, 13 Sep 2009 12:29:26, elizabeth wrote:
> Hello,
> I'm working on a website where the client is considering putting an
> animated carousel on the home page which would have a big image and a
> small description and a link to "read more" or take some other kind
> of action.
>
> I was wondering whether people have seen any usability studies or
> know of any eye tracking reports which show whether these carousels
> are effective in getting the user愀 attention and click throughs?
> - I wonder if they might not be victims of banner blindness?
> Also, do the ones with tabs or arrows get people interacting and
> navigating them?
>
> This one is an example of one which I think is quite effective:
> http://www.amnesty.org.au/ (though you can't pause it).
>
> Obviously, good usabiliity here is a mixture of getting the timing
> right between image changes, using eye-catching images, getting the
> spatial relationship right to group images, buttons and descriptions,
> keeping the rest of the page free of competing images and ads etc.
> But is that enough?!
>
> Regards,
>
> Elizabeth
>
>

--
Sent from my mobile device

------------------------------------------------------------
Jay A. Morgan
Director, UX at Gage

twitter.com/jayamorgan
linkedin.com/in/jayamorgan
------------------------------------------------------------

Comments

13 Sep 2009 - 8:49pm
Petteri Hiisilä
2004

Hi Elizabeth,

Here's some thoughts.

Carousels like the one in Amnesty Australia (http://
www.amnesty.org.au/) are good for displaying site highlights, main
stories, new products and generally getting attention and clicks to
some particular pages that you think people would like to visit. It's
great when you want to cherry-pick material and give your good stuff a
lot of screen estate.

However, it's slow and frustrating for site navigation - and using
tabs and arrows only makes it worse. I wouldn't use it as a navigation
design pattern. Think about it this way: clicking the carousel isn't a
goal. Getting into the content is.

Carousels that hide content is bad for navigation, because the user
will have to click through everything to see what's available.
Carousels that display a centered item plus some side items is a
little better, but the users would still have to 1) click to focus to
the content and 2) open it. Step 1 is unnecessary excise work.

So, I wouldn't put tabs on top of a carousel, but I would consider
having a separate carousel on top of each main section of the site, if
the sections contains material that need highlighting. Just keep the
user interaction _inside_ the carousel element simple. Amnesty's
1-2-3-4 approach works.

For visual navigation: Grid is a good option if you want to do visual
navigation, because one click is enough to get to the content. Grid
plus tabs would also work, if the groupings make sense and the tabs
have meaningful labels. Grid plus arrows also work, but you have to
display clearly how many screens or pages of content there is. The
drawback is that grid'ed items can't be as big, but I don't know a
design pattern that would combine the visual appeal of a carousel and
the snappiness of a grid.

iTunes 9 Store has a pretty good implementation of carousels and
tabbed navigation. Carousels are used to highlight popular and
featured material, and tabbed drop-downs give access to all of what's
available. That, and a good search, will work great most of the time.

Consider soft transitions between carousel changes, such that it
doesn't steal attention when the user is trying to concentrate on
another part of the page.

(Sorry, I don't have any usability reports to share :)

Best,
Petteri

--
Petteri Hiisilä
Senior Interaction Designer, owner / iXDesign

Mobile: 650-450-6014 (USA), +358505050123 (FIN)
Twitter: http://twitter.com/petterihiisila
LinkedIn: http://www.linkedin.com/in/petterihiisila

On Sep 13, 2009, at 12:29 PM, elizabeth wrote:

> Hello,
> I'm working on a website where the client is considering putting an
> animated carousel on the home page which would have a big image and a
> small description and a link to "read more" or take some other kind
> of action.
>
> I was wondering whether people have seen any usability studies or
> know of any eye tracking reports which show whether these carousels
> are effective in getting the user´s attention and click throughs?
> - I wonder if they might not be victims of banner blindness?
> Also, do the ones with tabs or arrows get people interacting and
> navigating them?
>
> This one is an example of one which I think is quite effective:
> http://www.amnesty.org.au/ (though you can't pause it).
>
> Obviously, good usabiliity here is a mixture of getting the timing
> right between image changes, using eye-catching images, getting the
> spatial relationship right to group images, buttons and descriptions,
> keeping the rest of the page free of competing images and ads etc.
> But is that enough?!
>
> Regards,
>
> Elizabeth

13 Sep 2009 - 3:00pm
Rodion Galperin
2009

Hi Elizabeth,

The most effective carousel I have personally seen and use is on
hulu.com
hulu.com streams television programs and movies at no cost to the
viewer. The carousel changes often (weekly i think) and displays
either brand new shows or reminders of new episodes for a popular
show.
The reason I think is example is so effective is that the information
changes on a regular basis, it is useful to the viewer and most of
all, it is very user friendly.

Hope this helps. Cheers!
Rodion

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Posted from the new ixda.org
http://www.ixda.org/discuss?post=45551

14 Sep 2009 - 1:56am
David Drucker
2008

Hi Elizabeth,

I'd like to add that I think there are a couple of ways of thinking
about carousels. I think that in a way, they are 2 things:

1) An attempt to imitated a piece of physical interaction that exists
(or rather, existed) in brick-and-mortar CD stores and
2) A kind of user-driven slide show of a subset of content on a site
that is displayed with attractive graphics

Both of these description support the behaviour of browsing a subset
of a content collection In the physical world, you'd never find an
entire store's collection in their carousel. You'd just see it in a
section - perhaps a small bin of recent arrivals or sale items.
Secondly, slideshows of a particular subject are common on the web,
and the idea of a user dragging slides from one end to another offers
an experience that might be seen as more intimate than the play/pause
controls.

In short, Carousels are for making a subset of content more
attractive, because they invite the user to draw on a behaviour they
learned in real life: browsing in a bin. A UI employing them isn't
efficient for navigation, nor is it supposed to be.

Come to think of it, I think Apple's addition of iTunes-style
carousels to the Mac OS Finder was always a bit odd, but I suppose
there are some use cases where such a view could come in handy (such
as a collection of graphics where you'd like to see it as a gallery).
Me, I prefer the Snow Leopard idea of giving the user the option to
the view of a window to really huge previews of content right there in
the window if they want, and even be able to play movies, sounds and
page through document thumbnails (or even slightly larger) without
opening them.

--
David Drucker
Vancouver, BC

david at drucker.ca

14 Sep 2009 - 6:21am
Anees Uddin
2009

User control is essential, the ability to pause a carousel is
important because it has the potential to interfere with the users
focus on other page elements.

Timers that indicate that the carousel is about to step enable the
user to time their interactions correctly. For example, if the user
knows that there are four seconds left until the next step, he or she
has a chance to scan another page element. I find that not knowing the
step timing can be very disconcerting and makes for an anxious user.

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Posted from the new ixda.org
http://www.ixda.org/discuss?post=45551

14 Sep 2009 - 6:51am
Thomas Petersen
2008

They can be very powerful if you are careful about performance and how
they work.

The functionality in itself is not enough it's really about HOW you
make it work.

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Posted from the new ixda.org
http://www.ixda.org/discuss?post=45551

14 Sep 2009 - 7:04am
Janna Cameron
2004

This style of auto-running carousel seems like a poor choice
accessibility-wise. Unfortunately I don't have a paper to quote here..

People using assistive technology/ a keyboard only need enough time to
select the invitation links.

The screen changes could be disorienting to screen reader users. While
"ARIA live region" markup could help people be aware of changes, the
associated stream of announcements would be really annoying.

Janna

-----Original Message-----
From: discuss-bounces at lists.interactiondesigners.com
[mailto:discuss-bounces at lists.interactiondesigners.com] On Behalf Of Petteri
Hiisila
Sent: September 13, 2009 9:49 PM
To: IXDA list
Subject: Re: [IxDA Discuss] Are carousels effective?

Hi Elizabeth,

Here's some thoughts.

Carousels like the one in Amnesty Australia (http://
www.amnesty.org.au/) are good for displaying site highlights, main
stories, new products and generally getting attention and clicks to
some particular pages that you think people would like to visit. It's
great when you want to cherry-pick material and give your good stuff a
lot of screen estate.

However, it's slow and frustrating for site navigation - and using
tabs and arrows only makes it worse. I wouldn't use it as a navigation
design pattern. Think about it this way: clicking the carousel isn't a
goal. Getting into the content is.

Carousels that hide content is bad for navigation, because the user
will have to click through everything to see what's available.
Carousels that display a centered item plus some side items is a
little better, but the users would still have to 1) click to focus to
the content and 2) open it. Step 1 is unnecessary excise work.

So, I wouldn't put tabs on top of a carousel, but I would consider
having a separate carousel on top of each main section of the site, if
the sections contains material that need highlighting. Just keep the
user interaction _inside_ the carousel element simple. Amnesty's
1-2-3-4 approach works.

For visual navigation: Grid is a good option if you want to do visual
navigation, because one click is enough to get to the content. Grid
plus tabs would also work, if the groupings make sense and the tabs
have meaningful labels. Grid plus arrows also work, but you have to
display clearly how many screens or pages of content there is. The
drawback is that grid'ed items can't be as big, but I don't know a
design pattern that would combine the visual appeal of a carousel and
the snappiness of a grid.

iTunes 9 Store has a pretty good implementation of carousels and
tabbed navigation. Carousels are used to highlight popular and
featured material, and tabbed drop-downs give access to all of what's
available. That, and a good search, will work great most of the time.

Consider soft transitions between carousel changes, such that it
doesn't steal attention when the user is trying to concentrate on
another part of the page.

(Sorry, I don't have any usability reports to share :)

Best,
Petteri

--
Petteri Hiisilä
Senior Interaction Designer, owner / iXDesign

Mobile: 650-450-6014 (USA), +358505050123 (FIN)
Twitter: http://twitter.com/petterihiisila
LinkedIn: http://www.linkedin.com/in/petterihiisila

14 Sep 2009 - 9:41am
Brian Laing
2008

I think much depends on the user's purpose. I've tested carousels on
a reference site where people arrive with a very specific information
need. They tended to ignore the carousel because they interpreted it
as a promotional tool used by the site owner to get them to look at
something other than what they came for.

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Posted from the new ixda.org
http://www.ixda.org/discuss?post=45551

14 Sep 2009 - 3:04pm
Anonymous

You folks are great! Thanks for your thoughts.

Some of you have actually expressed some of my own fears
(accessibility, banner blindness, not to be confused with
navigation...).

The carousel/slideshow, if it gets off the ground, would have some
way to pause it and wouldn't be done in Flash, everything else is
yet to be decided.

Regarding some of your other comments:

Hulu IS pretty cool! It is very eye-catching - nothing else
competing for your attention.
The only thing there is that people enter the site specifically to
watch TV, which makes it a bit different to an information/text-based
site. But still a nice example.

Another site that kept coming up when I was googling the topic was
this one: http://www.marthastewart.com - Different bloggers praised
it's carousel/tabbing. I don't think it's too bad either, partly
because the tab labels are clear. They still require the user to be
in the mood for exploring, though maybe this lady's users do just
that.

Jay, the content of the client's site is also updated often, and,
depending on the day, is pretty important to the site's users so I
don't think the content quality would be a major problem. But yep,
the best interaction design in the world isn´t any good if the
content isn't worth checking out!

David, I agree, as casual contextual navigation on secondary pages
this element could be very useful.

I also like the idea of dragging, that's something to look into.

Anees, I haven't come across any examples of timers myself, but can
imagine something similar to a typical page loading progress bar
animation might do the job. However, I think if there were numbers,
it might be distracting. Some way to pause and continue, like
playing a video on youtube could work...

The other idea I was playing with to avoid all these concerns(!!) was
having 2 or 3 different images that load randomly when someone visits
the page, that way regular users will see different items, without
the animation or the complication of
tabs/arrows/descriptions/groupings...

Anyway, many thanks for all your input. Other good examples/ideas
are always welcome.

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Posted from the new ixda.org
http://www.ixda.org/discuss?post=45551

15 Sep 2009 - 12:14am
Manish Govind P...
2006

For carousals, the Marthastewart one is better than the Amnesty International or the Hulu one. while Amnesty's carousal has 1 2 3 4 as the carousal navigation elements, the Hulu one has just blocks on them. Some other carousals have dots on them instead of showing the content title in the carousal. As a user, I need to wait for the next item to reveal itself and can never remember one if i have to revisit. The Marthastewart one clearly states what the content in the carousal is, making it easy to browse through and remember as well. Users are usually short on patience and banner blindness is another issue as well.
Regarding accessibility, does javascript still fall under the not-a-good-idea category ?
Its evident that updated content, navigation, UI control and all the confusion that could arise out of it for the screen reader/assisted technology user are issues that neither Javascript nor Ajax or Flash resolve at the moment.

Cheers!
Manish Govind Pillewar
User's Experience + Business Strategy
www.studios.thoughtworks.com
www.thoughtworks.com | Pune
+91 9765407578

Talk to me manishpi manish1022View Profile

--- On Mon, 14/9/09, elizabeth wrote:

From: elizabeth
Subject: Re: [IxDA Discuss] Are carousels effective?
To: discuss at ixda.org
Date: Monday, 14 September, 2009, 2:04 PM

You folks are great!  Thanks for your thoughts.

Some of you have actually expressed some of my own fears
(accessibility, banner blindness, not to be confused with
navigation...). 

The carousel/slideshow, if it gets off the ground, would have some
way to pause it and wouldn't be done in Flash, everything else is
yet to be decided.

Regarding some of your other comments:

Hulu IS pretty cool!  It is very eye-catching - nothing else
competing for your attention. 
The only thing there is that people enter the site specifically to
watch TV, which makes it a bit different to an information/text-based
site. But still a nice example.

Another site that kept coming up when I was googling the topic was
this one: http://www.marthastewart.com - Different bloggers praised
it's carousel/tabbing.  I don't think it's too bad either, partly
because the tab labels are clear. They still require the user to be
in the mood for exploring, though maybe this lady's users do just
that.

Jay, the content of the client's site is also updated often, and,
depending on the day, is pretty important to the site's users so I
don't think the content quality would be a major problem.  But yep,
the best interaction design in the world isn´t any good if the
content isn't worth checking out!

David, I agree, as casual contextual navigation on secondary pages
this element could be very useful.

I also like the idea of dragging, that's something to look into.

Anees, I haven't come across any examples of timers myself, but can
imagine something similar to a typical page loading progress bar
animation might do the job.  However, I think if there were numbers,
it might be distracting.  Some way to pause and continue, like
playing a video on youtube could work...

The other idea I was playing with to avoid all these concerns(!!) was
having 2 or 3 different images that load randomly when someone visits
the page, that way regular users will see different items, without
the animation or the complication of
tabs/arrows/descriptions/groupings...

Anyway, many thanks for all your input.  Other good examples/ideas
are always welcome. 

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Posted from the new ixda.org
http://www.ixda.org/discuss?post=45551

-----Inline Attachment Follows-----

________________________________________________________________
Welcome to the Interaction Design Association (IxDA)!
To post to this list ....... discuss at ixda.org
Unsubscribe ................ http://www.ixda.org/unsubscribe
List Guidelines ............ http://www.ixda.org/guidelines
List Help .................. http://www.ixda.org/help

15 Sep 2009 - 9:14am
paul turner
2007

For a carousel at runtime that is completely at the user's control
regarding advancing and going backward, at
http://www.horatioalger.org/history.cfm.

Best regards,

Paul Turner :: Interaction designer

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Posted from the new ixda.org
http://www.ixda.org/discuss?post=45551

15 Sep 2009 - 10:00am
DPR67
2009

Hi Elizabeth,

It seems that Apple likes the carousal approach for the iPhone app
store. (iTunes 9.0) In this case, it is a much needed piece of the
page as it helps people discover new applications for their devices
that may get overlooked otherwise.

I agree with one of the people above who mentioned it depends a lot
on the content and the value the carousal has to offer the viewer.

In Apples, case it was a great improvement so it was well accepted by
the community. If what you are displaying can make it easier to
"discover" parts of your content that has a benefit to the viewer
then I believe it's worth while.

Kind regards

David Roach
david at bbiggapps.com
davidroach at creativeclasssoftware.com

DigiMagic
"Experience The Unknown"
http://www.youtube.com/watch?v=3R-tVGeO11s

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Posted from the new ixda.org
http://www.ixda.org/discuss?post=45551

16 Sep 2009 - 4:39am
Angelo Directo
2008

Interesting discussion. I was just wondering about off-line
"carousels" ways in which we browse through things in a similar
fashion... a photo album, a calendar, a rolodex... how about a row of
movie posters, or a walking in a mall, or a grocery store aisle?

It's actually quite a natural metaphor.

Check out Google's FastFlip too: http://fastflip.googlelabs.com/

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Posted from the new ixda.org
http://www.ixda.org/discuss?post=45551

Syndicate content Get the feed