Carousels
Carousels, image rotators, sliders, featured content modules, whatever the hell you want to call them — they’re everywhere on the web. There’s a 95% chance you’ve created one. But despite being so omnipresent, little is said about our splashy little auto-rotating frenemies. Let’s fix that.
Last year in the Biodome at Breaking Development Conference, I was discussing (read: screaming about) carousels with Erik Runyon, web developer extraordinaire at Notre Dame University. I lamented the fact that there’s no data out there about carousel effectiveness, and Erik clued me in on Notre Dame’s homepage, which has not one, but two featured content carousels. What began as a data-filled tweet is now a full-fledged post, which I highly encourage you to check out.
So in the spirit of keeping the conversation going, here’s my thoughts and considerations around carousels.
Carousel Considerations
- Make sure you actually need one
- Cycle through like items
- Make navigation obvious
- Only load what you need
- Suggest more content to users
- Treat touch as an enhancement
- Provide gestural hints
Make sure you actually need one
I’ll go out on a limb and say that most carousels simply don’t need to exist. Here’s why:
Carousels are organizational crutches
INT. MEETING ROOM
“I’m very important! I need to be on the homepage!”
“I’m also very important! I need to be on the homepage too!”
“I’m very very important, I need to be on the homepage three!”
“Let’s make a carousel! Everybody wins!”
THE GROUP HIGH FIVES AND CELEBRATES OVER A BLOOMIN’ ONION AT OUTBACK STEAKHOUSE.
END SCENE
I suspect this is why a good number of carousels exist. From universities to giant retailers, large organizations endure their fair share of politics. And boy does that homepage look like a juicy piece of prime real estate to a roomful of stakeholders. It’s hard to navigate these mini turf wars, so tools like carousels are used as appeasers to keep everyone from beating the shit out of each other.
It’s far harder to have an honest content strategy conversation and determine what truly deserves to be on the homepage.
Carousels are complex
Carousels introduce a level of complexity to an interface. Instead of simply looking at content on a page, users are burdened with having to identify the carousel and then learning its controls, conventions and behaviors.
They also require more scripts and introduce more moving parts, which means more QA and more potential to break.
Complexity isn’t necessarily bad, and you can certainly justify extra effort for something that will pay off, but…
Carousels just aren’t that effective
Looking at Erik’s data, it becomes quite clear that carousels just don’t get interacted with all that much. Moreover, Jakob Nielsen posted that these large carousel areas annoy users and also cause them to skip over that featured area. I’m pretty sure that’s the exact opposite of the intended effect.
Even though carousels aren’t that effective, I somehow don’t think they’re going away any time soon. So if you find yourself having to implement a carousel, here’s some things to consider.
Cycle through like items
You might think this is an obvious point, but many carousels out there contain a venerable grab bag of disparate crap. E-commerce sites are notorious for the amount of miscellany they feature in homepage carousels. “Hot Summer Sale!” screams Panel 1. “Like us on Facebook!” pleads an undeniably desperate Panel 2. “Did you know we carry men’s footwear, too?” inquires Panel 3 to no one in particular.
Make navigation obvious
Tiny little semi-transparent dots all by their lonesome are an ineffective way of communicating a carousel to a user. I’ve spent quite a bit of time behind a one-way mirror watching user after user gloss over carousel areas because they don’t understand the area is interactive. Even iOS (where this design pattern was popularized) users skipped right over and commented on the fact that they had no idea that there was more content available.
I often point to Yahoo’s iPhone-optimized site as one that does a good job being explicit with their navigation. It provides clear ‘Previous’ and ‘Next’ buttons, a good sense of where you’re at in the carousel, controls that don’t overlay content, and tappable targets.
Only load what you need
If you have a carousel with 47 items in it, don’t load all 47 by default. This again might seem like an obvious point, but it’s important to understand that all those extra panels incur serious performance overhead. Considering many (read: most) users won’t ever even get to panel #2, make sure you’re not burdening your users with extraneous downloads.
Suggest more content to users
In The Overflow Pattern, I recommend that it should be clear to the user that there’s more content to be had. This could be an overhang, set of arrows, scrollbars, gestural hints, auto-rotation, or something else. Whatever it is, it should be immediately obvious to the user that more content exists offscreen. This could make all the difference in the world in deciding the carousel’s effectiveness.
Treat touch as an enhancement
Carousels can be a great opportunity to sexy up an interface with some touch gestures (and there’s some good touch-enabled carousels out there). But just because touch is available doesn’t mean you should exclude alternative forms of navigation.
Here’s Zappos’ mobile product image carousel, which features a nice little overhang to let the users there’s more content to be had.
However, the issue is that the only way to advance to the next image is to swipe. And that requires touch event support, which not all browsers have (like Opera Mini in the photo above). This thankfully isn’t difficult to fix (simply include prev/next buttons in addition to touch), but it’s yet another example of where assuming too much comes back to bite you.
Provide gestural hints
Josh Clark beautifully articulates how touch gestures are invisible, but can be subtly revealed to users. Adding touch to a carousel can be a great idea, but letting users know a carousel is touch-capable can be tricky. A subtle initial animation or auto-advancement might help, but could also be annoying.
Take the Brad Frost Carousel Challenge
Those are my thoughts on carousels. But as I mentioned at the beginning of the post, we unfortunately don’t see too much data on the effectiveness of carousels (most of what I find is all hearsay). So here’s your chance. Step right up and take the Brad Frost Carousel Challenge! It would be great to see more data published about carousels, and here’s what you can do:
- Find a carousel on your site (and I know you gots one)
- Add tracking (if not already in place)
- Collect data (total clicks, panels viewed and whatever other data you can get your hands on)
- Publish the data in some way, shape or form
To earn extra bonus points (and possible superpowers), conduct an A/B test where some users get a carousel while others do not. See what performs better and publish the results.
Erik accepted the challenge and I granted him his wish of eternal handsomeness. Sign up now and you too can have your dreams come true! Please advance to Panel #2 for contest rules and details.
Related read: Internet Users Demand Less Interactivity – “We Just Want To Visit Websites And Look At Them,” Users Say
23 Comments
Jeff Golenski
Brad,
Thank you for addressing this. Being a designer, I’ve been debating this with other designers for quite some time in regards to making the navigation obvious, providing gestural hints, and suggesting more content.
Often times as a designer you overlook the larger focus and forget how the typical end user recognizes particular elements which can lead to improper design.
The example I see more than often is the implementation of super minuscule dots for navigation. While I enjoy the concept I absolutely hate it when it’s executed in such a fashion where I have to squint to click them – even worse when keyboard functionality and arrows are left out.
Zappos does an exceptional job of hinting with the overflow of content. It’s just so natural to see a cut-off image and know you can swipe to see more. However, since zappos has a more broad user-base, I feel an arrow still couldn’t hurt in some instances. (But then again, people shopping from Zappos are more than likely a little more in-tune with technology and don’t need it.
And of course I’ve seen far too many websites that flat out just don’t need a slider / whatever. Gotta love waiting for a site to load because it gets hung up on the ridiculous amount of CSS and jQuery that’s included in some packaged sliders, just to find out it only contains images and no text, links, or indication of importance.
I think a problematic trend that often occurs in our industry is the desire to implement new discovered technologies or design trends themselves without really analyzing how they may affect the demographic they’re intended for. Of course a few critical thinkers always come out and point the flaws out, but usually only after the web is scoured with them. But alas, I suppose that’s just natural evolution, isn’t it?
Tim
Great post, Brad. Do you have some examples of carousel event tracking that folks can get started with?
brad
None that I know of, however I suppose it wouldn’t be different than any other sort of event tracking. Google Analytics has some walkthroughs about how to set that up: https://developers.google.com/analytics/devguides/collection/gajs/eventTrackerGuide
Robert Visser
I would suggest all slide shows / carousels have pause / play functionality. Most of us browse multiple pages — as I’m writing I have 51 tabs open on two browsers. Enabling auto-play, esp. continuous auto-play, without a pause feature burns trough browser cache. Personally, I also find auto-play annoying — in fact, any element which doesn’t require user input to start is annoying, for me a poor user experience (UX).
A somewhat tangential corollary is animated gifs. I would place these in the realm of pet peeves. In my opinion all browser manufactures should provide a preference setting to only play automated gifs once.
Graeme
Great advice, Brad!
Another major problem with carousels is that they can often pose significant accessibility issues. For example, if the carousel auto-rotates relatively quickly, certain users might find the animation distracts from other content on the page, users might struggle to read the contents of each slide before they change, keyboard access to carousels and their content can often be a bit tricky (particularly if there are links or other controls within each slide), and the changes in content are often not conveyed to screen reader users.
So, to add to your suggestions, I would also suggest (and this is a bit of a brainstorm) that carousels shouldn’t auto-scroll – instead, the user should have full control over slide changes. WAI-ARIA semantics, and particular the tab panel role, could also be applied to ensure that changes in slide content are conveyed correctly to assistive technologies.
If auto-scrolling is absolutely necessary, I would suggest a “Stop” button is provided.
Additionally, if there are links or other interactive components inside the panels, make sure that the pages or other content linked to from that component can also be accessed from outside the carousel so that those who cannot use the carousel can still get access to those pages.
maxCohen
Isn’t this known as banner/ad blindness?
Gail Swanson
I’d love some data on how well those big carousels perform in terms of exposing users to content, establishing brand etc. Do users look at them? Is there a relationship between interaction and size or content type?
Would carousels be useful if they contained valuable content rather than splashy imagery, PR announcements and % off sales? I suspect that users have developed a bit of banner blindness to the typical carousel.
Raymond Brigleb
“Mmmmmmmmm… sliders!” -Homer
Greg Greiner
Good stuff, Brad. It would be interesting to see a comparison of click through stats for carousel items vs. the same items served one at a time on the page (randomly selected, etc for display).
andreas øverland
Great post Brad.
Another issue with carousels is that they hide content in a way that search-engines do not like. A carousel may hurt the ranking of the page.
If the search-engine does index content on hidden panels another problem arises. Lets say that a user searches for “Jingabaloo nuts” and the first search result leads the user to “www.nuts-you-have-never-heard-of-before.com”.
Thats all well and good. However on the landing page the Jingabaloo nuts are featured in a carousel, on the third panel, and is currently not visible to the user.
What will the user do?
a) Stay, and wait for the carousel to start auto-rotating
b) Click or swipe until the Jingabaloo nuts appear
c) Scroll down until the Jingabaloo nuts appear further down on the page (if they do)
d) Hit the back-button and click on the next search result link.
I’m guessing that in most cases C or D would happen. Which is bad for the user. And especially bad for the company using the carousel. They may possibly have lost a five billion dollar order for Jingabaloo nuts.
Pete Schuster
Nice post. In my mind hero sliders are a design crutch that needs to die. In a RWD world, they are not only hard to code and look good, but serving several huge images is bad news. I wrote a post about my feelings on my blog last month calling for this design pattern to end! http://peteschuster.com/2012/12/death-to-the-hero-slider/
George Zamfir
Based on discussions with my (marketing & analytics) colleagues I can corroborate Erik’s stats and experience on our website – http://www.scotiabank.com/ca/en/0,,2,00.html.
An international bank’s first page is quite appealing real estate and as you can imagine there are many departments (banking, investment, marketing, etc.) that compete for that. Add the mandatory promotions / ads / announcement which arguably are not even department-specific and it’s the wild wild west.
Carousels in my experience were introduced as this temporary compromise to make everybody equally unhappy (hey, at least it’s democratic) but persisted as priorities & resources shifted to something else. While we don’t really have a traditional carousel anymore (see the link above) it’s still the same story.
The biggest pains for me are related to accessibility and therefore overall usability – managing keyboard focus, automatic sliding, hiding (duplicate) content, etc. But it’s also obvious there is a performance / bandwidth impact as well.
I have no solution for you but I just wanted to say that basically you are not alone in your findings… And most importantly we’re happy we’re not alone either 🙂
Dave Kinsella
You’ve inspired me to abandon a responsive slider that I was working on in favour of a more static way to present the information. I thought about the usage and realised that for the site I’m updating, there’s only ever one important thing to highlight.
Sliders belong in image galleries.
Craig Kistler
At a previous job the marketing team insisted on using carousels as a way to highlight content and show visitors the breadth of content we had on the site. However, in all the testing I did, home page carousels were completely ineffective.
For one, anything beyond the initial view has a huge decrease in visitor interaction. And two, the chances that the information being displayed in the carousel matching what the visitor is looking for is very slim. So in that case the carousel becomes a very large banner that gets ignored. In test after test the first thing the visitor did when coming to a page with a large carousel is scroll right past it and start looking for triggers that will move them forward with their task.
The only exception I found was when testing around a holiday and the carousel spoke specifically to that holiday there was an increase in the amount of clicks a visitor had with the carousel.
Felix Buenemann
The most annoying thing about carousels is their performance impact. Most implementations use neither CSS transforms nor requestAnimationFrame. This often leads to sluggish scrolling and 100% CPU load, if only a few carousel site tabs are open.
Tim Hyde
Alternatives are less well defined.
So many slider plugins and tutorials out there. There must another way to impress your client and keep everybody happy.
Maybe Tiles? Whatever you think about Windows 8, it has a least made people think about an alternative to carousels for featuring content.
But we need others before the world also goes all metro!
Ben Frain
Mr Frost, I remember back in the day, before carousels became popular, it was common to use a ‘random’ promo instead. User gets a hero shot one time they visit, a different one the next. As its handled server side (eg not with JS) load is minimal (just a single optimised image). I also find its a way of negating some of the political madness with clients about ‘who’ makes it onto the homepage. They all do just not at once. It was a technique that got superseded by carousels but is arguably superior in some respects (nothing is perfect though of course).
Bill
On the question of SEO… Banner content is meant to be temporary, promotional and switched out frequently. If it gets indexed, it will just muddle the true message of your page or be gone by the time a user actually finds the page organically by searching for the promo content.
Brian Gerry
I notice that the folks at Adobe.com (aka Omniture…) isn’t sporting a carousel and more and more lead gen sites are ditching them as well.
Douglas Bonneville
Marketing folks LOVE all eye candy whether it help users find content or not. From a branding perspective, it makes the site look more engaging and feel more dynamic, regardless if it helps users find content or not. I know the click through data, and hardly anyone clicks on slide 2 or more. That’s fine. The content they are looking for is in the respective section of site. They will find what they are looking for regardless of slider, carousel, accordion, windowshade, modal dialogue, or whatever, as long as the top level navigation makes sense. The movement of a carousel, useless or not, with relevant and current info it, regardless of being clicked, gives an impression that the entire site is with it, up to date, and worth digging into.
I think carousels greatest usefulness is not in being used themselves, but implying that the rest of the website has up to date information and is worth spending time on. Carousels “sell” content on a site on a subconscious level. This has been my experience as a lead developer / designer at several fortune 500 companies – one of which is one of the largest privately held companies in the world.
Jasa Pembuatan Website Toko Online
So many slider plugins and tutorials out there. There must another way to impress your client and keep everybody happy.
Marisa Falcigno
Hey Brad – I’m so glad you mentioned this at In Control yesterday, as I hadn’t read the stats that Eric provided and missed this article earlier. I was wondering what your (or anyone else’s) take on using carousels, more specifically back/forth sliders on home pages of portfolio websites. I create a lot of websites for artists/craftspeople and sliders have become a popular tool in introducing visitors to their work upon entering their site. Accompanying the slider is usually a brief bio, latest news/events, etc – nothing cluttered, but enough info to lead the user to other parts of the site. Would you still consider this an unnecessary use of a carousel? Just wondering if this sort of use still makes sense.
Thanks!
Chief Conversionista
In order to replace “opinions” with facts we did an eyetracking study combined with an A/B-test.
The A/B-testing showed that engagement and clicks on the slider area went up when we substituted the slider with a static image.
Eyetracking data showed that the static image had more eye fixations than the slider version.
You can see the whole case study here (in Swedish, use google translate) http://www.conversionista.se/okar-bildspel-pa-forstasidan-din-konverteringsgrad/
Comments are closed for this post. If you've got something to add, feel free to reach out on Twitter.